إخفاء المحتوى عن التكنولوجيا المساعدة
آريا مخفي
وهناك أسلوب آخر مهم في ضبط التجربة للحصول على يتضمن المستخدمون ضمان أن الأجزاء ذات الصلة فقط من الصفحة تتعرض للتكنولوجيا المساعدة. هناك العديد من الطرق للتأكد من أن القسم من DOM بواجهات برمجة التطبيقات المخصّصة لتسهيل الاستخدام.
أولاً، لن يتم تضمين أي شيء مخفي بشكل صريح من DOM
في شجرة إمكانية الوصول. وبالتالي، سيتم أيضًا عرض أي نص له نمط CSS visibility:
hidden
أو display: none
أو سمة HTML5 hidden
مخفية عن مستخدمي التكنولوجيا المساعدة.
ومع ذلك، فإن العنصر الذي لا يتم عرضه مرئيًا وليس مخفيًا بشكل صريح لا تزال مدرجة في شجرة إمكانية الوصول. أحد الأساليب الشائعة هو تضمين "نص قارئ الشاشة فقط" في أي عنصر موضوع في مكانه الأساسي خارج الشاشة.
.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 في إنشاء منطقة مباشرة.](https://web.dev/static/articles/hiding-and-updating-content/image/aria-live-establishes-li-acc61d8956fc7.jpg?authuser=6&hl=ar)
على سبيل المثال، قد تكون المنطقة المباشرة رسالة حالة تظهر نتيجة
إجراء مستخدم. إذا كانت الرسالة مهمة بما يكفي لجذب انتباه
المستخدم، فإنه من المهم بما يكفي لتوجيه انتباه مستخدم التكنولوجيا المساعدة
الانتباه إليه من خلال ضبط سمة 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
لعنصر تابع من true إلى false.
وتساعدك السمات الأخرى التي تعمل مع aria-live
على تحديد ما هو
يتم إبلاغ المستخدم بها عند تغيير المنطقة النشطة.
تشير السمة aria-atomic
إلى ما إذا كان يجب اعتبار المنطقة بأكملها كمنطقة
الكل عند توصيل التحديثات. على سبيل المثال، إذا كانت أداة تاريخ تتكون من
يحتوي اليوم والشهر والسنة على aria-live=true
وaria-atomic=true
، للمستخدم
عنصر تحكم تدريجي لتغيير قيمة الشهر فقط، والمحتوى الكامل
تتم قراءة الأداة الخاصة بالتاريخ مرة أخرى. قد تكون قيمة aria-atomic
true
أو false
(الخيار التلقائي).
تشير السمة aria-relevant
إلى أنواع التغييرات التي يجب عرضها للمستخدم.
هناك بعض الخيارات التي يمكن استخدامها بشكل منفصل أو كقائمة رموز مميّزة.
- الإضافات، ما يعني أنّ أي عنصر تتم إضافته إلى المنطقة الحيّة هو
مهمًا. على سبيل المثال، إلحاق مسافة بسجل حالٍ موجود
الرسائل أنه سيتم الإعلان عن النطاق للمستخدم (بافتراض
أنّ
aria-atomic
كانتfalse
). - text، ما يعني أن المحتوى النصي الذي تتم إضافته إلى أي عقدة تابعة هو
ذات صلة. على سبيل المثال، تعديل السمة
textContent
لحقل نص مخصّص. قراءة النص المعدّل للمستخدم. - عمليات الإزالة، ما يعني أنّ إزالة أي نص أو عُقد تابعة يجب أن يتم نقلها إلى المستخدم.
- all، ما يعني أن جميع التغييرات ذات صلة. ومع ذلك، فإن القيمة الافتراضية
aria-relevant
تساويadditions text
، ما يعني أنّك إذا لم تحدّدaria-relevant
، سيحدّث المستخدم عن أي إضافة إلى العنصر. وهو ما يُحتمل أن تريده.
أخيرًا، يتيح لك "aria-busy
" إرسال إشعار إلى التكنولوجيا المساعِدة لإعلامهم بضرورة توفيره
تجاهل التغييرات التي تطرأ على عنصر مؤقتًا، مثل عند تحميل العناصر. مرة واحدة
كل شيء في مكانه الصحيح، يجب ضبط aria-busy
على "خطأ" لتسوية
تشغيل القارئ.