هل سبق لك أن توقفت عن التساؤل كيف تعرف التكنولوجيا المساعِدة، مثل قارئ الشاشة، ما يجب الإعلان عنه للمستخدمين؟ الجواب هو أن هذه التقنيات تعتمد على مطوّري برامج ترميز صفحاتهم باستخدام ترميز HTML دلالي. ولكن ما هي الدلالات، وكيف تستخدمها قارئات الشاشة؟
الخصائص والدلالات
قبل التعمق في الدلالات، من المفيد فهم مصطلح آخر: القدرات الوظيفية. الميزة هي أي كائن يوفر أو يمنح مستخدمه الفرصة للقيام بعمل ما. مثال كلاسيكي هو إبريق الشاي:
لا يحتاج إبريق الشاي هذا إلى دليل إرشادي؛ بدلاً من ذلك، فإن تصميمه المادي ينقل المستخدم إلى كيفية تشغيله. له اسم معرِّف، ولأنك رأيت كائنات أخرى في العالم بمقبضين مشابهين، فيمكنك استنتاج كيفية استلامها وتشغيلها.
عندما ننشئ واجهات مستخدم تصويرية، نستخدم عناصر مثل CSS لإضافة عناصر مرئية إلى واجهة المستخدم. على سبيل المثال، يمكنك إعطاء الزر ظل قطري وحدود بحيث يشبه زرًا فعليًا في العالم الحقيقي.
ولكن إذا لم يتمكن المستخدم من رؤية الشاشة، فلن يتم نقل هذه العناصر المرئية إليه. لذلك، تحتاج إلى التأكد من أن واجهة المستخدم الخاصة بك مهيكلة بطريقة يمكن أن تنقل نفس هذه الخصائص للتكنولوجيا المساعدة. يُطلق على العناصر المرئية غير المرئية لعناصر واجهة المستخدم الدلالات.
استخدام ترميز HTML الدلالي
تتمثل أسهل طريقة لنقل الدلالات المناسبة في استخدام عناصر HTML الغنية دلاليًا.
باستخدام CSS، من الممكن
تصميم عنصري <div> و<button> بحيث تنقلان الخصائص المرئية ذاتها،
ولكن التجربتين مختلفة جدًا عند استخدام قارئ الشاشة.
<div> هو مجرد عنصر تجميع عام،
لذلك لا يعلن قارئ الشاشة إلا عن المحتوى النصي لواجهة <div>.
تتم الإشارة إلى أنّ "<button>" كزر،
وهو إشارة أقوى للمستخدم بأنّه يمكنه التفاعل معه.
يتمثل أبسط حل لهذه المشكلة وغالبًا ما يكون الأفضل
في تجنب عناصر التحكم التفاعلية المخصصة تمامًا.
على سبيل المثال، استخدِم علامة <button> فعلية بدلاً من <div> الذي يعمل كزر.
الخصائص الدلالية وشجرة تسهيل الاستخدام
وبشكلٍ عام، سيكون لكل عنصر HTML بعض الخصائص الدلالية التالية:
- دور أو نوع
- اسم
- قيمة (اختيارية)
- state (اختياري)
يصف دور العنصر نوعه، على سبيل المثال، "زر" أو "إدخال" أو حتى
"مجموعة" لأشياء مثل عنصري div وspan.
اسم العنصر هو التصنيف المحسوب له. تقرأ برامج قراءة الشاشة عادةً اسم العنصر متبوعًا بدوره، على سبيل المثال "زر الاشتراك". الخوارزمية التي تحدّد اسم العنصر في عوامل مثل ما إذا كان هناك أي محتوى نصي داخل العنصر، وما إذا كان يحتوي على سمات مثل title أو placeholder، وما إذا كان العنصر مرتبطًا بعنصر <label> فعلي أم لا، وما إذا كان العنصر يتضمن أي سمات ARIA مثل
aria-label وaria-labelledby.
قد يكون لبعض العناصر قيمة. على سبيل المثال، قد يحتوي <input type="text"> على قيمة تعكس كل ما كتبه المستخدم في حقل النص.
قد تحتوي بعض العناصر أيضًا على state، ينقل حالتها الحالية.
على سبيل المثال، يمكن أن يكون العنصر <select> بالحالة موسَّع أو
مصغّر، استنادًا إلى ما إذا كان مفتوحًا أو مغلقًا.
شجرة تسهيل الاستخدام
بالنسبة إلى كل عقدة في DOM، يحدد المتصفّح ما إذا كانت العقدة "مثيرة للاهتمام" دلاليًا ويضيفها إلى شجرة تسهيل الاستخدام. عندما توفر التكنولوجيا المساعدة، مثل قارئ الشاشة، واجهة مستخدم بديلة للمستخدم، فغالبًا ما يتم ذلك من خلال المشي في شجرة سهولة الوصول هذه.
باستخدام أدوات مطوري البرامج في Chrome، يمكنك فحص الخصائص الدلالية لعنصر واستكشاف موضعه في شجرة تسهيل الاستخدام.
الخطوات التالية
بمجرد أن تتعرف على القليل عن الدلالات وكيف تساعد على التنقل في قارئ الشاشة، لا يمكنك أن تساعد ولكن تنظر إلى الصفحات التي تنشئها بشكل مختلف. في القسم التالي، سنعود خطوة إلى الوراء وننظر في كيفية نقل مخطط الصفحة بالكامل باستخدام العناوين والمعالم الفعالة.