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