الدرس 5: إمكانية الوصول — التركيز، لوحة المفاتيح، وARIA
صمّمت `<div>` مع `onClick` يبدو كزر مثالي. لكن مستخدم لوحة المفاتيح لا يستطيع الوصول إليه، وقارئ الشاشة لا يعرف أنه قابل للنقر. يعلّمك هذا الدرس بناء مكوّنات قابلة للوصول في نظام التصميم: عناصر تحكم دلالية، وحلقة تركيز مبنية على توكن، و`aria-label` — إمكانية الوصول كمتطلب، لا كإضافة.
الزر الحقيقي مثل باب له مقبض — أي شخص يفتحه، باليد أو بلوحة المفاتيح. أما `<div>` القابل للنقر فهو جدار مطليّ ليبدو كباب: يبدو صحيحًا، لكن لا يوجد ما تمسك به.
- عنصر تحكم دلالي
- عنصر HTML ذو معنى مدمج — `<button>` و`<a>` و`<input>` — يأتي مع دعم لوحة المفاتيح والتركيز ودور إمكانية وصول مجانًا، دون كود إضافي.
- focus-visible
- حالة تُظهر حلقة التركيز فقط أثناء التنقّل بلوحة المفاتيح، لا عند نقرات الفأرة. في Tailwind: `focus-visible:ring-2` — إشارة واضحة لمستخدمي لوحة المفاتيح دون إزعاج مستخدمي الفأرة.
- aria-label
- سمة تمنح اسمًا قابلًا للوصول لعنصر لا يحتوي نصًّا مرئيًّا — مثل زر يحتوي أيقونة فقط — كي يتمكّن قارئ الشاشة من الإعلان عمّا يفعله.
- قابلية التشغيل بلوحة المفاتيح
- القدرة على استخدام كل عنصر تحكم بلوحة المفاتيح وحدها — Tab للتركيز، Enter/Space للتفعيل — متطلب أساسي في إمكانية الوصول.
