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