طعنة أخرى في النص المقطوع

يبدو أننا نتحدث دائمًا عن قص النص هنا. كل ما يتطلبه الأمر هو القليل من التصفح لاكتشاف مجموعة من الأشياء التي اكتشفناها بالفعل.

إنه أصعب مما يبدو! وهناك الكثير من الاعتبارات التي تدخل في ذلك! في المرة الأخيرة التي قمت فيها بزيارة هذا الموقع، قمت بإعادة إنشاء تطبيق رائع المظهر على MDN.

لاحظت هناك أن VoiceOver يحترم النص الكامل ويعلن عنه.

بدأت أتساءل: ماذا لو أردت أنا أو أي شخص آخر قراءة النص الكامل ولكن لم يكن لدي التقنية المساعدة اللازمة لذلك؟ إنه شيء يبدو أنانيًا تقريبًا بسبب ذاكرة العضلات طويلة المدى التي تخبرني أنني لست المستخدم. لكنني أعتقد أن هذا طلب صالح لتجربة أكثر شمولاً. يجب أن يتمكن جميع الأشخاص من الحصول على المحتوى الكامل، بشكل مرئي أو معلن.

لم أكن أرغب في تقديم نفس العرض التوضيحي، لذلك اخترت شيئًا مختلفًا بعض الشيء ويطرح تحديات مماثلة، وربما أكثر من ذلك. هذا هو:

أعلم أنه ليس أجمل شيء على الإطلاق. لكنها دراسة حالة مثيرة للاهتمام للأسباب التالية:

يقوم هذا الإعداد بما لا تفعله تجربتي في MDN: منح المستخدمين الذين ليس لديهم تقنية مساعدة مسارًا للوصول إلى المحتوى الكامل. الحق على، شحنها! لكن انتظر…

الآن يعلن VoiceOver (أنا آسف لأن هذا كل ما قمت باختباره) عن الزر. أنا لا أريد ذلك. أنا لا أفعل ذلك حتى يحتاج ذلك لأن قارئ الشاشة يعلن بالفعل عن النص الكامل. لا يبدو الأمر وكأن الشخص الذي يسمع النص يحتاج إلى توسيع اللوحة أو أي شيء آخر. ينبغي أن يكونوا قادرين على تخطي ذلك!

ولكن هل يجب علينا حقًا “إخفاء” الزر؟ تخبرنا الكثير من الحكمة التقليدية أنه من المروع إخفاء الأزرار وتعطيلها. أي تحكم موجود للقراء المبصرين يجب أن يكون موجودًا للمستمعين السامعين أيضًا.

إذا أردنا أن نسقط ببساطة disabled="true" على الزر، مما يمنع قارئ الشاشة من الضغط على الزر لتنشيط شيء ما دون داع. ولكن الآن قمنا بإنشاء الوضع الذي قمنا به disabled شيء دون الكثير من التفسير لماذا. إذا سمعت أن هناك زرًا في الصفحة وهو disabled (أو باهتًا)، أريد أن أعرف السبب لأنه يبدو أنني قد أفتقد شيئًا ما حتى لو لم أكن كذلك. بالإضافة إلى أنني لا أريد ذلك disable الزر بشكل افتراضي، وخاصة بالنسبة لأولئك الذين يحتاجون إليه.

هذا هو المكان الذي من المرجح أن يتوقف فيه جيف “العالم الحقيقي” ويشكك في النمط تمامًا. إذا أصبح شيء ما بهذا التعقيد، فمن المحتمل أن يكون هناك طريق أكثر استقامة أفتقده. ولكننا جميعًا متعلمون هنا، لذا أعطيت ذلك جيف الآخر شيئًا لامعًا وكيف أنه مشتت لساعات.

لنفترض أننا نريد حقًا متابعة هذا النمط وجعله حيث يظل الزر في مكانه ولكنه يوفر أيضًا للتقنيين المساعدين بعض السياق. أعلم أن القاعدة الأولى في ARIA هي “لا تستخدم ARIA” ولكننا تجاوزنا هذا الخط المجازي عندما قررنا استخدام <button>. نحن لا نقوم بتشويش الوظائف في ملف <div> ولكنهم يستخدمون عنصرًا دلاليًا. يبدو أنه المكان “المناسب” للوصول إلى ARIA.

يمكننا “إخفاء” الزر بهذه الطريقة:

<!-- NOPE! -->
<button aria-hidden="true">Show Full Text</button>

Buuuut، الصفع aria-hidden="true" على عنصر قابل للتركيز لا يعتبر من أفضل الممارسات. هناك aria- النهج الذي يعادل disabled السمة، إلا أنه لا في الواقع disable الزر عندما لا نستخدم قارئ الشاشة.

<button aria-disabled="true">Show Full Text</button>

رائع، الآن أصبح مخفيًا! شحنها. أوه، انتظر مرة أخرى. نعم لقد فعلنا ذلك aria-disabled الزر فيما يتعلق بالتكنولوجيا المساعدة، لكنه لا يزال لا يوضح السبب.

لا يزال هناك بعض العمل للقيام به. لقد تعلمت مؤخرًا الكثير عن ARIA بعد مشاهدة العرض التقديمي الذي قدمته سارة سويدان بعنوان “The Other C in CSS”. أنا لا أقول إنني “فهمت” كل شيء الآن، ولكنني أردت التدرب ورأيت هذا العرض التوضيحي بمثابة تمرين تعليمي جيد. لقد تعلمت طريقتين مختلفتين يمكننا من خلالهما “وصف” الزر بشكل يسهل الوصول إليه:

