مقدّمة عن ARIA

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

Alice Boxhall

Dave Gash

Meggin Kearney

حتى الآن، شجعنا على استخدام عناصر 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"> العادي إلى سمة role="checkbox" ARIA إضافية للإعلان عنه بشكل صحيح.

يُرجى العِلم أيضًا أنّ بعض عناصر 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. راجع مواصفات أنماط تصميم أدوار المعلم للحصول على مزيد من المعلومات.