استخدام تصنيفات ARIA لإنشاء أوصاف عناصر يمكن الوصول إليها
التصنيفات
يوفر ARIA عدة آليات لإضافة تسميات وأوصاف إلى العناصر. في الواقع، ARIA هو الطريقة الوحيدة لإضافة نص وصف أو مساعدة يمكن الوصول إليها. لنلقي نظرة على الخصائص التي يستخدمها ARIA لإنشاء تسميات يمكن الوصول إليها.
aria-label
تتيح لنا السمة aria-label
تحديد سلسلة لاستخدامها كتصنيف يمكن الوصول إليه.
يؤدي هذا الإجراء إلى إلغاء أي آلية أخرى للتصنيف الأصلي، مثل عنصر label
. على سبيل المثال، إذا تضمّن button
محتوى نصيًا وaria-label
، سيتم استخدام القيمة aria-label
فقط.
يمكنك استخدام السمة aria-label
عندما يكون لديك نوع من المؤشرات المرئية للغرض من العنصر، مثل زر يستخدم رسمًا بدلاً من نص، ولكن تحتاج إلى توضيح ذلك الغرض لأي مستخدم لا يمكنه الوصول إلى المؤشر المرئي، مثل زر يستخدم صورة فقط للإشارة إلى الغرض منه.
aria-labelledby
يتيح لنا aria-labelledby
تحديد معرّف عنصر آخر في DOM كتصنيف عنصر.
يشبه ذلك إلى حدّ كبير استخدام عنصر label
مع بعض الاختلافات الرئيسية.
- يمكن استخدام
aria-labelledby
في أي عنصر، وليس فقط على العناصر القابلة للتصنيف. - مع أنّ العنصر
label
يشير إلى ما يصنّفه، يتم عكس العلاقة في حال السمةaria-labelledby
، لأنّ العنصر المُسمّى يشير إلى ما يصنّفه. - يمكن ربط عنصر تصنيف واحد فقط بعنصر قابل للتصنيف، ولكن
يمكن للدالة
aria-labelledby
أن تأخذ قائمة بمعرّفات IDREF لإنشاء تصنيف من عناصر متعددة. سيتم ربط الملصق بالترتيب الذي يتم تقديمه به. - يمكنك استخدام السمة
aria-labelledby
للإشارة إلى العناصر المخفية التي قد لا تكون في شجرة تسهيل الاستخدام. على سبيل المثال، يمكنك إضافة علامةspan
مخفية بجانب العنصر الذي تريد الإشارة إليه باستخدامaria-labelledby
. - بما أنّ 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-activedescendant
يؤدي "aria-activedescendant
" دورًا مشابهًا. مثلما أن العنصر النشط في الصفحة هو العنصر الذي يتم التركيز عليه، يسمح لنا ضبط العنصر التابع النشط للعنصر بإعلام التكنولوجيا المساعدة بأنه يجب عرض العنصر للمستخدم باعتباره العنصر محل التركيز عندما يكون التركيز الرئيسي عليه. على سبيل المثال، في مربّع القائمة، قد تحتاج إلى ترك تركيز الصفحة على حاوية القائمة
مع إبقاء سمة aria-activedescendant
معدّلة إلى عنصر القائمة المحدّد حاليًا. يؤدي هذا إلى جعل العنصر المحدد حاليًا يبدو للتقنية
المساعدة كما لو كان العنصر محل التركيز.
aria-describedby
توفّر السمة aria-describedby
وصفًا يسهل الوصول إليه بالطريقة نفسها التي
توفِّر بها السمة aria-labelledby
تصنيفًا. مثل aria-labelledby
، قد يشير aria-describedby
إلى عناصر غير مرئية بخلاف ذلك، سواء كانت مخفية عن
نموذج كائن المستند (DOM) أو مخفية عن مستخدمي التكنولوجيا المساعِدة. هذا أسلوب مفيد عندما يكون هناك بعض النصوص التوضيحية
التي قد يحتاجها المستخدم، سواء كان ينطبق فقط على مستخدمي التكنولوجيا المساعدة أو جميع المستخدمين.
من الأمثلة الشائعة حقل إدخال كلمة المرور المصاحب لبعض النصوص الوصفية التي تشرح الحد الأدنى لمتطلبات كلمة المرور. على عكس التسمية، قد يتم تقديم هذا الوصف للمستخدم أو لا يتم عرضه مطلقًا؛ قد يكون لديه خيار الوصول إلى الوصول إليه، أو قد يأتي بعد كل المعلومات الأخرى، أو قد يكون يستبعده شيء آخر. على سبيل المثال، إذا كان المستخدم يُدخل معلومات، سيتم صدى إدخالاته وقد تقاطع وصف العنصر. وبالتالي، يعد الوصف طريقة رائعة لتوصيل معلومات تكميلية ولكنها ليست أساسية؛ فلن يقف عائقًا في طريق المعلومات الأكثر أهمية مثل دور العنصر.
ARia-posinset وaria-setsize
وتختلف سمات العلاقة المتبقية قليلاً وتعمل معًا.
تهدف aria-posinset
("الموضع في المجموعة") وaria-setsize
("حجم المجموعة") إلى تعريف العلاقة بين العناصر التابعة في مجموعة، مثل القائمة.
في حال تعذّر تحديد حجم المجموعة من خلال العناصر المتوفّرة في نموذج العناصر في المستند (DOM)،
كما هو الحال عند استخدام العرض الكسول لتجنُّب إضافة القائمة الكبيرة بالكامل في نموذج العناصر في المستند (DOM) في آنٍ واحد، يمكن لـ aria-setsize
تحديد حجم المجموعة الفعلي،
ويمكن لـ aria-posinset
تحديد موضع العنصر في المجموعة. على سبيل المثال، في مجموعة قد تتضمّن 1000 عنصر، يمكنك القول بأنّ عنصرًا معيّنًا يحتوي على aria-posinset
من 857 مع أنّه يظهر أولاً في DOM، ثم استخدِم أساليب HTML الديناميكية للتأكّد من أنّ المستخدم يمكنه الاطّلاع على القائمة الكاملة عند الطلب.