تصنيفات ARIA والعلاقات

استخدام تصنيفات ARIA لإنشاء أوصاف عناصر يمكن الوصول إليها

أليس بوكسهول
أليس بوكسهول
ديف غاش
ديف غاش
ميجين كيرني
ميجين كيرني

التصنيفات

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

aria-label

تتيح لنا السمة aria-label تحديد سلسلة لاستخدامها كتصنيف يمكن الوصول إليه. يؤدي هذا الإجراء إلى إلغاء أي آلية أخرى للتصنيف الأصلي، مثل عنصر label. على سبيل المثال، إذا تضمّن button محتوى نصيًا وaria-label، سيتم استخدام القيمة aria-label فقط.

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

استخدام تصنيف aria لتحديد زر صورة فقط

aria-labelledby

يتيح لنا aria-labelledby تحديد معرّف عنصر آخر في DOM كتصنيف عنصر.

استخدام aria-labelledby لتحديد مجموعة راديو.

يشبه ذلك إلى حدّ كبير استخدام عنصر label مع بعض الاختلافات الرئيسية.

  1. يمكن استخدام aria-labelledby في أي عنصر، وليس فقط على العناصر القابلة للتصنيف.
  2. مع أنّ العنصر label يشير إلى ما يصنّفه، يتم عكس العلاقة في حال السمة aria-labelledby، لأنّ العنصر المُسمّى يشير إلى ما يصنّفه.
  3. يمكن ربط عنصر تصنيف واحد فقط بعنصر قابل للتصنيف، ولكن يمكن للدالة aria-labelledby أن تأخذ قائمة بمعرّفات IDREF لإنشاء تصنيف من عناصر متعددة. سيتم ربط الملصق بالترتيب الذي يتم تقديمه به.
  4. يمكنك استخدام السمة aria-labelledby للإشارة إلى العناصر المخفية التي قد لا تكون في شجرة تسهيل الاستخدام. على سبيل المثال، يمكنك إضافة علامة span مخفية بجانب العنصر الذي تريد الإشارة إليه باستخدام aria-labelledby.
  5. بما أنّ ARIA لا تؤثر سوى في شجرة تسهيل الاستخدام، لا تمنحك السمة aria-labelledby سلوك النقر على التصنيفات المألوف الذي تحصل عليه عند استخدام العنصر label.

والأهم من ذلك أنّ aria-labelledby تلغي جميع مصادر الأسماء الأخرى للعنصر. على سبيل المثال، إذا كان أحد العناصر يتضمّن aria-labelledby وaria-label أو aria-labelledby ورمز HTML أصلي label، تكون الأولوية دائمًا للتصنيف aria-labelledby.

الحالة الاجتماعية

aria-labelledby هو مثال على سمة العلاقة. تنشئ سمة العلاقة علاقة دلالية بين العناصر على الصفحة بغضّ النظر عن علاقة نموذج العناصر في المستند (DOM). في حالة aria-labelledby، تكون هذه العلاقة هي "يتم تسمية هذا العنصر بواسطة ذلك العنصر".

تسرد مواصفات ARIA ثماني سمات للعلاقة. وستُدرج ستة من هذه العناصر، وهي aria-activedescendant، وaria-controls، وaria-describedby، وaria-labelledby، وaria-owns، مرجعًا لعنصر واحد أو أكثر لإنشاء رابط جديد بين العناصر على الصفحة. الفرق في كل حالة هو ما يعنيه هذا الرابط وكيفية تقديمه للمستخدمين.

aria-owns

aria-owns هي إحدى علاقات ARIA الأكثر استخدامًا على نطاق واسع. تتيح لنا هذه السمة إعلام التكنولوجيا المساعدة بأنّ العنصر المنفصل في نموذج كائن المستند (DOM) يجب التعامل معه باعتباره عنصرًا ثانويًا للعنصر الحالي، أو لإعادة ترتيب العناصر الفرعية الموجودة بترتيب مختلف. على سبيل المثال، إذا كانت القائمة الفرعية المنبثقة موضوعة بشكل مرئي بالقرب من قائمتها الرئيسية، ولكن لا يمكن أن تكون عنصر DOM ثانويًا للعنصر الرئيسي لأنّ ذلك سيؤثر في العرض المرئي، يمكنك استخدام aria-owns لعرض القائمة الفرعية كفرع للقائمة الرئيسية لقارئ الشاشة.

استخدام aria-owns لتأسيس علاقة بين القائمة وقائمة فرعية.

aria-activedescendant

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

استخدام aria-activedescend لإنشاء علاقة في مربع قائمة.

aria-describedby

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

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

استخدام aria-describedby لتأسيس علاقة مع حقل كلمة المرور.

ARia-posinset وaria-setsize

وتختلف سمات العلاقة المتبقية قليلاً وتعمل معًا. تهدف aria-posinset ("الموضع في المجموعة") وaria-setsize ("حجم المجموعة") إلى تعريف العلاقة بين العناصر التابعة في مجموعة، مثل القائمة.

في حال تعذّر تحديد حجم المجموعة من خلال العناصر المتوفّرة في نموذج العناصر في المستند (DOM)، كما هو الحال عند استخدام العرض الكسول لتجنُّب إضافة القائمة الكبيرة بالكامل في نموذج العناصر في المستند (DOM) في آنٍ واحد، يمكن لـ aria-setsize تحديد حجم المجموعة الفعلي، ويمكن لـ aria-posinset تحديد موضع العنصر في المجموعة. على سبيل المثال، في مجموعة قد تتضمّن 1000 عنصر، يمكنك القول بأنّ عنصرًا معيّنًا يحتوي على aria-posinset من 857 مع أنّه يظهر أولاً في DOM، ثم استخدِم أساليب HTML الديناميكية للتأكّد من أنّ المستخدم يمكنه الاطّلاع على القائمة الكاملة عند الطلب.

استخدام aria-posinset وaria-setsize لإنشاء علاقة في القائمة.