دور الدلالة في التنقل في الصفحات
لقد تعرفت على السمات الوظيفية والدلالة وكيف تستخدم التقنيات المساعدة شجرة إمكانية الوصول لإنشاء تجربة مستخدم بديلة لمستخدميها. كما ترى أن كتابة HTML الدلالي والدلالية تمنحك الكثير من إمكانية الوصول بجهد بسيط للغاية، حيث تتضمن العديد من العناصر القياسية الدلالة والسلوك الداعم.
في هذا الدرس، سنتناول بعض الدلالات الأقل وضوحًا التي تعتبر مهمة جدًا لمستخدمي برامج قراءة الشاشة، خاصةً في ما يتعلق بالتنقل. في صفحة بسيطة تتضمن الكثير من عناصر التحكم ولكن ليس كثيرًا من المحتوى، سيكون من السهل فحص الصفحة للعثور على ما تحتاجه. ولكن بالنسبة إلى الصفحات ذات المحتوى المليء بالمحتوى، مثل مدخل ويكيبيديا أو مجمّع الأخبار، ليس من العملي قراءة كل شيء من أعلى إلى أسفل، إذ تحتاج إلى طريقة للتنقل بكفاءة بين المحتوى.
غالبًا ما يكون لدى المطورون اعتقاد خاطئ بأن برامج قراءة الشاشة مرهقة وبطيئة الاستخدام، أو أن كل شيء على الشاشة يجب أن يكون قابلاً للتركيز لقارئ الشاشة للعثور عليه. لكن هذا لا يحدث في كثير من الأحيان.
غالبًا ما يعتمد مستخدمو قارئ الشاشة على قائمة العناوين للعثور على المعلومات. توفِّر معظم برامج قراءة الشاشة طرقًا سهلة لعزل قائمة بعناوين الصفحات وفحصها، وهي ميزة مهمة تُعرف باسم الدوّار. لنرَ كيف يمكننا استخدام عناوين HTML بشكل فعال لدعم هذه الميزة.
استخدام العناوين بفعالية
أولاً، نكرّر نقطة سابقة: المسائل المتعلّقة بترتيب DOM، ليس فقط بشأن ترتيب التركيز، ولكن أيضًا لترتيب قارئ الشاشة. أثناء تجربة برامج قراءة الشاشة مثل VoiceOver وNVDA وJAWS وChromeVox، ستجد أن قائمة العناوين تتبع ترتيب DOM بدلاً من الترتيب المرئي.
هذا ينطبق على برامج قراءة الشاشة بشكل عام. ولأنّ برامج قراءة الشاشة تتفاعل مع شجرة تسهيل الاستخدام، ولأنّ شجرة إمكانية الوصول تستند إلى شجرة بيانات نموذج العناصر (DOM)، يستند الترتيب الذي يراه قارئ الشاشة مباشرةً إلى ترتيب نموذج العناصر في المستند (DOM). هذا يعني أن هيكل العنوان ال مناسب أكثر أهمية من أي وقت مضى.
في معظم الصفحات ذات التنظيم الجيد، يتم دمج مستويات العناوين للإشارة إلى العلاقات الرئيسية والفرعية بين كتل المحتوى. وتشير قائمة تحقق WebAIM بشكل متكرر إلى هذا الأسلوب.
- 1.3.1 يشير إلى "يتم استخدام الترميز الدلالي لتحديد العناوين".
- 2.4.1: يشير إلى بنية العنوان كأسلوب لتجاوز أجزاء من المحتوى.
- 2.4.6 تناقش بعض التفاصيل حول كتابة عناوين مفيدة
- 2.4.10 ينص على "يتم تحديد أقسام فردية من المحتوى باستخدام العناوين، حيثما كان ذلك مناسبًا"
لا يلزم أن تكون جميع العناوين مرئية على الشاشة. على سبيل المثال، تستخدم ويكيبيديا تقنية تضع عمدًا بعض العناوين خارج الشاشة لجعلها متاحة فقط لبرامج قراءة الشاشة وغيرها من التكنولوجيات المساعدة.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
بالنسبة للتطبيقات المعقدة، يمكن أن تكون هذه طريقة جيدة لاستيعاب العناوين عندما لا يتطلب التصميم المرئي أو يحتوي على مساحة لعنوان مرئي.
خيارات التنقّل الأخرى
على الرغم من أنّ الصفحات التي تحتوي على عناوين جيدة تساعد مستخدمي قارئ الشاشة على التنقّل في الصفحة، هناك عناصر أخرى يمكنهم استخدامها للتنقّل في الصفحة، بما في ذلك الروابط وعناصر التحكّم في النموذج والمعالم.
يمكن للقراء استخدام ميزة الدوّار في قارئ الشاشة (وهي طريقة سهلة لعزل قائمة بعناوين الصفحات ومسحها ضوئيًا) للوصول إلى قائمة الروابط على الصفحة. ففي بعض الأحيان، توجد العديد من الروابط في موقع wiki، وبالتالي قد يبحث القارئ عن مصطلح ضمن الروابط. ويؤدي هذا إلى تقييد النتائج بالروابط التي تحتوي على العبارة فعليًا، بدلاً من كل موضع ورود للعبارة في الصفحة.
هذه الميزة مفيدة فقط إذا تمكن قارئ الشاشة من العثور على الروابط وكان نص الرابط مفيدًا. على سبيل المثال، إليك بعض الأنماط الشائعة التي تجعل من الصعب العثور على الروابط.
- علامات الارتساء بدون سمات
hrefتُستخدم استهدافات الروابط هذه غالبًا في تطبيقات الصفحة الواحدة، وتُسبب مشاكل لبرامج قراءة الشاشة. يمكنك الاطّلاع على المزيد من المعلومات في هذه المقالة حول تطبيقات الصفحة الواحدة. - الأزرار التي تم تنفيذها باستخدام الروابط يتسبب ذلك في تفسير قارئ الشاشة للمحتوى كرابط، ويتم فقدان وظيفة الزر. بالنسبة لهذه الحالات، استبدل علامة الارتساء بزر حقيقي وصممه بشكل مناسب.
- الصور المستخدمة كمحتوى رابط. في بعض الأحيان، قد تكون الصور المرتبطة
غير قابلة للاستخدام لقارئات الشاشة. لضمان عرض الرابط بشكل صحيح للتكنولوجيا المساعِدة، تأكَّد من أنّ الصورة تحتوي على نص السمة
alt.
ويشكّل نص الرابط الضعيف مشكلة أخرى. لا يوفر النص القابل للنقر مثل "مزيد من المعلومات" أو "انقر هنا" أي معلومات دلالية حول مكان الرابط. بدلاً من ذلك، استخدم نصًا وصفيًا مثل "معرفة المزيد حول التصميم سريع الاستجابة" أو "شاهد هذا البرنامج التعليمي للوحة الرسم" لمساعدة برامج قراءة الشاشة على توفير سياق ذي مغزى حول الروابط.
يمكن للدوار أيضًا استرداد قائمة التحكم في النموذج. باستخدام هذه القائمة، يمكن للقراء البحث عن عناصر محددة والانتقال إليها مباشرةً.
من الأخطاء الشائعة التي تحدثها برامج قراءة الشاشة طريقة اللفظ. على سبيل المثال، قد ينطق قارئ الشاشة "Udacity" كـ "oo-dacity"، أو يقرأ رقم الهاتف كعدد صحيح كبير، أو يقرأ نصًا بأحرف كبيرة كما لو كان اختصارًا. ومن المثير للاهتمام أنّ مستخدمي برامج قراءة الشاشة معتادون تمامًا على هذا الأمر ويأخذونه في الاعتبار.
يحاول بعض المطورين تخفيف هذا الموقف من خلال توفير نص لقارئ الشاشة فقط يتم تهجئته صوتيًا. في ما يلي قاعدة بسيطة للتهجئة الصوتية: لا تفعل ذلك، لأنّ ذلك يؤدي إلى جعل المشكلة أكثر سوءًا. فإذا كان المستخدم يستخدم مثلاً جهاز عرض بلغة برايل، ستُكتب الكلمة بشكل غير صحيح، ما يؤدي إلى مزيد من الالتباس. تسمح برامج قراءة الشاشة بتهجئة الكلمات بصوت عالٍ، لذا اتركها للقارئ للتحكم في تجربته وتحديد وقت الضرورة.
يمكن للقرّاء استخدام الدوار للاطّلاع على قائمة المعالم. تساعد هذه القائمة القرّاء في العثور على المحتوى الرئيسي ومجموعة من معالم التنقّل التي توفِّرها عناصر معالم HTML.
قدم HTML5 بعض العناصر الجديدة التي تساعد في تحديد البنية الدلالية للصفحة، بما في ذلك header وfooter وnav وarticle وsection وmain وaside. توفر هذه العناصر على وجه التحديد أدلة هيكلية في الصفحة
دون فرض أي نمط مدمج (وهو ما يجب عليك فعله باستخدام CSS على أي حال).
تحل العناصر الهيكلية الدلالية محل أقسام div المتعدّدة والمتكررة، وتوفّر طريقة أوضح ووصفًا أكثر للتعبير بشكل بديهي عن بنية الصفحة لكل من المؤلفين والقراء.