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

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

Alice Boxhall

Dave Gash

Meggin Kearney

آريا مخفي

من الأساليب المهمة الأخرى في تحسين تجربة مستخدمي التقنيات المساعدة هي التأكّد من أنّ التقنيات المساعدة لا تتعامل إلا مع الأجزاء ذات الصلة من الصفحة. هناك عدة طرق لضمان عدم تعريض قسم من 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. قارِن بين 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 على "خطأ" لتطبيع عملية قراءة .