الخلفية غير النشطة وaria-modal

حتى مع حبس التركيز، يظل المحتوى الموجود خلف النافذة المشروطة في DOM. ويمكن لقارئ الشاشة الوصول إليه ما لم تمنعه.

تجعل السمة inert العنصر وجميع عناصره الفرعية غير قابلة للتركيز أو النقر، وتتجاوزها تقنيات المساعدة دفعةً واحدة.

عند فتح النافذة المشروطة، أضف inert إلى كل ما يقع خارجها. عندها لن يتمكن أي شخص من الوصول فعليًا إلى الصفحة الموجودة خلفها.

عند إغلاق النافذة المشروطة، أزل السمة inert لتصبح الصفحة تفاعلية مجددًا. يؤدي نسيان ذلك إلى تجمّد الصفحة.

يجعل dialog الأصلي، عند فتحه باستخدام showModal()، بقية الصفحة غير تفاعلية تلقائيًا، ولذلك تحصل على هذه الحماية من دون رمز إضافي.

إن إضافة aria-modal وتعيينها إلى true تخبر تقنيات المساعدة بأن المحتوى خارج مربع الحوار هذا غير متاح أثناء فتحه.

انتبه: تقتصر aria-modal على إبلاغ قارئ الشاشة. فهي لا تمنع التركيز أو النقر فعليًا، لذلك لا تزال بحاجة إلى inert.

يجمع النمط المتين بين inert على الخلفية وaria-modal على مربع الحوار. تفرض الأولى الحد، بينما تعلن الثانية عنه.

قبل أن تحظى inert بدعم واسع، كان المطورون يضعون aria-hidden على الخلفية. كانت تخفي المحتوى عن القارئات، لكنها لم تمنع التركيز باستخدام لوحة المفاتيح.

من الأخطاء الشائعة تطبيق aria-hidden على نطاق واسع بحيث يشمل مربع الحوار أيضًا. تأكد من بقاء modal خارج المنطقة المخفية.

افتح accessibility tree في المتصفح أثناء ظهور النافذة المشروطة. تأكد من اختفاء الصفحة الموجودة خلفها من الشجرة وبقاء مربع الحوار وحده. ✅

أضفت aria-modal=true لكنك تخطيت inert. ما المشكلة التي لا تزال قائمة؟

لقد تعلمت جعل الصفحة الموجودة خلف النافذة inert والإعلان عن aria-modal، حتى تصبح النافذة المشروطة الشيء الوحيد الذي يمكن للمستخدمين الوصول إليه فعليًا. 🎯