دور الدلالات في التنقّل في الصفحة
لقد تعرّفت على ميزات الاستخدام والدلالات وكيفية استخدام التكنولوجيات المساعِدة لسلسلة إمكانية الوصول من أجل توفير تجربة مستخدم بديلة. يمكنك أن ترى أنّ كتابة علامات HTML تعبيرية ودلالية تمنحك الكثير من تسهيل الاستخدام بقليل من الجهد، لأنّ العديد من العناصر العادية تتضمّن دلالتها وسلوكها الداعم.
في هذا الدرس، سنتناول بعض الدلالات الأقل وضوحًا والتي تُعدّ مهمة جدًا لمستخدمي تطبيقات قراءة الشاشة، لا سيما في ما يتعلق بالتنقّل. في الصفحة البسيطة التي تحتوي على العديد من عناصر التحكّم ولكن ليس بها الكثير من المحتوى، من السهل فحص الصفحة للعثور على ما تحتاجه. ولكن بالنسبة إلى الصفحات ذات المحتوى المليء بالمحتوى، مثل مدخل ويكيبيديا أو مجمّع الأخبار، ليس من العملي قراءة كل شيء من أعلى إلى أسفل، إذ تحتاج إلى طريقة للتنقل بكفاءة بين المحتوى.
غالبًا ما يكون لدى المطورون اعتقاد خاطئ بأن برامج قراءة الشاشة مرهقة وبطيئة الاستخدام، أو أن كل شيء على الشاشة يجب أن يكون قابلاً للتركيز لقارئ الشاشة للعثور عليه. لكن هذا لا يحدث في كثير من الأحيان.
غالبًا ما يعتمد مستخدمو قارئ الشاشة على قائمة العناوين للعثور على المعلومات. تتضمّن معظم برامج قراءة الشاشة طرقًا سهلة لعزل قائمة عناوين الصفحات وفحصها، وهي ميزة مهمة تُعرف باسم المحرّك. لنلقِ نظرة على كيفية استخدام عناوين HTML بفعالية لإتاحة هذه الميزة.
استخدام العناوين بفعالية
أولاً، لنكرّر نقطة سابقة: ترتيب DOM مهم، ليس فقط لترتيب التركيز، بل لترتيب قارئ الشاشة أيضًا. أثناء تجربة برامج قراءة الشاشة، مثل VoiceOver وNVDA وJAWS وChromeVox، ستلاحظ أنّ قائمة العناوين تتبع ترتيب 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.
يُعدّ نص الرابط غير الواضح مشكلة أخرى. لا يقدّم النص القابل للنقر، مثل "مزيد من المعلومات" أو "انقر هنا"، أي معلومات دلالية عن الوجهة التي ينقل إليها الرابط. بدلاً من ذلك، استخدِم نصًا وصفيًا مثل "مزيد من المعلومات حول التصميم السريع الاستجابة" أو "اطّلِع على تعليمات استخدام canvas هذه" لمساعدة برامج قراءة الشاشة في تقديم سياق ذي معنى عن الروابط.
يمكن للدوار أيضًا استرداد قائمة التحكم في النموذج. باستخدام هذه القائمة، يمكن للقارئين البحث عن عناصر معيّنة والانتقال إليها مباشرةً.
من الأخطاء الشائعة التي ترتكبها برامج قراءة الشاشة هي النطق. على سبيل المثال، قد ينطق تطبيقات قراءة الشاشة كلمة "Udacity" على النحو التالي: "oo-dacity"، أو يقرأ رقم هاتف على النحو التالي: عدد صحيح كبير، أو يقرأ نصًا مكتوبًا بأحرف كبيرة كما لو كان اختصارًا. ومن المثير للاهتمام أنّ مستخدمي برامج قراءة الشاشة معتادون على هذه الميزة ويأخذونها في الاعتبار.
يحاول بعض المطورين تخفيف هذا الموقف من خلال توفير نص لقارئ الشاشة فقط يتم تهجئته صوتيًا. في ما يلي قاعدة بسيطة للتهجئة الصوتية: لا تفعل ذلك، لأنّ ذلك يؤدي إلى جعل المشكلة أكثر سوءًا. على سبيل المثال، إذا كان المستخدم يستخدم جهاز عرض برايل، سيتم إظهار الكلمة بشكل غير صحيح، ما يؤدي إلى زيادة الارتباك. تتيح تطبيقات قراءة الشاشة لمستخدميها سماع الكلمات، لذا ننصحك بترك الخيار لمستخدمي التطبيق للتحكّم في تجربتهم وتحديد الحالات التي يحتاجون فيها إلى سماع الكلمات.
يمكن للقارئين استخدام القرص الدوّار للاطّلاع على قائمة بالمعالم. تساعد هذه القائمة القرّاء في العثور على المحتوى الرئيسي ومجموعة من المعالم التوجيهية التي يوفّرها عنصر HTML landmark.
قدّم HTML5 بعض العناصر الجديدة التي تساعد في تحديد البنية الدلالية
للصفحة، بما في ذلك header وfooter وnav وarticle وsection وmain و
aside. توفّر هذه العناصر على وجه التحديد إشارات هيكلية في الصفحة
بدون فرض أيّ تصميم مضمّن (وهو ما يجب أن تُجريه باستخدام CSS على أيّ حال).
تحلّ العناصر الهيكلية الدلالية محلّ مجموعات مكرّرة من div، وتوفر
طريقة أكثر وضوحًا ووصفًا للتعبير بشكل حدسي عن بنية الصفحة
للمؤلفين والقراء على حد سواء.