أزرار توضّح ما تفعله

لا يكون الزر مفيدًا إلا إذا عرف المستخدمون وظيفته. واسمه المتاح هو ما يقرؤه قارئ الشاشة بصوت عالٍ قبل ضغطه.

في الزر العادي، يكون النص الظاهر داخله هو الاسم المتاح. فالكلمات الواضحة تعني إعلانًا واضحًا.

سمِّ الزر بالإجراء الذي ينفذه، مثل حفظ أو حذف أو إضافة إلى السلة. فالفعل يوضح للمستخدمين بالضبط ما سيحدث.

تكون تسميات مثل موافق أو إرسال أو انتقال مبهمة عندما تشترك فيها أزرار عدة. سمِّ الإجراء المحدد حتى يكون كل زر مفهومًا بمفرده.

لا يملك زر أيقونة بلا نص اسمًا متاحًا. وقد يقول قارئ الشاشة «زر» فقط، تاركًا المستخدم يحاول التخمين. 🤔

امنح الزر الخالي من الكلمات اسمًا باستخدام aria-label. ستظل الأيقونة ظاهرة، لكن التقنيات المساعدة ستعلن وظيفتها.

عندما تسمّي التسمية الإجراء بالفعل، اجعل الأيقونة الداخلية aria-hidden حتى لا تُقرأ كضوضاء إضافية.

يجب أن يعلن زر التبديل حالته. استخدم aria-pressed حتى تقول قارئات الشاشة ما إذا كان مفعّلًا أم متوقفًا.

يجب أن يتضمن الزر الذي يعرض لوحة أو يخفيها aria-expanded، حتى يعرف المستخدمون ما إذا كانت مفتوحة أم مطوية.

تكون التسمية الجيدة قصيرة لكنها صادقة. فهي تعد بما ينفذه ضغط الزر بالضبط، من دون مفاجآت بعد النقر.

إذا كان لدى الزر نص ظاهر، فأبقِ كلماته ضمن اسمه المتاح حتى يتمكن مستخدمو التحكم الصوتي من نطق التسمية التي يرونها.

يعرض زر إغلاق يقتصر على أيقونة علامة X. كيف تمنحه اسمًا متاحًا؟

سمِّ كل زر بالإجراء الذي ينفذه، وامنح الأزرار التي تقتصر على أيقونات تسميات، وأعلن الحالة باستخدام سمات aria. والآن يعرف المستخدمون دائمًا ما تفعله الأزرار. 👍