الهدف
بعد هالدرس تقدر تضيف semantic HTML صح، ARIA labels للعناصر التفاعلية، وتختبر التطبيق بالكيبورد بس — وتحصّل Lighthouse accessibility score 90+.
ليش هذا الحين؟
الـ iteration sprint خلص. الحين نتأكد إن التطبيق يشتغل للجميع. ترى 15% من المستخدمين في العالم عندهم احتياجات خاصة — بصرية، حركية، سمعية. وهذا مو بس موضوع أخلاق — هذا قانون في وايد دول. والـ accessibility improvements تحسّن تجربة كل المستخدمين، مو بس اللي يحتاجونها.
الفكرة
4 مبادئ WCAG (POUR):
| المبدأ | معناه |
|---|---|
| Perceivable | المحتوى واضح لكل الحواس (بصري، صوتي) |
| Operable | يشتغل بالكيبورد و screen reader |
| Understandable | نص واضح وسلوك متوقع |
| Robust | يشتغل مع assistive technologies |
الـ Semantic HTML:
// ✗ بدون semantic
<div onClick={handleSubmit}>إرسال</div>
// ✓ مع semantic
<button onClick={handleSubmit}>إرسال</button>
<button> يجيب تلقائيا:
- Keyboard focus و activation بـ Enter/Space
- Screen reader announcement ("إرسال، button")
- Focus indicator افتراضي
Focus Management:
كل element تفاعلي يحتاج:
tabindexطبيعي (لا تعطّله)- Focus indicator واضح (
outline: none= ممنوع)