ما هو
تستخدم العديد من الأزرار على المواقع الحديثة أيقونة فقط بدون نص مرئي — عدسة مكبرة للبحث، أيقونة همبرغر للقائمة، X لإغلاق نافذة منبثقة. يتعرف الزائر المبصر على هذه الأيقونات فورًا من الألفة والسياق، لكن قارئ الشاشة ليس لديه ما يقرأه بصوت عالٍ ما لم يكن للزر أيضًا نص يمكن الوصول إليه مرفق خلف الكواليس، عادة عبر سمة aria-label (على سبيل المثال، aria-label="بحث") لا تُعرض بصريًا لكن تُعلن لقارئ شاشة.
بدون ذلك، يعلن قارئ الشاشة ببساطة كلمة "زر" العامة بدون أي معلومات إضافية، دون إعطاء أي إشارة لما سيفعله الضغط عليه فعليًا.
لماذا يهم
أيقونة واضحة بصريًا لشخص مبصر لا تحمل أي معلومات بحد ذاتها لشخص لا يستطيع رؤيتها — الأيقونة نفسها ليست ذات معنى جوهري بدون البصر، فقط المفهوم الذي تمثله كذلك، ويجب توصيل ذلك المفهوم بطريقة أخرى لمستخدم قارئ الشاشة. صفحة مليئة بأزرار أيقونات فقط، كل واحد منها معلن فقط كـ "زر، زر، زر"، تترك مستخدم قارئ الشاشة بلا طريقة لمعرفة ما يفعله أي منها دون التخمين والضغط عليها لمعرفة ذلك.
هذه مشكلة واسعة الانتشار ويسهل تفويتها تحديدًا لأن الأزرار ذات الأيقونات فقط نمط تصميم شائع ونظيف بصريًا — تصبح فجوة إمكانية الوصول واضحة فقط عند الاختبار فعليًا بقارئ شاشة بدلاً من مجرد النظر إلى الصفحة.
كيفية الإصلاح
- حدد كل زر في موقعك يستخدم أيقونة فقط بدون تصنيف نصي مرئي.
- أضف سمة
aria-labelتصف إجراء الزر في كلمات قليلة، مثلaria-label="إغلاق القائمة"أوaria-label="بحث". - حيثما أمكن، فكّر في إضافة تصنيف نصي مرئي قصير بجانب الأيقونة بدلاً من ذلك — يساعد هذا الزوار المبصرين أيضًا ويقلل الاعتماد على تذكّر معاني الأيقونات.
- إذا كنت تستخدم أداة بناء مواقع، تحقق مما إذا كانت أزرار الأيقونات التي تولّدها المنصة تتضمن بالفعل تصنيفات يمكن الوصول إليها افتراضيًا — بعضها كذلك، وبعضها يتطلب منك ملء حقل "الاسم الذي يمكن الوصول إليه" أو "نص قارئ الشاشة" يدويًا.
- اختبر بقارئ شاشة مجاني (NVDA، VoiceOver) بالانتقال بالتاب إلى كل زر أيقونة والتأكد من أنه يعلن إجراءً واضحًا ومحددًا بدلاً من "زر" فقط.