مقدّمة عن ARIA

مقدّمة عن ARIA ودلالات HTML غير الأصلية

Alice Boxhall

Dave Gash

Meggin Kearney

حتى الآن، شجعنا على استخدام عناصر HTML الأصلية لأنها تمنحك التركيز، ودعم لوحة المفاتيح، والدلالات الدلالية المضمنة، ولكن هناك أوقات عندما تكون وظيفة HTML وHTML الأصلي لن تؤدي هذه المهمة. على سبيل المثال، حاليًا لا توجد عنصر HTML قياسي لبنية شائعة جدًا لواجهة المستخدم، وهي القائمة المنبثقة. نور هل يتوفر عنصر HTML يوفر خاصية دلالية مثل " يجب أن يعرف المستخدم هذا في أقرب وقت ممكن".

سوف نستكشف في هذا الدرس طريقة التعبير عن الدلالات التي لا يمكن لـ HTML تعبر عنه من تلقاء نفسها.

تطبيقات الإنترنت التفاعلية المتقدّمة التي يمكن الوصول إليها ضمن "مبادرة إمكانية الوصول إلى الويب" بمواصفات (WAI-ARIA، أو فقط ARIA) وهو جيد لربط المناطق التي تتضمن مشاكل في إمكانية الوصول لا يمكن إدارتها باستخدام HTML أصلي وهي تعمل من خلال السماح لك بتحديد السمات التي تعدّل الطريقة التي يتم بها ترجمة عنصر إلى شجرة إمكانية الوصول. لنلقِ نظرة على مثال.

في المقتطف التالي، نستخدم عنصر قائمة كنوع من مربّعات الاختيار المخصّصة. تشير رسالة الأشكال البيانية "مربّع اختيار" في CSS الفئة تعطي العنصر الخصائص المرئية المطلوبة.

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

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

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

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

يعمل ARIA من خلال تغيير وزيادة شجرة تسهيل الاستخدام العادية في نموذج العناصر في المستند (DOM).

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

من المهم أن تفهم أنه ليس هناك حاجة إلى إعادة تحديد الإعداد التلقائي الدلالة. بغض النظر عن استخدامه، تنسيق HTML عادي <input type="checkbox"> لا يحتاج العنصر إلى سمة ARIA إضافية من النوع role="checkbox" بشكل صحيح.

تجدر الإشارة أيضًا إلى أنّ بعض عناصر HTML تفرض قيودًا على أنواع ARIA والأدوار والسمات عليها. على سبيل المثال، قد لا يتم تطبيق أي دور أو سمة إضافية على عنصر <input type="text"> عادي.

يُرجى الاطّلاع على ARIA في مواصفات HTML لمزيد من المعلومات.

لنلقِ نظرة على الإمكانات الأخرى التي يقدّمها ARIA.

ما الذي يمكن لـ ARIA فعله؟

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

• على سبيل المثال، يمكن لـ ARIA إضافة تصنيف إضافي ونص وصفي إلى واجهات برمجة التطبيقات للتكنولوجيا المساعدة.
  

<button aria-label="screen reader only label"></button>

• يمكن لـ ARIA التعبير عن العلاقات الدلالية بين العناصر التي تعمل على توسيع اتصال قياسي رئيسي/تابع، مثل شريط تمرير مخصص يتحكم في لمنطقة معينة.

    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>

• ويمكن لـ ARIA أن يجعل أجزاء من الصفحة "منشورة" لذلك يبلغون على الفور التكنولوجيا المساعدة عندما تتغير.

    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

وأحد الجوانب الأساسية لنظام ARIA هو مجموعة الأدوار فيه. دور في مصطلحات تسهيل الاستخدام، فهي تشكّل مؤشرًا مختصرًا لواجهة مستخدم معيّنة النمط. يوفّر ARIA مفردات من الأنماط التي يمكننا استخدامها من خلال role على أي عنصر HTML.

عندما طبقنا role="checkbox" في المثال السابق، كنا نخبر تقنية مساعدة على أن يتبع العنصر "مربع الاختيار" النمط. الذي نحن نضمن أنّه سيتم وضع علامة عليه (سواء تم وضع علامة عليه أم لا) محدد)، ومن أنه يمكن تبديل الحالة باستخدام الماوس أو مفتاح المسافة، تمامًا مثل عنصر مربع اختيار HTML القياسي.

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

تصف مواصفات ARIA تصنيف القيم المحتملة للسمة role وARIA المرتبط بها التي يمكن استخدامها مع هذه الأدوار. هذا هو الأفضل مصدر معلومات نهائية حول آلية عمل أدوار وسمات ARIA معًا وكيف يمكن استخدامها بطريقة تتوافق مع المتصفحات التكنولوجيا المساعدة.

ومع ذلك، فإن المواصفات كثيفة للغاية؛ في البداية، يسهل فهم ARIA؟ مستند ممارسات التأليف الذي يستكشف أفضل الممارسات لاستخدام أدوار ARIA المتاحة المواقع.

يوفر ARIA أيضًا أدوارًا معالم تعمل على توسيع الخيارات المتاحة في HTML5. عرض تصميم الأدوار المهمة الأنماط المواصفات لمزيد من المعلومات.