الدرس 4 من 8
إتاحة تُستخدم
- 15 دقيقة
- 5 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
الواجهة لمن لا يرى الشاشة
01
الشرح
من أكثر دروس المنصّة أثرًا. ملايين يستعملون الويب بقارئ شاشة أو بلوحة مفاتيح وحدها، وأربعة أشياء تكفي لتفتح لهم واجهتك.
ربط التسمية: <label for="x"> مع <input id="x"> — يقرأ القارئ التسمية، ويكبر مساحة الضغط للجميع.
اسم لكل زر: زر فيه أيقونة فقط يُقرأ «زر» بلا معنى. aria-label يعطيه اسمًا.
صورة زخرفية: alt="" يخبر القارئ أن يتجاهلها. حذف alt كليًّا يجعله يقرأ اسم الملف.
أثر تركيز ظاهر: من يتنقّل بـ Tab لا بد أن يرى أين هو.
02
المطلوب
طبّق الأربعة على النموذج أدناه.
معايير التصحيح
5 معايير- التسمية مرتبطة بالحقل عبر for/id
- المتصفح نفسه يرى للحقل تسمية
- للزر اسم مقروء رغم أنه رمز
- الصورة الزخرفية لها alt فارغة لا محذوفة
- أثر التركيز معرَّف بـ :focus-visible