إخفاء المحتوى وتعديله

إخفاء المحتوى عن التكنولوجيا المساعدة

أليس بوكسهول

ديف غاش

ميجين كيرني

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 على "خطأ" لتسوية عملية القارئ.