ARIA: سم أم علاج؟

ما هو ARIA؟

يتيح ARIA لمؤلفي محتوى الويب إنشاء واقع بديل لا يظهر إلا من خلال برامج قراءة الشاشة.

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

عندما نجد ملاحظة لاصقة سحرية، فإنّها تلغي اعتقادنا بشأن طبيعة كل أداة أو وظيفتها. على سبيل المثال، إذا أضفت ARIA تشير إلى أنّ "هذا الشيء فوق هنا هو مسدس غراء". على الرغم من أنه عبارة عن صندوق أزرق فارغ، فإن الملاحظة اللاصقة السحرية تخبرنا أنه مسدس غراء. يمكننا أيضًا إضافة "وبلغت نسبة التحميل 30% ". يُبلغ قارئ الشاشة الآن عن توفُّر مسدس غراء ممتلئ بنسبة% 30.

يتمثل الإجراء المكافئ على الويب في استخدام div عادي مع صورة بداخله، واستخدام ARIA للإشارة إلى أنّه شريط تمرير بقيمة 30 من 100. لا تجعل ARIA div شريحة تمرير، بل تُعلِم قارئ الشاشة فقط بأنّه شريحة تمرير.

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

لقد قرأت ذلك بشكل صحيح: لا تؤدي ARIA في الواقع إلى إجراء أيّ تغيير على تركيز لوحة المفاتيح أو ترتيب علامات التبويب. ويتم تنفيذ كل ذلك باستخدام HTML، ويتم أحيانًا تعديله باستخدام أجزاء من JavaScript.

كيف تعمل ARIA؟

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

في ما يلي بعض الاستخدامات الشائعة لـ ARIA.

• أضِف مكوّنات خاصة لا تتوفّر في HTML، مثل الإكمال التلقائي أو شجرة أو جدول بيانات.
• إضافة مكونات موجودة في HTML، لكن المؤلف قرر إعادة ابتكارها، ربما لأنه أراد تغيير سلوك العنصر القياسي أو مظهره. على سبيل المثال، عنصر <input type="range"> في HTML هو أداة تمرير أساسًا، ولكن يريد المؤلفون أن يبدو مختلفًا.
  • وفي معظم الحالات، يمكن معالجة هذه المشكلة باستخدام CSS. ومع ذلك، بالنسبة إلى range، فإنّ CSS هو أسلوب غير مألوف. يمكن للمؤلفين إنشاء شريط تمرير خاص بهم واستخدام role="slider" مع aria-valuenow لإعلام لوحة المفاتيح بالقيمة الحالية.
• يمكنك تضمين مناطق مباشرة لإعلام تطبيقات قراءة الشاشة بالتغييرات ذات الصلة في منطقة من الصفحة.
• أنشئ معالِم، مثل العناوين. تساعد المعالم مستخدمي قارئ الشاشة في العثور على ما يريدون بشكل أسرع. يمكن أن تحتوي المعالم على منطقة ذات صلة بالكامل. على سبيل المثال، "هذه الحاوية هي المنطقة الرئيسية للصفحة" و"هذه الحاوية أعلى هنا لوحة تنقّل".

لماذا ننصحك باستخدام ARIA؟

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

مثال على شريط القوائم

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

على الرغم من توفّر العنصر <nav>، غالبًا ما يتم إنشاء أشرطة القوائم معًا باستخدام عناصر divs والصور والأزرار ومعالجات النقر ومقبضَي الضغط على المفاتيح وARIA.

إتاحة استخدام الماوس

لنقم بإنشاء شريط قوائم معًا. نعرض مجموعة من العناصر في عناصر مربّعات عامة تُعرف باسم divs. في أي وقت ينقر فيه المستخدم على div، يتم تنفيذ الأمر المقابل. رائع، يعمل هذا الإجراء مع مستخدمي رمز الماوس النقري.

بعد ذلك، نجعلها تبدو جميلة. نستخدم CSS لترتيب العناصر بشكلٍ جميل ووضع خطوط خارجية مصوّرة حولها. ونحرص على أن يبدو مشابهًا بشكل كافٍ لشريط القوائم الأخرى حتى يدرك المستخدمون المبصرون بشكل حدسي أنّه شريط قوائم وكيفية استخدامه. يستخدم شريط القوائم أيضًا لون خلفية مختلفًا لأي عنصر تمرّ عليه مؤشر الماوس، ما يقدّم للمستخدم بعض الملاحظات المرئية المفيدة.

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

ومن الصعب الوصول إلى ذلك تمامًا، كما هي الحال بالنسبة إلى العديد من المواقع الإلكترونية على الويب.

