شجرة تسهيل الاستخدام

مقدمة حول شجرة تسهيل الاستخدام

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

لنفترض أنّك تنشئ واجهة مستخدم لمستخدمي برامج قراءة الشاشة فقط. هنا، لا تحتاج إلى إنشاء أي واجهة مستخدم مرئية على الإطلاق، ولكن فقط توفير معلومات كافية ليستخدمها قارئ الشاشة.

ما ستنشئه هو نوع من واجهة برمجة التطبيقات التي تصف بنية الصفحة، على غرار واجهة برمجة تطبيقات DOM، لكن يمكنك الإفلات من خلال معلومات أقل وعُقد أقل، لأن الكثير من هذه المعلومات لا يكون مفيدًا إلا للعرض التقديمي المرئي. قد يبدو شيئًا مثل هذا.

النموذج التجريبي لقارئ الشاشة DOM API

وهي في الأساس ما يقدّمه المتصفّح لقارئ الشاشة. يأخذ المتصفح شجرة DOM ويعدّلها إلى شكل مفيد للتكنولوجيا المساعِدة. ونشير إلى هذه الشجرة المعدّلة باسم شجرة تسهيل الاستخدام.

يمكنك تصور شجرة تسهيل الاستخدام كما لو كانت تشبه صفحة ويب قديمة من التسعينيات: بعض الصور، والكثير من الروابط، وربما حقل وزر.

صفحة ويب بتصميم من تسعينيات القرن العشرين

يمنحك المسح المرئي لأسفل صفحة مثل هذه الحالة تجربة مشابهة لما سيحصل عليه مستخدم قارئ الشاشة. الواجهة موجودة، ولكنها بسيطة ومباشرة، تشبه إلى حد كبير واجهة شجرة سهولة الوصول.

شجرة إمكانية الوصول هي ما تتفاعل معه معظم التقنيات المساعدة. يسير التدفق على شيء مثل هذا.

  1. يعرض أحد التطبيقات (المتصفح أو التطبيق الآخر) إصدارًا دلاليًا من واجهة المستخدم الخاصة به للتقنية المساعدة عبر واجهة برمجة تطبيقات.
  2. قد تستخدم التكنولوجيا المساعدة المعلومات التي تقرأها عبر واجهة برمجة التطبيقات لإنشاء عرض تقديمي بديل لواجهة المستخدم. على سبيل المثال، يُنشئ قارئ الشاشة واجهة يسمع فيها المستخدم عرضًا منطوقًا للتطبيق.
  3. قد تسمح التكنولوجيا المساعدة أيضًا للمستخدم بالتفاعل مع التطبيق بطريقة مختلفة. على سبيل المثال، توفر معظم برامج قراءة الشاشة خطافات للسماح للمستخدم بمحاكاة النقر بالماوس أو النقر بالأصابع بسهولة.
  4. تُرحِّل التكنولوجيا المساعدة هدف المستخدم (مثل "النقر") إلى التطبيق عبر واجهة برمجة التطبيقات Accessibility API. يتحمل التطبيق بعد ذلك مسئولية تفسير الإجراء بشكل مناسب في سياق واجهة المستخدم الأصلية.

بالنسبة إلى متصفحات الويب، هناك خطوة إضافية في كل اتجاه، لأن المتصفح في الواقع هو نظام أساسي لتطبيقات الويب التي تعمل داخله. لذا، يحتاج المتصفّح إلى ترجمة تطبيق الويب إلى شجرة تسهيل الاستخدام، ويجب أن يتأكّد من تنشيط الأحداث المناسبة في JavaScript استنادًا إلى إجراءات المستخدم الصادرة عن التكنولوجيا المساعِدة.

ولكن هذه مسؤولية المتصفح بالكامل. مهمتنا كمطوري ويب هي أن ندرك أن هذا يحدث، وأن نطوّر صفحات ويب تستفيد من هذه العملية لخلق تجربة يمكن لمستخدمينا الوصول إليها بسهولة.

نقوم بذلك من خلال التأكد من التعبير عن دلالات صفحاتنا بشكل صحيح: التأكد من احتواء العناصر المهمة في الصفحة على الأدوار والحالة والخصائص الصحيحة التي يمكن الوصول إليها، ومن تحديد الأسماء والأوصاف التي يمكن الوصول إليها. يمكن للمتصفح بعد ذلك السماح للتقنية المساعدة بالوصول إلى تلك المعلومات لإنشاء تجربة مخصصة.

دلالات HTML الأصلية

يمكن للمتصفّح تحويل شجرة نموذج العناصر في المستند (DOM) إلى شجرة تسهيل الاستخدام لأنّ الكثير من نموذج العناصر في المستند (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>

عندما يتم تصنيف مربّع الاختيار بشكل صحيح، يمكن لقارئ الشاشة الإبلاغ عن أنّ العنصر له دور "مربّع الاختيار"، وأنّه في حالة علامة، واسمه "هل تريد تلقّي العروض الترويجية؟".

إخراج نص على الشاشة من VoiceOver يعرض التصنيف المنطوق لمربّع اختيار