هل تساءلت يومًا كيف تعرف التكنولوجيا المساعِدة، مثل قارئ الشاشة، ما يجب أن تعلنه للمستخدمين؟ والإجابة هي أنّ هذه التقنيات تعتمد على ترميز المطوّرين لصفحاتهم باستخدام 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> في حالة موسّعة أو مُصغّرة، وذلك استنادًا إلى ما إذا كان مفتوحًا أو مغلقًا.
شجرة تسهيل الاستخدام
بالنسبة إلى كل عقدة في نموذج المستند، يحدّد المتصفّح ما إذا كانت العقدة "مهمة" من الناحية الدلالية ويضيفها إلى شجرة تسهيل الاستخدام. عندما توفّر تكنولوجيات تسهيل الاستخدام، مثل قارئ الشاشة، واجهة مستخدم بديلة للمستخدم، فإنّها غالبًا ما تفعل ذلك من خلال تصفّح شجرة تسهيل الاستخدام هذه.
باستخدام "أدوات مطوّري البرامج في Chrome"، يمكنك فحص الخصائص الدلالية لأحد العناصر واستكشاف موضع العنصر في شجرة تسهيل الاستخدام.
الخطوات التالية
بعد التعرّف على بعض المعلومات حول الدلالات وكيفية مساعدتها في التنقّل باستخدام قارئ الشاشة، ستنظر إلى الصفحات التي تنشئها بشكل مختلف. في القسم التالي، سنعود إلى الخلف خطوة واحدة ونستعرض كيف يمكن عرض المخطط الكامل للصفحة باستخدام العناوين وعناصر التنقّل الفعّالة.