إتاحة لوحة مفاتيح شريط القوائم

لنضيف ميزة تسهيل الاستخدام في لوحة المفاتيح. يتطلّب هذا الإجراء تغييرات HTML فقط وليس ARIA. يُرجى العِلم أنّ ARIA لا يؤثر في الجوانب الأساسية، مثل المظهر أو الماوس أو لوحة المفاتيح للمستخدمين الذين لا يستخدِمون تكنولوجيات مساعِدة.

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

• إذا ضغط المستخدم على مفتاح سهم، لنلقِ نظرة على مخطّطات شريط القوائم الداخلية لدينا ونقتَرِر عنصر القائمة النشط الجديد. سنزيل أي تمييزات حالية و سنتميّز عنصر القائمة الجديد حتى يعرف المستخدم المبصر مكانه بصريًا. بعد ذلك، يجب أن تُطلِق صفحة الويب event.preventDefault() لمنع المتصفّح من تنفيذ الإجراء المعتاد (الانتقال إلى أسفل الصفحة في هذه الحالة).
• إذا ضغط المستخدم على مفتاح Enter، يمكننا التعامل معه تمامًا مثل النقرة، وتنفيذ الإجراء المناسب (أو حتى فتح قائمة أخرى).
• إذا ضغط المستخدم على مفتاح من المفترض أن يؤدي إلى إجراء آخر، أعِد توجيهه إلى الصفحة. على سبيل المثال، لا يحتاج شريط القوائم إلى مفتاح Tab، لذلك يمكنك التخلص منه. من الصعب إجراء ذلك بشكل صحيح. على سبيل المثال، يحتاج شريط القوائم إلى مفاتيح الأسهم، ولكن ليس Alt+السهم أو Command+السهم. هذه اختصارات للانتقال إلى الصفحة السابقة والتالية في سجلّ الويب لعلامة التبويب في المتصفّح. وإذا لم يكن المؤلف حذيفًا، سيبتلع شريط القوائم هذه العناصر. يحدث هذا النوع من الأخطاء كثيرًا، ولم نبدأ مع ARIA بعد!

وصول قارئ الشاشة إلى شريط القوائم

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

هذا ليس عادلاً. يعمل شريط القوائم بشكل جيد للمستخدمين المبصرين.

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

السمة الأولى في ARIA هي سمة aria-activedescendant. اضبط السمة على معرّف عنصر القائمة النشط، مع الحرص على تعديلها عند تغيُّرها. على سبيل المثال، aria-activedescendant="settings-menuitem". يؤدي ذلك إلى أن يتعامل برنامج قراءة الشاشة مع العنصر النشط في ARIA على أنّه العنصر الذي يتم التركيز عليه، ويتم قراءته بصوت عالٍ أو عرضه على جهاز عرض برايل.

باستخدام aria-activedescendant للإشارة من شريط القوائم الذي تم التركيز عليه إلى عنصر قائمة معيّن، يعرف قارئ الشاشة الآن المكان الذي انتقل إليه المستخدم، ولكن لا يعرف أي معلومات أخرى عن العنصر. ما هو هذا العنصر div على أي حال؟ وهنا يأتي دور سمة الدور. نستخدم role="menubar" في العنصر الذي يحتوي على العنصر في كل العناصر، ثم نستخدم role="menu" على مجموعات العناصر، وrole="menuitem" على ... طبل افتتاحي ... عناصر القائمة الفردية.

وماذا لو كان من الممكن أن يؤدي عنصر القائمة إلى قائمة فرعية؟ يجب أن يعرف المستخدم ذلك. بالنسبة للمستخدم المبصر، قد يكون هناك صورة صغيرة لمثلث في نهاية القائمة، لكن قارئ الشاشة لا يعرف كيفية قراءة الصور تلقائيًا، على الأقل في هذه المرحلة. يمكننا إضافة رمز aria-expanded="false" على كل عنصر قائمة قابل للتوسيع للإشارة إلى أنّ هناك عنصرًا يمكن توسيعه، ولكنّه غير موسّع. بالإضافة إلى ذلك، على المؤلف وضع role="none" على مثلث img للإشارة إلى أنّه لأغراض الجمال فقط. ويمنع ذلك قارئ الشاشة من قول أي شيء عن الصورة قد يكون زائداً.

إصلاح أخطاء لوحة المفاتيح

على الرغم من أنّ إمكانية الوصول إلى لوحة المفاتيح هي جزء من HTML الأساسي، من السهل استبدالها. على سبيل المثال:

