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