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

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

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