مقدّمة عن شجرة تسهيل الاستخدام
لنفترض أنّك تنشئ واجهة مستخدم لمستخدمي برامج قراءة الشاشة فقط. هنا، لا تحتاج إلى إنشاء أي واجهة مستخدم مرئية على الإطلاق، بل يكفي فقط توفير ما يكفي من المعلومات لقارئ الشاشة لاستخدامها.
ما ستقوم بإنشائه هو نوع من واجهة برمجة التطبيقات التي تصف بنية الصفحة، على نحو مشابه إلى واجهة برمجة تطبيقات DOM، ولكن يمكنك الهروب من خلال معلومات أقل وعُقد أقل، لأن الكثير من هذه المعلومات مفيدة فقط للعرض المرئي. أُنشأها جون هنتر، الذي كان متخصصًا قد يبدو شيئًا من هذا القبيل.
وهذا هو أساسًا ما يعرضه المتصفح لقارئ الشاشة. تشير رسالة الأشكال البيانية يأخذ المتصفح شجرة نموذج العناصر في المستند ويعدّلها في نموذج مفيد التكنولوجيا المساعدة. ونشير إلى هذه الشجرة المعدَّلة باسم Accessibility (تسهيل الاستخدام) شجرة:
قد تتصور شجرة تسهيل الاستخدام وكأنها تشبه صفحة ويب قديمة إلى حدٍ ما من التسعينيات: بعض الصور، والكثير من الروابط، وربما حقلاً وزرًا.
يمنحك الفحص المرئي لصفحة مثل هذه الحالة تجربة مشابهة وما سيحصل عليه مستخدم قارئ الشاشة. الواجهة موجودة، ولكنها بسيطة ومباشرة، تشبه إلى حد كبير واجهة شجرة تسهيل الاستخدام.
شجرة إمكانية الوصول هي التي تتفاعل معها معظم التقنيات المساعدة. تشير رسالة الأشكال البيانية التدفق يحدث شيئًا من هذا القبيل.
- يعرض أحد التطبيقات (المتصفح أو أي تطبيق آخر) نسخة دلالية من واجهة مستخدم للتكنولوجيا المساعدة عبر واجهة برمجة تطبيقات.
- قد تستخدم التكنولوجيا المساعدة المعلومات التي تقرأها عبر واجهة برمجة التطبيقات إنشاء عرض تقديمي بديل لواجهة مستخدم للمستخدم. على سبيل المثال: ينشئ قارئ الشاشة واجهة يسمع فيها المستخدم صوتًا وتعريف التطبيق.
- قد تسمح التكنولوجيا المساعدة أيضًا للمستخدم بالتفاعل مع التطبيق في بطريقة مختلفة. على سبيل المثال، توفر معظم برامج قراءة الشاشة عناصر الجذب للسماح لمحاكاة النقر بالماوس أو النقر بالإصبع بسهولة.
- تُعيد التكنولوجيا المساعدة نية المستخدم (مثل "النقر") إلى التطبيق عبر واجهة برمجة تطبيقات Accessibility API. يتحمل التطبيق عندئذٍ مسئولية تفسير الإجراء بشكل مناسب في سياق واجهة المستخدم الأصلية.
بالنسبة إلى متصفحات الويب، هناك خطوة إضافية في كل اتجاه، نظرًا لأن المتصفح هو في الواقع نظام أساسي لتطبيقات الويب التي تعمل داخله. لذلك يحتاج المتصفح إلى تطبيق الويب على شكل شجرة إمكانية الوصول، والتأكد من أن الأحداث المناسبة في JavaScript استنادًا إلى إجراءات المستخدم التي تأتي من التكنولوجيا المساعدة.
تقع على عاتق المتصفّح مسؤولية ذلك بالكامل. إن مهمتنا كمطوّرين على الويب هي أن تدرك ما يحدث، ولتطوير صفحات ويب تستفيد هذه العملية لإنشاء تجربة يسهل الوصول إليها لمستخدمينا.
ونفعل ذلك من خلال التأكّد من تعبيرنا عن الدلالة الدلالية لصفحاتنا بشكل صحيح: والتأكد من أن العناصر المهمة في الصفحة تتضمن المعلومات الصحيحة والأدوار والحالات والخصائص، وأننا نحدد أسماء الأوصاف. يمكن للمتصفح بعد ذلك السماح للتقنية المساعدة بالوصول إلى المعلومات لإنشاء تجربة مخصصة.
دلالات في ترميز HTML الأصلي
يمكن لأي متصفح تحويل شجرة نموذج العناصر في المستند إلى شجرة إمكانية الوصول بسبب الكثير من يحتوي نموذج العناصر في المستند (DOM) على معنى دلالي ضمني. وهذا يعني أنّ نموذج العناصر في المستند (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>
عندما يتم تصنيف مربّع الاختيار بشكل صحيح، يمكن لقارئ الشاشة الإبلاغ عن ذلك يكون العنصر بدور مربع الاختيار وهو في حالة محددة ويسمى "استلام عروض ترويجية؟".