• استخدام aria-label: إذا كان العنصر الخاص بنا تفاعليًا (وهو كذلك)، فيمكننا استخدام هذا لإنشاء وصف مخصص للزر، على افتراض أن اسم الزر الذي يمكن الوصول إليه ليس كافيًا (وهو ليس كذلك).
• استخدام aria-labelledby: انها مثل aria-label ولكنه يسمح لنا بالإشارة إلى عنصر آخر في الصفحة يُستخدم لوصف الزر.

دعونا نركز على تلك الثانية للحظة. قد يبدو هذا شيئًا مثل هذا:

<button aria-disabled="true" aria-labelledby="notice">Show Full Text</button>
<span id="notice">This button is disabled since assistive tech already announces the article content.</span>

يجب أن يحتوي العنصر الذي نشير إليه على id. وبما أنه لا يمكن استخدام المعرف إلا مرة واحدة في الصفحة، يجب علينا التأكد من أن هذا هو المثيل الوحيد له، لذا اجعله فريدًا – أكثر تميزًا من مثالي الكسول. ومع ذلك، بمجرد وجوده هناك، نريد إخفاءه لأن الأشخاص المبصرين لا يحتاجون إلى السياق الإضافي – فهو مخصص لأشخاص معينين. يمكننا استخدام نوع من .visually-hidden فئة الأداة المساعدة لإخفاء النص بشكل شامل حتى يتمكن قارئو الشاشة من رؤيته والإعلان عنه:

.visually-hidden:not(:focus):not(:active) {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0); /* for IE only */
  clip-path: inset(50%);
  position: absolute;
  white-space: nowrap;
}

دعونا نتأكد من أننا نشير إلى ذلك في CSS:

<button aria-disabled="true" aria-labelledby="notice">Show Full Text</button>
<span id="notice" class="visually-hidden">This button is disabled since assistive tech already announces the article content.</span>

هذا بالتأكيد لا الحيلة! يتعرف VoiceOver على الزر، ويستدعيه، ويقرأ الرسالة .visually-hidden لاحظ كما وصف الزر.

أنا متأكد من أنني سأشحن هذا. ومع ذلك، فإن العلامات تبدو ثقيلة مع إخفاءها span. كان علينا أن نخلق ذلك عمدا span محض لوصف الزر. لا يبدو الأمر وكأن هذا العنصر موجود بالفعل في الصفحة وقررنا إعادة تدويره. يمكننا أن نفلت من العقاب aria-label بدلاً من ذلك بدون الأمتعة الإضافية:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem asperiores reprehenderit, dicta illum culpa facere qui ab dolorem suscipit praesentium nostrum delectus repellendus quas unde error numquam maxime cupiditate quaerat?
<button aria-disabled="true" aria-label="This button is disabled since assistive tech already announces the article content.">Read More</button>

يبدو أن VoiceOver يقرأ الأشياء بشكل أكثر سلاسة هذه المرة. على سبيل المثال، قرأت aria-label المحتوى على الفور وأعلن عن الزر وحالته مرة واحدة فقط. إذا تركت لأجهزتي الخاصة، سأسمي هذا “مخبوزًا”، ونعم، أخيرًا شحنه.

ولكن لا أترك الأمر لأجهزتي الخاصة، فربما لا يكون هذا الأمر على مستوى السعوط. لقد قمت بفحص الزر مرة أخرى في DevTools لأرى كيف تترجمه واجهة برمجة تطبيقات إمكانية الوصول.

هذا يبدو عن لي. أعلم أن الاسم الذي يمكن الوصول إليه للزر يجب أن يأتي من aria-label إذا كان أحدها متاحًا، ولكنني أعلم أيضًا أن سمتين أخريين لـ ARIA مصممتان خصيصًا لوصف العناصر:

• aria-description: وهذا على الأرجح ما نريده! يصفها MDN بأنها “قيمة سلسلة تصف العنصر الحالي أو توضحه.” مثالية لأغراضنا. لكن! تلاحظ MDN أن هذا لا يزال موجودًا في مسودة المحرر لمواصفات ARIA 1.3. ويظهر مدعومًا على نطاق واسع في Caniuse في نفس الوقت. من المحتمل أن يكون الاستخدام آمنًا ولكني متحفظ بشكل غريب فيما يتعلق بالميزات التي لم يتم التوصية بها رسميًا وسأتردد في شحنها. أنا متأكد من أن ممارس إمكانية الوصول الفعلي سيكون لديه رأي أكثر استنارة بناءً على الاختبار.
• aria-describedby: يمكننا الاستفادة من الوصف الذي يمكن الوصول إليه لعنصر آخر لوصف الزر تمامًا كما فعلنا aria-labelledby. رائع بالتأكيد، ولكن ليس ما نحتاجه هنا لأنني لا أرغب في تقديم عنصر آخر فقط لإخفائه لوصفه.

لكن لا تأخذها مني فحسب! أنا أتحسس طريقي خلال هذا – وجزئيًا فقط فيما يتعلق بالاختبار. قد تكون هذه أيضًا حالة استخدام غبية تمامًا – فإخفاء النص عادةً ما يكون أمرًا سيئًا، بما في ذلك مقتطفات صغيرة مثل هذه. أتوقع أننا سنحصل على بعض النصائح من الأشخاص الأكثر ذكاءً في التعليقات.

وهنا هذا العرض النهائي مرة أخرى. إنها قابلة للتحرير، لذا لا تتردد في التجول فيها.