# يجب أن يكون للأزرار نص واضح

<https://www.fixreports.com/ar/issues/button-name>

WCAG ⁨4.1.2 Name, Role, Value⁩ · المستوى ⁨A⁩

بعض الأزرار ليس لها اسم قابل للوصول، فلا يسمع مستخدمو قارئات الشاشة سوى «زر».

## ما الذي تفحصه هذه القاعدة
يتحقق من أن للأزرار نصًا واضحًا.

## لماذا يهم ذلك
يتطلب معيار WCAG 4.1.2 أن يكون لكل عنصر تحكم اسم. ومن الأزرار التي تفتقر غالبًا إلى اسم: أزرار زيادة الكمية وإنقاصها، وأزرار الإغلاق، وأسهم شرائح العرض.

## كيف تصلحها
### في أي موقع
1. حدّد الأزرار التي لا تحمل اسمًا، وهي عادةً أزرار لا تعرض سوى أيقونة.
2. أضف نصًا مرئيًا، أو نصًا مخفيًا بصريًا، أو سمة aria-label تصف وظيفة الزر (مثل ⁨aria-label="Close"⁩ أو ⁨aria-label="Increase quantity"⁩).

### في Shopify
1. حدّد الأزرار التي لا تحمل اسمًا، وهي عادةً أزرار لا تعرض سوى أيقونة.
2. أضف نصًا مرئيًا، أو نصًا مخفيًا بصريًا، أو سمة aria-label تصف وظيفة الزر (مثل ⁨aria-label="Close"⁩ أو ⁨aria-label="Increase quantity"⁩).

### في WooCommerce وWordPress
1. حدّد الأزرار التي لا تحمل اسمًا، وهي عادةً أزرار لا تعرض سوى أيقونة.
2. أضف نصًا مرئيًا، أو نصًا مخفيًا بصريًا، أو سمة aria-label تصف وظيفة الزر (مثل ⁨aria-label="Close"⁩ أو ⁨aria-label="Increase quantity"⁩).

## كيف تتحقق من الإصلاح
- أعد فحص الصفحات المتأثرة.
- افحص الأزرار باستخدام قارئ شاشة.

## المصادر
- وثائق قاعدة axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/button-name
- فهم WCAG 4.1.2 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/name-role-value