التنقل بلوحة المفاتيح أولًا
من يعتمد على لوحة المفاتيح
يعتمد على لوحة المفاتيح مستخدمو قارئات الشاشة، ومن لديهم إعاقات حركية، ومستخدمو أجهزة التبديل، والمستخدمون المحترفون. وكثير من التقنيات المساعدة تتصرف كلوحة مفاتيح، فما يعمل بها يعمل غالبًا معها.
تنص WCAG 2.1.1 (لوحة المفاتيح، المستوى A) على أن كل الوظائف يجب أن تكون متاحة بلوحة المفاتيح. ويتحدد هذا مبكرًا في التصميم، فالقائمة التي لا تظهر إلا بالتحويم أو عنصر التحكم الذي يعمل بالسحب فقط لا يصلحهما الكود وحده.
القواعد الأساسية
لا فخاخ للوحة المفاتيح
WCAG 2.1.2: إذا استطاع التركيز دخول مكوّن فيجب أن يستطيع الخروج منه بلوحة المفاتيح.
ترتيب منطقي
WCAG 2.4.3: يجب أن يتبع ترتيب التركيز معنى الصفحة وترتيبها المرئي.
روابط التخطي
WCAG 2.4.1: امنح المستخدم طريقة لتجاوز الكتل المتكررة كالترويسة والقائمة.
إذا اختلف التخطيط المرئي عن ترتيب DOM فسيقفز مستخدم لوحة المفاتيح في الصفحة بشكل غير متوقع.
النوافذ والقوائم
النوافذ المنبثقة هي أكثر ما يفشل فيه تصميم لوحة المفاتيح. حدّد السلوك كاملًا في التصميم لا شكله فقط.
- عند فتح النافذة انقل التركيز إليها، عادةً إلى أول عنصر أو إلى العنوان.
- أبقِ Tab داخل النافذة الحوارية المعتمة ما دامت مفتوحة.
- اجعل Esc تغلق النافذة.
- عند الإغلاق أعد التركيز إلى الزر الذي فتحها.
العناصر الأصلية أولًا، والمخصصة بحذر
تأتي العناصر الأصلية مثل <code>;button<;/code>; و<code>;a<;/code>; و<code>;input<;/code>; و<code>;select<;/code>; بسلوك لوحة المفاتيح وأدوارها جاهزة. أما <code>;div<;/code>; المنسّق كزر فلا.
- استخدم العنصر الأصلي كلما ناسب الغرض.
- للمكوّنات المخصصة كالتبويبات والقوائم، اتبع المفاتيح والأدوار في دليل WAI-ARIA Authoring Practices.
- اختبر التصميم النهائي بإبعاد الفأرة وإنجاز المهمة الأساسية.
اختبار بسيط يكشف معظم المشكلات. افتح الصفحة وابتعد عن الفأرة واستخدم لوحة المفاتيح فقط. ينقل Tab للأمام، وShift+Tab للخلف، ويفعّل Enter الروابط والأزرار، ويفعّل Space الأزرار وخانات التحديد.
- اضغط Tab مرة من أعلى الصفحة. هل يظهر رابط للتخطي؟
- تابع عبر الصفحة. هل يتبع التركيز ترتيب القراءة؟
- افتح كل قائمة ومجموعة تبويبات ونافذة ثم أغلقها بلوحة المفاتيح.
- أنجز المهمة الرئيسية، كالتسجيل أو الشراء، دون الفأرة.
أي عنصر لا يظهر إلا بالتحويم يحتاج مكافئًا للوحة المفاتيح، كأن يظهر عند التركيز أيضًا.
المصادر
- W3C. Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/
- W3C WAI. ARIA Authoring Practices Guide. https://www.w3.org/WAI/ARIA/apg/
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.