مقدمة عن "شجرة تسهيل الاستخدام"
لنفترض أنّك بصدد إنشاء واجهة مستخدم لمستخدمي برامج قراءة الشاشة فقط. في هذه الحالة، لا تحتاج إلى إنشاء أي واجهة مستخدم مرئية على الإطلاق، بل ما عليك سوى تقديم معلومات كافية لاستخدامها في قارئ الشاشة.
ما ستُنشئه هو نوع من واجهات برمجة التطبيقات التي تصف بنية الصفحة، على غرار واجهة برمجة التطبيقات DOM، ولكن يمكنك الاستغناء عن معلومات أقل وعدد أقل من العقد، لأنّ الكثير من هذه المعلومات مفيدة فقط للعرض المرئي. قد يشبه الإجراء التالي ما يلي:
هذا هو ما يقدّمه المتصفّح في الأساس لقارئ الشاشة. يأخذ المتصفّح شجرة نموذج عناصر المستند (DOM) ويُعدّلها إلى شكل مفيد لتكنولوجيا المساعِدة. نشير إلى هذه الشجرة المعدَّلة باسم شجرة الصعوبات.
يمكنك تصور شجرة تسهيل الاستخدام على أنّها تشبه إلى حدٍ ما صفحة ويب قديمة من التسعينيات: بضعة صور والعديد من الروابط، وربما حقل وزر.
تمنحك عملية فحص الصفحة بصريًا في مثل هذه الحالة تجربة مشابهة لتلك التي يحصل عليها مستخدم قارئ الشاشة. تتوفّر الواجهة، ولكنها بسيطة ومباشرة، تمامًا مثل واجهة شجرة تسهيل الاستخدام.
شجرة تسهيل الاستخدام هي ما تتفاعل معه معظم التقنيات المساعدة. يتم تنفيذ الخطوات التالية:
- يعرِض تطبيق (المتصفّح أو تطبيق آخر) إصدارًا دلاليًا من واجهة مستخدمه للتكنولوجيا المساعِدة من خلال واجهة برمجة تطبيقات.
- قد تستخدم التكنولوجيا المساعِدة المعلومات التي تقرأها من خلال واجهة برمجة التطبيقات لمحاولة إنشاء عرض بديل لواجهة المستخدم. على سبيل المثال، ينشئ قارئ الشاشة واجهة يسمع فيها المستخدم تمثيلاً ملفوظًا للتطبيق.
- وقد تسمح التكنولوجيا المساعِدة للمستخدم أيضًا بالتفاعل مع التطبيق بطريقة مختلفة. على سبيل المثال، توفّر معظم برامج قراءة الشاشة عناصر ربط للسماح للمستخدم بمحاكاة نقرة الماوس أو نقرة الإصبع بسهولة.
- تنقل التكنولوجيا المساعِدة نية المستخدم (مثل "النقر") مرة أخرى إلى التطبيق من خلال واجهة برمجة التطبيقات لإمكانية الاستخدام. بعد ذلك، يتحمّل التطبيق مسؤوليةinterpret معالجة الإجراء بشكل مناسب في سياق واجهة المستخدم الأصلية.
بالنسبة إلى متصفّحات الويب، هناك خطوة إضافية في كل اتجاه، لأنّ المتصفّح هو منصّة لتطبيقات الويب التي تعمل داخله. لذلك، يجب أن يحوّل المتصفّح تطبيق الويب إلى شجرة تسهيل الاستخدام، ويجب أن يحرص على بدء الأحداث المناسبة في JavaScript استنادًا إلى إجراءات المستخدم التي تأتي من التكنولوجيا المساعِدة.
وتقع مسؤولية ذلك على عاتق المتصفّح. إنّ مهمتنا كمطوّري صفحات الويب هي إعلامك فقط بأنّ هذا يحدث، وتطوير صفحات ويب تستفيد من هذه العملية لتوفير تجربة سهلة الاستخدام للمستخدمين.
نفعل ذلك من خلال التأكّد من التعبير عن الدلالات في صفحاتنا بشكل صحيح: التأكّد من أنّ العناصر المهمة في الصفحة تتضمّن الأدوار والحالات والسمات الصحيحة التي يمكن الوصول إليها، ومن أنّنا نحدّد الأسماء والوصف المتوافقَين مع أدوات المساعدة. يمكن للمتصفّح بعد ذلك السماح للتكنولوجيا المساعِدة بالوصول إلى هذه المعلومات لتوفير تجربة مخصّصة.
الدلالات في لغة HTML الأصلية
يمكن للمتصفّح تحويل شجرة نموذج عناصر المستند إلى شجرة تسهيل الاستخدام لأنّ الكثير من نموذج عناصر المستند له معنى دلالي ضمني. وهذا يعني أنّ DOM يستخدم عناصر HTML الأصلية التي تتعرّف عليها المتصفّحات وتعمل على النحو المتوقّع على مجموعة متنوعة من منصّات التشغيل. وبالتالي، يتم تلقائيًا التعامل مع ميزات تسهيل الاستخدام لعناصر HTML الأصلية، مثل الروابط أو الأزرار. يمكننا الاستفادة من ميزة تسهيل الاستخدام المضمّنة في المحتوى من خلال كتابة علامات HTML تعبر عن الدلالات في عناصر صفحتنا.
ومع ذلك، نستخدم أحيانًا عناصر تبدو مثل العناصر الأصلية ولكنها ليست كذلك. على سبيل المثال، هذا "الزر" ليس زرًا على الإطلاق.
ويمكن إنشاؤه باستخدام HTML بعدة طرق، وسنعرض طريقة واحدة أدناه.
<div class="button-ish">Give me tacos</div>
عندما لا نستخدم عنصر زر فعليًا، لا يمكن لقارئ الشاشة معرفة العنصر الذي تم النقر عليه. سيكون علينا أيضًا بذل جهد إضافي لإضافة علامة tabindex لجعلها قابلة للاستخدام من قِبل مستخدمي لوحة المفاتيح فقط، لأنّه لا يمكن استخدامها سوى بالموس.
يمكننا إصلاح ذلك بسهولة باستخدام عنصر button عادي بدلاً من div.
ويساعد استخدام عنصر أصلي أيضًا في التعامل مع تفاعلات لوحة المفاتيح. ولا داعي لخسارة تأثيراتك المرئية الرائعة
فقط لأنّك تستخدم عنصرًا أصليًا. يمكنك تصميم العناصر الأصلية
لإضفاء المظهر الذي تريده عليها مع الاحتفاظ بالدلالات والسلوك ضمنيًا.
ذكرنا سابقًا أنّ تطبيقات قراءة الشاشة ستعلن عن دور العنصر واسمه وحالته وقيمته. من خلال استخدام العنصر الدلالي والدور والحالة والقيمة المناسبين، تتم تغطية العناصر، ولكن علينا أيضًا التأكّد من أنّ اسم العنصر يمكن اكتشافه.
بشكل عام، هناك نوعان من الأسماء:
- التصنيفات المرئية، التي يستخدمها جميع المستخدمين لربط معنى بأحد العناصر
- النصوص البديلة، التي لا تُستخدَم إلا عند عدم الحاجة إلى تصنيف مرئي
بالنسبة إلى العناصر على مستوى النص، ليس علينا اتّخاذ أي إجراء، لأنّه بحكم التعريف، سيكون لها بعض المحتوى النصي. ومع ذلك، بالنسبة إلى عناصر الإدخال أو عناصر التحكّم والمحتوى المرئي، مثل الصور، يجب التأكّد من تحديد اسم. في الواقع، يُعدّ توفير بدائل نصية لأي محتوى غير نصي العنصر الأول في قائمة التحقّق من WebAIM.
وإحدى طرق إجراء ذلك هي اتّباع اقتراحهم بأنّ "مدخلات النموذج لها علامات نص مرتبطة". هناك طريقتان لربط تصنيف بعنصر نموذج، مثل مربّع اختيار. يؤدي استخدام أيّ من الطريقتَين إلى أن يصبح نص التصنيف أيضًا هدفًا للنقر على مربّع الاختيار، ما يُعدّ مفيدًا أيضًا لمستخدمي الماوس أو الشاشة التي تعمل باللمس. لربط تصنيف بعنصر، يمكنك اتّباع إحدى الطريقتَين التاليتَين:
- ضع عنصر الإدخال داخل عنصر تصنيف.
<label>
<input type="checkbox">Receive promotional offers?
</label>
أو
- استخدِم سمة
forللعلامة وأشِر إلىidللعنصر.
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
عند تصنيف مربّع الاختيار بشكل صحيح، يمكن لقارئ الشاشة الإبلاغ عن أنّه لدى العنصر دور مربّع اختيار، وأنّه في حالة وضع علامة عليه، وأنّ اسمه "هل تريدتلقّي عروض ترويجية؟".
