إمكانية الوصول (Accessibility)

إمكانية الوصول (Accessibility – a11y) معناها إن موقعك يكون سهل الاستخدام لكل الناس، بما فيهم ذوي الاحتياجات الخاصة (ضعاف البصر، المكفوفين، مستخدمي قارئات الشاشة، صعوبات الحركة…).
HTML بيوفر أدوات وعناصر تساعد على ده.

🔹 1. استخدام خاصية alt في الصور

ما هي؟

• خاصية alt (Alternative Text) هي نص بديل يوصف الصورة في حالة:

  • الصورة مش اتحملت.

  • أو لو المستخدم بيستعمل قارئ شاشة.

مثال:

• لو الصورة ما ظهرتش → المستخدم يعرف محتواها.

• مفيد جدًا في SEO لأن جوجل يقرأ النصوص البديلة.

• بيساعد ذوي الاحتياجات الخاصة على فهم محتوى الصورة.

⚠️ ملاحظات:

• لو الصورة مجرد ديكور → خلي alt=”” (نص فارغ).

• لازم يكون النص قصير وواضح.

🔹 2. خصائص ARIA (Accessible Rich Internet Applications)

ما هي؟

• مجموعة خصائص (Attributes) بتبدأ بـ aria-، بتساعد قارئات الشاشة والأدوات المساعدة على فهم العناصر التفاعلية.

• مهمة لما العنصر مش واضح وظيفته للمستخدمين ذوي الاحتياجات الخاصة.

أهم الخصائص:

• aria-label → تسمية بديلة للعنصر.

• aria-hidden=”true” → إخفاء عنصر عن قارئات الشاشة.

• role → تحديد وظيفة العنصر (زر، قائمة، نافذة…).

أمثلة:

✅ زر أيقونة بدون نص:

✅ قائمة تنقل:

✅ عنصر ديكوري (مش محتاج يوصل للمستخدم):

🔹 3. التسميات <label> و for في النماذج

ما هي؟

• وسم <label> بيربط نص توضيحي مع عنصر إدخال (Input).

• المستخدم يقدر يضغط على النص أو المربع نفسه عشان يحدد الاختيار → مفيد جدًا لذوي الاحتياجات الخاصة.

مثال:

🔎 الفائدة:

• قارئات الشاشة هتقرأ النص “البريد الإلكتروني” مع الحقل.

• سهولة في الضغط على النص بدل المربع فقط.

مثال مع Checkbox:

🔹 مثال عملي كامل (Accessibility)

🔹 ملخص

• alt في الصور = وصف بديل + تحسين SEO + مساعدة قارئات الشاشة.

• خصائص ARIA (aria-label, role, aria-hidden) = توضيح الأدوار والعناصر التفاعلية.

• <label> و for = ربط النصوص مع الحقول في النماذج → سهولة + وضوح لذوي الاحتياجات الخاصة.