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 قبل إرسال شجرة العناصر أو الأحداث إلى قارئ الشاشة.