إخفاء المحتوى عن التكنولوجيا المساعدة
aria-hidden
هناك أسلوب آخر مهم لضبط تجربة مستخدمي التكنولوجيا المساعدة يتضمن ضمان أن يتم تعريض الأجزاء ذات الصلة من الصفحة فقط للتكنولوجيا المساعدة. هناك عدة طرق لضمان عدم تعرّض قسم من DOM لواجهات برمجة تطبيقات إمكانية الوصول.
أولاً، لن يتم تضمين أي عنصر مخفي صراحةً من DOM في شجرة تسهيل الاستخدام. وبالتالي، سيتم أيضًا إخفاء أي محتوى يتضمّن نمط CSS visibility:
hidden
أو display: none
أو يستخدم سمة hidden
HTML5
من مستخدمي التكنولوجيا المساعِدة.
ومع ذلك، لا يزال العنصر الذي لا يتم عرضه مرئيًا وليس مخفيًا بشكل صريح مضمَّنًا في شجرة تسهيل الاستخدام. أحد الأساليب الشائعة هو تضمين "نص قارئ الشاشة فقط" في عنصر موضع مطلق خارج الشاشة.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
لاحظنا أيضًا أنّه يمكن تقديم نص لقارئ الشاشة فقط من خلال السمة aria-label
أو aria-labelledby
أو aria-describedby
التي تشير إلى عنصر مخفي.
راجع مقالة WebAIM هذه حول أساليب إخفاء النص للحصول على مزيد من المعلومات حول إنشاء نص "قارئ الشاشة فقط".
أخيرًا، توفّر ARIA آلية لاستبعاد المحتوى من التكنولوجيا المساعِدة غير المخفية بصريًا باستخدام السمة aria-hidden
.
يؤدي تطبيق هذه السمة على عنصر إلى إزالته وجميع عناصره التابعة من شجرة تسهيل الاستخدام. الاستثناءات الوحيدة هي العناصر
المُشار إليها بالسمة aria-labelledby
أو aria-describedby
.
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
على سبيل المثال، يمكنك استخدام aria-hidden
إذا كنت تنشئ واجهة مستخدم مشروطة
تحظر الوصول إلى الصفحة الرئيسية. في هذه الحالة، قد يرى المستخدم المبصر نوعًا من التراكب شبه الشفاف الذي يشير إلى أن معظم الصفحة لا يمكن استخدامها حاليًا، ولكن قد يظل بإمكان مستخدم قارئ الشاشة استكشاف الأجزاء الأخرى
من الصفحة. في هذه الحالة، بالإضافة إلى إنشاء فخ لوحة المفاتيح موضَّحًا سابقًا،
تحتاج إلى التأكد من أن أجزاء الصفحة التي تقع خارج النطاق حاليًا
هي aria-hidden
أيضًا.
الآن بعد أن فهمت أساسيات ARIA، وكيف يتصرف مع دلالات HTML الأصلية، وكيف يمكن استخدامها لإجراء عمليات جراحية كبيرة إلى حد ما على شجرة إمكانية الوصول بالإضافة إلى تغيير دلالات عنصر واحد، لنلقِ نظرة على كيفية استخدامه لنقل المعلومات الحساسة للوقت.
aria-live
تتيح السمة aria-live
للمطوّرين وضع علامة "منشورة" على جزء من الصفحة، بمعنى أنّه يجب إعلام المستخدمين بالتحديثات على الفور بغض النظر عن موضع الصفحة، بدلاً من استكشاف ذلك الجزء من الصفحة فقط. عندما يتضمّن عنصر ما السمة aria-live
، يُعرف الجزء الذي يحتوي عليه وعناصر تابعة له بالمنطقة المباشرة.
على سبيل المثال، قد تكون المنطقة المباشرة هي رسالة حالة تظهر كنتيجة لإجراء مستخدم. إذا كانت الرسالة مهمة بما يكفي لجذب انتباه المستخدم المبصر، من المهم جدًا توجيه انتباه مستخدم التكنولوجيا المساعِدة إليها من خلال ضبط سمة aria-live
الخاصة بها. مقارنة div
العادي
<div class="status">Your message has been sent.</div>
بنظيرتها "المباشرة".
<div class="status" aria-live="polite">Your message has been sent.</div>
تتضمّن السمة aria-live
ثلاث قيم مسموح بها، وهي polite
وassertive
وoff
.
- يخبر
aria-live="polite"
التكنولوجيا المساعدة لتنبيه المستخدم بهذا التغيير عند الانتهاء من كل ما يفعله حاليًا. من الرائع استخدام المحتوى إذا كان المحتوى مهمًّا وليس عاجلاً، ويمثّل معظم استخدامaria-live
. - يطلب
aria-live="assertive"
من التكنولوجيا المساعِدة إيقاف كل ما تفعله وتنبيه المستخدم بهذا التغيير على الفور. هذا الإجراء مخصّص فقط للتحديثات المهمّة والعاجلة، مثل رسالة الحالة مثل "حدث خطأ في الخادم ولم يتم حفظ التغييرات التي أجريتها. يُرجى إعادة تحميل الصفحة"، أو إجراء تعديلات على حقل إدخال كنتيجة مباشرة لإجراء من جانب المستخدم، مثل الأزرار على تطبيق مصغّر للدرج. - يطلب
aria-live="off"
من التكنولوجيا المساعِدة تعليقaria-live
انقطاعات مؤقتًا.
يمكنك اتّباع بعض النصائح للتأكّد من أنّ المناطق المباشرة تعمل بشكل صحيح.
أولاً، من المحتمل أن تكون منطقة aria-live
مضبوطة على التحميل الأولي للصفحة.
هذه القاعدة ليست واضحة وسريعة، ولكن إذا كنت تواجه صعوبة في التعامل مع منطقة aria-live
، قد تكون هذه هي المشكلة.
ثانيًا، تتفاعل قارئات الشاشة المختلفة بشكل مختلف مع أنواع
مختلفة من التغييرات. على سبيل المثال، يمكن تشغيل تنبيه في بعض برامج قراءة الشاشة
من خلال تبديل نمط hidden
للعنصر التابع من صحيح إلى خطأ.
أما السمات الأخرى التي تتوافق مع aria-live
، فتساعدك في تحسين ما يتم إرساله إلى المستخدم عند تغيير المنطقة المباشرة.
تشير السمة aria-atomic
إلى ما إذا كان يجب اعتبار المنطقة بأكملها عند الإعلام بالتحديثات. على سبيل المثال، إذا كانت أداة التاريخ التي تتألّف من يوم وشهر وسنة تحتوي على aria-live=true
وaria-atomic=true
، وكان المستخدم يستخدم عنصر تحكّم في الخطوات لتغيير قيمة الشهر فقط، ستتم قراءة المحتوى الكامل لأداة التاريخ مرة أخرى. قد تكون قيمة aria-atomic
true
أو false
(القيمة التلقائية).
تشير السمة aria-relevant
إلى أنواع التغييرات التي يجب تقديمها للمستخدم.
وهناك بعض الخيارات التي يمكن استخدامها بشكل منفصل أو كقائمة رموز مميزة.
- الإضافات، ما يعني أنّ أي عنصر تتم إضافته إلى المنطقة المباشرة يكون مهمًا. على سبيل المثال، يعني إلحاق مدى بسجل حالي لرسائل الحالة أنه سيتم الإعلان عن النطاق للمستخدم (بافتراض أن
aria-atomic
كانfalse
). - text، ما يعني أنّ المحتوى النصي الذي تتم إضافته إلى أي عقدة تابعة ذي صلة. على سبيل المثال، سيؤدي تعديل السمة
textContent
لحقل نص مخصّص إلى قراءة النص المعدّل للمستخدم. - عمليات الإزالة، ما يعني أنّه يجب إعلام المستخدم بإزالة أي نص أو عُقد تابعة.
- الكل، ما يعني أنّ جميع التغييرات ذات صلة بالموضوع. في المقابل، إنّ القيمة التلقائية للسمة
aria-relevant
هيadditions text
، ما يعني أنّه في حال عدم تحديد قيمة السمةaria-relevant
، ستُجري هذه القيمة تعديلاً على المستخدم لإضافة أي إضافة إلى العنصر.
أخيرًا، يتيح لك aria-busy
إشعار التكنولوجيا المساعِدة بضرورة
تجاهل التغييرات التي تطرأ على عنصر ما مؤقتًا، مثل تحميل المحتوى. بعد وضع كل شيء في مكانه الصحيح، يجب ضبط aria-busy
على "خطأ" لتسوية
عملية القارئ.