• يستخدم مربّع اختيار مفتاح المسافة للتبديل، إلا أنّ المؤلف نسي استدعاء preventDefault(). يُستخدَم مفتاح المسافة الآن لتفعيل مربّع الاختيار ونقل الصفحة للأسفل، وهو السلوك التلقائي للمتصفح لمفتاح المسافة.
• يريد مربّع حوار مشروط في ARIA حظر التنقّل عبر علامات التبويب داخله. إذا نسي المؤلف السماح تحديدًا باستخدام Control+Tab لفتح علامة تبويب جديدة أثناء وجوده في مربع الحوار، لن تعمل على النحو المتوقع.
• ينشئ المؤلف قائمة اختيار وينفّذ مفاتيح السهمَين للأعلى والأسفل. ومع ذلك، على المؤلف إضافة تنقّل للصفحة الرئيسية أو النهاية أو الصفحة العلوية أو الصفحة السفلية أو الحرف الأول.

على المؤلفين اتّباع الأنماط المعروفة. يمكنك الاطّلاع على قسم المراجع للحصول على مزيد من المعلومات.

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

تكون أخطاء لوحة المفاتيح دائمًا تقريبًا خطأ في محتوى الويب، وتحديدًا في HTML وJavaScript، وليس في ARIA.

لماذا هناك الكثير من هذه الطلبات؟

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

بعد كل شيء، ما لم يكن المؤلف مستخدمًا متمرسًا في قارئ الشاشة، فسيحدث خطأ في ARIA. في مثال شريط القوائم، قد يظنّ المؤلف أنّه يجب استخدام الدور "خيار" عندما يكون "عنصر قائمة" هو الخيار الصحيح. قد ينسى المستخدمون استخدام aria-expanded أو ضبط aria-activedescendant وإزالته في الأوقات المناسبة، أو قد ينسون توفير شريط قائمة يحتوي على القوائم الأخرى. ماذا عن أعداد عناصر القائمة؟ عادةً ما تعرِض برامج قراءة الشاشة عناصر القائمة مع عبارة مثل "العنصر 3 من 5" حتى يعرف المستخدم موضعه. يتم احتساب ذلك تلقائيًا بشكل عام من قِبل المتصفّح، ولكن في بعض الحالات، وفي بعض مجموعات المتصفّح وقارئ الشاشة، قد يتم احتساب أرقام خاطئة، وسيحتاج المؤلف إلى إلغاء هذه الأرقام باستخدام aria-posinset و aria-setsize.

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

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

ملخّص

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

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

مراجع إضافية

تعمل ممارسات تأليف ARIA في W3C على توثيق الخصائص المهمة للتنقّل باستخدام لوحة المفاتيح لكل مثال، فضلاً عن توفير JavaScript وCSS وARIA مناسبَين. تركّز الأمثلة على ما يناسب الوقت الحالي، ولا تشمل الأجهزة الجوّالة.

ما هي واجهة برمجة التطبيقات Accessibility API؟

واجهة برمجة التطبيقات لإمكانية الوصول هي الطريقة التي يعرف بها قارئ الشاشة أو التكنولوجيا المساعِدة الأخرى ما هو موجود في الصفحة وما يحدث. وتشمل الأمثلة MSAA وIA2 و UIA. تتضمّن واجهة برمجة التطبيقات لإمكانية الاستخدام جزءَين:

• "شجرة" من العناصر التي تمثّل التسلسل الهرمي للحاويات على سبيل المثال، يمكن أن يحتوي المستند على مجموعة من الفقرات. يمكن أن تحتوي الفقرة على نص وصور وروابط وزخارف نصية. يمكن أن يكون لكل عنصر في شجرة العناصر خصائص، مثل الدور (ما أنا؟) واسم أو تصنيف وقيمة أدخلها المستخدم ووصفًا وحالات منطقية، مثل يمكن التركيز عليه أو التركيز عليه أو تحديده أو المطلوب. يمكن أن تلغي ARIA أيًا من هذه السمات.
  • يستخدم تطبيقات قراءة الشاشة الشجرة لمساعدة المستخدمين في التنقّل في وضع التخزين المؤقت الافتراضي، مثل "الانتقال إلى العنوان التالي، يُرجى".
• سلسلة من الأحداث التي تحدث لتصف التغييرات في الشجرة، مثل "التركيز هو الآن هنا". يستخدم قارئ الشاشة الأحداث لإخبار المستخدم بما حدث للتو. عند حدوث تغيير مهم في ترميز HTML أو ARIA، يتم تنشيط حدث لإخبار قارئ الشاشة بحدوث تغيير.

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