إجابة سريعة
التنقل بلوحة المفاتيح هو القدرة على التحرك داخل الموقع الإلكتروني وتشغيل كل جزء منه باستخدام لوحة المفاتيح وحدها، دون الفأرة أو الشاشة اللمسية أو لوحة التتبع. وتدعمه عناصر HTML الأصلية تلقائيا، أما المكونات المصممة خصيصا فيجب إعادة تنفيذه فيها عن قصد، ومن هنا تأتي معظم إخفاقات إمكانية الوصول بلوحة المفاتيح.
ما هو التنقل بلوحة المفاتيح؟
ينتقل المستخدم بمفتاح Tab من رابط إلى رابط، ومن زر إلى زر، ومن حقل نموذج إلى آخر، ثم يفعل ما يصل إليه بمفتاح Enter أو Space. وهذه ليست طريقة إدخال هامشية مضافة فوق الواجهة "الحقيقية"، فكل متصفح وكل عنصر HTML أصلي يدعمها افتراضيا بالفعل.
أين ينهار هذا الدعم
يصبح وسم <button> أو <a> البسيط قابلا للتشغيل بلوحة المفاتيح بمجرد وجوده، دون أي شفرة إضافية. ولا ينهار الدعم إلا حين يستبدل الفريق هذه العناصر الأصلية بأخرى مصممة خصيصا، مثل عنصر <div> منسق ليبدو كزر، دون إعادة بناء سلوك لوحة المفاتيح الذي كانت النسخة الأصلية توفره مجانا.
لماذا يعد التنقل بلوحة المفاتيح مهما لإمكانية الوصول؟
الأساس المشترك الذي تقوم عليه التقنية المساعدة
يكتسب التنقل بلوحة المفاتيح أهميته لأنه طريقة الإدخال الوحيدة التي تعتمد عليها جميع التقنيات المساعدة تقريبا، حتى حين لا يضغط مستخدمها مفتاح Tab بوعي. فمستخدم قارئ الشاشة يتنقل في بنية الصفحة عبر أوامر لوحة المفاتيح، ومستخدم الوصول بالمفاتيح التبديلية، وهو شخص ذو إعاقة حركية لا يستطيع تشغيل لوحة مفاتيح عادية مباشرة، يظل معتمدا على برمجيات تحاكي الإدخال بلوحة المفاتيح. وإذا كان الموقع يعمل بالفأرة فقط، فإن جميع هؤلاء المستخدمين يستبعدون دفعة واحدة، لأن دعم لوحة المفاتيح هو الأساس المشترك الذي تقوم عليه عدة تقنيات مساعدة مختلفة.
مؤشر على الحالة العامة لإمكانية الوصول
ولهذا أيضا تعمل إمكانية الوصول بلوحة المفاتيح كمؤشر موثوق على الحالة العامة لإمكانية الوصول في الموقع. فالصفحة القابلة للتشغيل بالكامل بلوحة المفاتيح تتمتع عادة ببنية أساسية سليمة: عناصر مرتبة ترتيبا منطقيا، وعناصر تحكم أصلية بدلا من أدوات مصممة خصيصا، وحالات تركيز ظاهرة بدلا من إزالتها لأغراض جمالية. أما الصفحة التي تخفق في الوصول بلوحة المفاتيح فغالبا ما تكون قد اختصرت الطريق في الترميز نفسه، وهو ما ينذر عادة بمشكلات لمستخدمي قارئات الشاشة أيضا، لأن كليهما يعتمد على الأساس البنيوي ذاته.
من يستخدم التنقل بلوحة المفاتيح؟
تعتمد عليه فئات مختلفة لأسباب مختلفة تماما، والموقع الذي يراعي فئة واحدة منها فقط سيظل مخفقا تجاه البقية.
الأشخاص ذوو الإعاقة الحركية
قد يكون تشغيل أهداف النقر الصغيرة وإيماءات السحب بالفأرة صعبا فعلا على نحو موثوق، حتى حين تكون ضغطات المفاتيح المنفصلة في لوحة المفاتيح ميسورة بالمقارنة. وبالنسبة إلى هذه الفئة، كثيرا ما يكون دعم لوحة المفاتيح طريقة الإدخال الوحيدة التي تعمل فعلا.
مستخدمو قارئات الشاشة
لا علاقة لموضع المؤشر على الشاشة بما يقرأه قارئ الشاشة بصوت مسموع في تلك اللحظة. وأوامر لوحة المفاتيح هي الوسيلة التي يوجه بها مستخدم قارئ الشاشة تنقله الخاص عبر بنية الصفحة ومحتواها.
مستخدمو لوحة المفاتيح حصرا
يتنقل بعض المستخدمين بلوحة المفاتيح حصرا لأسباب لا صلة لها بالإعاقة: لوحة تتبع معطلة، أو فأرة توقفت عن العمل، أو مجرد تفضيل في أسلوب العمل، فالمسألة هي أن يعمل الموقع كما يفترض أن يعمل مع أي جهاز إدخال قياسي.
المستخدمون المتمرسون
كثيرا ما يتنقل المطورون والكتاب وغيرهم من مستخدمي الحاسوب الدائمين بلوحة المفاتيح لأنها أسرع من مد اليد إلى الفأرة مرارا. والدعم القوي للوحة المفاتيح يكافئ هذه الفئة عرضا بتجربة أسرع.
الأشخاص ذوو الإصابات المؤقتة
قد يجعل كسر في الرسغ أو إصابة في اليد أو حمل رضيع بذراع واحدة استخدام الفأرة مؤلما أو مستحيلا لفترة من الزمن، دون أن يعد الشخص نفسه من ذوي الإعاقة إطلاقا.
كيف يتنقل المستخدمون في الموقع الإلكتروني دون فأرة؟
مفاتيح الحركة الأساسية
ينقل مفتاح Tab التركيز إلى الأمام بين العناصر التفاعلية، من روابط وأزرار وحقول نماذج، بالترتيب الذي تظهر به في شفرة HTML الأساسية للصفحة، ويعكس Shift+Tab هذه الحركة. ثم يفعل Enter أو Space العنصر الذي يحمل التركيز في تلك اللحظة، سواء كان ذلك إرسال نموذج أو فتح رابط أو فتح قائمة.
مفاتيح لحالات أكثر تحديدا
تتحرك مفاتيح الأسهم داخل المكون الواحد بعد وصول التركيز إليه، بين مجموعة من أزرار الاختيار، أو عناصر قائمة، أو مدى شريط تمرير، بدلا من الانتقال بين عناصر منفصلة في الصفحة. ويغلق مفتاح Esc ما هو مفتوح حاليا، مثل قائمة منسدلة أو نافذة منبثقة. ويقفز مفتاحا Home وEnd إلى بداية قائمة أو صفحة طويلة أو نهايتها.
أين تنهار التجربة
لا تنهار التجربة إلا حين لا تنفذ المكونات المصممة خصيصا في الموقع مجموعة المفاتيح الكاملة هذه، فالقائمة المنسدلة المخصصة التي تستجيب للنقر لكنها تتجاهل مفاتيح الأسهم تماما تترك مستخدم لوحة المفاتيح دون أي وسيلة لاختيار خيار بعد فتحها.
ما مفاتيح لوحة المفاتيح المستخدمة في التنقل؟
Tab
ينقل التركيز إلى العنصر التفاعلي التالي بحسب ترتيب الشفرة المصدرية للصفحة. وهو المفتاح الأكثر محورية في التنقل بلوحة المفاتيح.
Shift + Tab
يعكس اتجاه Tab. واستخدامه العملي الأساسي هو التدارك، أي العودة إلى حقل تجاوزته دون البدء من أعلى الصفحة من جديد.
Enter
يفعل العنصر الذي يحمل التركيز حاليا. وفي عنصر تحكم مصمم خصيصا يؤدي دور الزر، يجب إضافة دعم Enter عن قصد.
Space
يفعل الأزرار ويبدل حالة مربعات الاختيار، لكنه يمرر منطقة العرض أيضا حين لا يكون التركيز على عنصر تفاعلي، ولهذا تحتاج مربعات الاختيار المخصصة إلى معالجة صريحة لمفتاح Space.
مفاتيح الأسهم
تتنقل داخل مكون مجمع واحد، بين خيارات مجموعة أزرار اختيار، أو علامات تبويب في قائمة تبويبات، أو عناصر في قائمة مفتوحة، بدلا من التنقل بين عناصر منفصلة في الصفحة.
Escape
يغلق الطبقة المفتوحة، ويعيد التركيز في المكون جيد البناء إلى العنصر الذي فتحها أصلا.
Home / End
ينقلان التركيز إلى أول عنصر أو آخره في قائمة أو مجموعة تبويبات أو مستند طويل، وهما أكثر فائدة في الصفحات الغنية بالبيانات حيث يكون Tab وحده غير عملي.
كيف يعمل تركيز لوحة المفاتيح؟
ما هو التركيز في حقيقته
تركيز لوحة المفاتيح هو مفهوم مدمج في المتصفح يحدد "أي عنصر واحد نشط حاليا"، أي العنصر الذي سيتلقى ضغطة المفتاح التالية، والذي يبرزه عادة إطار ظاهر على الشاشة. ولا يمكن لأكثر من عنصر واحد أن يحمل التركيز في الوقت نفسه.
كيف يتحرك التركيز
يتحرك التركيز بإحدى طريقتين: تلقائيا، حين يضغط المستخدم Tab عبر الصفحة، أو برمجيا، حين تنقله الشفرة عن قصد، كأن ينقل التركيز إلى داخل نافذة منبثقة لحظة فتحها، أو يعاد إلى الزر الذي فتحها بعد إغلاقها. وهذا النوع الثاني، أي التركيز المدار، هو حيث تخطئ معظم المكونات التفاعلية المصممة خصيصا.
حين يسوء التركيز
التركيز هو أيضا ما تشير إليه "مصيدة لوحة المفاتيح" حين يسوء الأمر في الاتجاه المعاكس، أي عنصر يلتقط التركيز ولا يطلقه أبدا، لأن أي تركيبة مفاتيح يجربها المستخدم لا تعيد التركيز إلى الخارج.
ما هو ترتيب التنقل، ولماذا يهم؟
ما يتبعه ترتيب التنقل افتراضيا
ترتيب التنقل هو التسلسل الذي يتحرك به التركيز مع ضغط المستخدم على Tab مرارا، وهو يتبع افتراضيا ترتيب ظهور العناصر في شفرة HTML المصدرية للصفحة، لا موضعها البصري في الصفحة المعروضة. ويتباعد الترتيبان حين يستخدم CSS لإعادة وضع عنصر بصريا دون نقله في الشفرة الأساسية.
حين يفترق ترتيب التنقل عن الترتيب البصري
يقع التركيز على عنصر يظهر بصريا في موضع آخر من الصفحة، أو يتلقى شريط جانبي مبرمج في مطلع شفرة HTML التركيز قبل المحتوى الرئيسي الذي يقرأه المستخدم المبصر أولا. والحل ليس نصا برمجيا يعيد ترتيب التركيز بعد وقوعه، بل الحفاظ على ترتيب شفرة HTML المصدرية متوافقا مع ترتيب القراءة البصري من البداية.
دور السمة tabindex
ثمة ممارسة ذات صلة لكنها منفصلة، هي السمة tabindex، التي يمكنها إدراج عنصر في تسلسل التنقل (tabindex="0") أو إخراجه منه (tabindex="-1"). واستخدام قيمة موجبة لـ tabindex لفرض ترتيب معين يدويا اختصار شائع لكنه غير محبذ، لأنه ينشئ ترتيبا ثانيا منافسا يجب الحفاظ عليه يدويا.
ما عناصر الموقع الإلكتروني التي ينبغي أن تكون متاحة عبر لوحة المفاتيح؟
يجب أن يكون كل عنصر تفاعلي متاحا عبر لوحة المفاتيح، لكن أنواع العناصر المختلفة تواجه أنماط إخفاق محددة ومختلفة.
Links
وسم <a> الأصلي المزود بسمة href صالحة متاح عبر لوحة المفاتيح تلقائيا. أما الرابط المبني دون href فيخرج من ترتيب التنقل كليا.
Buttons
يتولى عنصر <button> الأصلي إمكانية الوصول بمفتاح Tab والتفعيل بمفتاحي Enter وSpace دون شفرة إضافية. أما "الزر" المصنوع من عنصر <div> منسق فهو غير مرئي لمفتاح Tab ما لم يعد بناؤه يدويا.
Forms
تعتمد على ترتيب تنقل منطقي، وتسميات مرتبطة برمجيا بحقولها، ورسائل خطأ يصادفها مستخدم لوحة المفاتيح فعلا، لا مجرد إطار أحمر في CSS.
Menus
يجب أن تفتح بمفتاح Enter أو Space، وأن تتيح التنقل بين عناصرها بمفاتيح الأسهم، وأن تغلق بمفتاح Esc مع إعادة التركيز إلى العنصر الذي فتحها. والقائمة التي تعمل بتمرير الفأرة فقط ليس لها مكافئ عبر لوحة المفاتيح.
Dialogs
عليها أن تنقل التركيز إلى داخلها عند الفتح، وأن تحصر التركيز في محتواها أثناء بقائها مفتوحة، وأن تعيد التركيز إلى العنصر الذي فتحها بمجرد إغلاقها.
لوحات الطي
يجب أن يكون عنصر التوسيع والطي زرا حقيقيا قابلا للتشغيل بمفتاح Enter أو Space، مع عرض حالة توسعه للتقنية المساعدة.
Tabs
ينبغي أن تتيح لمفاتيح الأسهم التنقل بين علامات التبويب، ولمفتاحي Enter أو Space تفعيل العلامة المحددة، على غرار النمط المتبع في سائر المكونات المجمعة.
المكونات المصممة خصيصا
لا يرث شريط التمرير أو قائمة السحب والإفلات أو منتقي التاريخ المصمم خصيصا أي شيء من سلوك لوحة المفاتيح الذي يوفره المكافئ الأصلي، إذ يجب بناء كل جزء منه عن قصد.
ما هي مصيدة لوحة المفاتيح؟
مصيدة لوحة المفاتيح هي عنصر يلتقط التركيز ولا يسمح لمستخدم لوحة المفاتيح بإخراجه منه مهما جرب من مفاتيح أو تركيبات مفاتيح. وهي من أشد إخفاقات إمكانية الوصول بلوحة المفاتيح خطورة، لأنها لا تسبب عناء فحسب، بل توقف المستخدم تماما، فلا طريق إلى الأمام ولا طريق إلى الوراء.
أين تحدث المصائد عادة
تظهر مصائد لوحة المفاتيح غالبا في الأدوات المصممة خصيصا، مثل نافذة منبثقة تحصر التركيز داخلها بشكل صحيح أثناء فتحها لكنها لا تطلقه أبدا بعد إغلاقها. كما يمكن للمحتوى المضمن من طرف ثالث، مثل بعض مشغلات الفيديو أو إطارات الإعلانات، أن يحبس التركيز إذا لم يبن مع مراعاة الخروج بلوحة المفاتيح. والمستخدم الذي يقع في مصيدة لا يجد أي إشارة بصرية إلى وجود خلل، فالصفحة تبدو كما هي، لكن Tab وShift+Tab يتوقفان ببساطة عن العمل.
لماذا تعاملها WCAG كمعيار قائم بذاته
تذكر مصيدة لوحة المفاتيح تحديدا في WCAG كمعيار نجاح قائم بذاته، منفصل عن قابلية التشغيل العامة بلوحة المفاتيح، وذلك بالضبط لأنها طريقة متميزة وشديدة الخطورة لإخفاق الموقع، فتعذر الوصول إلى عنصر عائق، أما تعذر الخروج منه فطريق مسدود تماما.
كيف يمكن اختبار التنقل بلوحة المفاتيح؟
يتراوح الاختبار بين فحص يدوي سريع وتدقيق رسمي، واستخدام أكثر من أسلوب واحد يكشف أصنافا مختلفة من المشكلات.
الاختبار اليدوي بلوحة المفاتيح
افصل الفأرة وأنجز مهمة حقيقية باستخدام Tab وShift+Tab وEnter وSpace ومفاتيح الأسهم فقط، مع الانتباه إلى العناصر التي يتعذر الوصول إليها، واختفاء مؤشر التركيز، ومصائد لوحة المفاتيح.
الاختبار بقارئ الشاشة
يكشف طبقة أخرى من المشكلات، فقد يكون العنصر قابلا للوصول بلوحة المفاتيح لكنه سيئ التسمية، فيعلن قارئ الشاشة "زر" دون أي إشارة إلى وظيفته.
أدوات المطور في المتصفح
تتيح للمختبر فحص شجرة إمكانية الوصول مباشرة، للتأكد من العناصر القابلة لتلقي التركيز، ودورها المحسوب، وما إذا كانت قيم tabindex مضبوطة على النحو المقصود.
الاختبار الآلي لإمكانية الوصول
يمكنه رصد بعض المشكلات مثل قيمة tabindex الموجبة، لكنه لا يستطيع التحقق مما إذا كان ترتيب التنقل مطابقا للترتيب البصري، أو ما إذا كانت النافذة المنبثقة تحصر التركيز وتطلقه على نحو صحيح.
تدقيقات إمكانية الوصول
تجمع كل ما سبق في تقييم منظم وفق معيار محدد، هو WCAG عادة، وتنتج قائمة مرتبة بالأولوية بالنتائج يبنى عليها التخطيط للمعالجة.
كيف تعرف WCAG إمكانية الوصول بلوحة المفاتيح؟
| 2.1.1 لوحة المفاتيح | يشترط أن تكون جميع الوظائف قابلة للتشغيل عبر واجهة لوحة المفاتيح، دون اشتراط توقيت معين لكل ضغطة مفتاح. وهو من متطلبات المستوى A، أي المستوى الأساسي. |
|---|---|
| 2.1.2 لا مصيدة لوحة مفاتيح | يحظر تحديدا أن يعلق التركيز في أي مكون، ويشترط أنه إذا لم تنجح طريقة الخروج المعتادة، فيجب إعلام المستخدم بوسيلة بديلة لنقل التركيز بعيدا. |
| 2.4.3 ترتيب التركيز | يشترط أن يحافظ الترتيب على المعنى وقابلية التشغيل حين يمكن التنقل في الصفحة تسلسليا، وهو الصيغة المعيارية لمناقشة ترتيب التنقل الواردة أعلاه. |
| 2.4.7 التركيز الظاهر | يشترط أن يكون لأي واجهة قابلة للتشغيل بلوحة المفاتيح مؤشر ظاهر يبين العنصر الذي يحمل التركيز حاليا، وهو بالضبط ما يضيع حين يزيل الفريق إطار التركيز الافتراضي لأغراض جمالية. |
ما أفضل الممارسات في التنقل بلوحة المفاتيح؟
استخدام عناصر تحكم HTML الأصلية
يأتي الزر أو الرابط أو قائمة الاختيار الأصلية مزودة أصلا بإمكانية الوصول بلوحة المفاتيح والتفعيل، وغالبا بسلوك مفاتيح الأسهم، دون أي شفرة إضافية.
الحفاظ على ترتيب تنقل منطقي
حافظ على توافق ترتيب شفرة HTML المصدرية مع ترتيب القراءة البصري، بدلا من ترقيع التعارض بقيم tabindex يجب مزامنتها يدويا.
توفير مؤشرات تركيز ظاهرة
أبق إطار التركيز الافتراضي، أو استبدله بنمط مخصص ظاهر بالقدر نفسه، ولا تزله أبدا طلبا لمظهر "أنظف".
تجنب مصائد لوحة المفاتيح
يحتاج أي مكون يدير تركيزه الخاص إلى مخرج صريح ومختبر، سواء بمفتاح Esc أو بزر إغلاق يمكن الوصول إليه، أو بكليهما.
دعم تفاعلات لوحة المفاتيح المعتادة
اتبع الأنماط نفسها التي يتوقعها المستخدمون أصلا من المكافئات الأصلية، بدلا من ابتكار نمط جديد لمكون واحد.
الاختبار دون فأرة
إنجاز مسارات استخدام حقيقية بلوحة المفاتيح وحدها بانتظام هو أكثر الطرق مباشرة لرصد هذه المشكلات قبل وصولها إلى بيئة الإنتاج.
الأسئلة الشائعة
ليس افتراضيا، ولا دون جهد مقصود. فعناصر HTML الأصلية متاحة عبر لوحة المفاتيح تلقائيا، أما أي مكون مصمم خصيصا، كقائمة منسدلة أو شريط تمرير أو نافذة منبثقة، فلا يعمل دون فأرة إلا إذا بنى المطور فيه صراحة إمكانية الوصول بمفتاح Tab ومعالجة المفاتيح وإدارة التركيز.
ينقل Tab تركيز لوحة المفاتيح إلى العنصر التفاعلي التالي بحسب ترتيب الشفرة المصدرية للصفحة، ويعيده Shift+Tab إلى العنصر السابق. وهما معا الوسيلة الأساسية التي يتنقل بها مستخدم لوحة المفاتيح بين عناصر الصفحة التفاعلية عنصرا تلو الآخر.
تركيز لوحة المفاتيح هو مفهوم المتصفح لأي عنصر واحد نشط حاليا وسيتلقى ضغطة المفتاح التالية. ويظهر عادة بإطار مرئي، وكل أمر من أوامر لوحة المفاتيح يعمل على العنصر الذي يحمله في تلك اللحظة.
مصيدة لوحة المفاتيح هي مكون يلتقط تركيز لوحة المفاتيح ولا يطلقه أبدا، فيترك المستخدم دون وسيلة للخروج بمفتاح Tab مهما حاول. وتعد من أشد إخفاقات إمكانية الوصول بلوحة المفاتيح خطورة لأنها توقف المستخدم تماما بدل أن تسبب له عناء فحسب.
WCAG's core keyboard requirements are Success Criterion 2.1.1, which requires all functionality to be operable by keyboard, and 2.1.2, which prohibits keyboard traps. Two related criteria — 2.4.3 (focus order) and 2.4.7 (focus visible) — round out the requirement.
أكثر الاختبارات مباشرة هو إنجاز مهمة حقيقية على الموقع باستخدام Tab وShift+Tab وEnter وSpace ومفاتيح الأسهم فقط، مع الانتباه تحديدا إلى العناصر التي يتعذر الوصول إليها، ومؤشرات التركيز المفقودة، ومصائد لوحة المفاتيح. أما الاختبار بقارئ الشاشة وأدوات المطور في المتصفح والماسحات الآلية فيرصد كل منها شريحة مختلفة وأضيق من المشكلات.
يتنقل معظم مستخدمي قارئات الشاشة بلوحة المفاتيح في المقام الأول، لأن موضع مؤشر الفأرة على الشاشة لا علاقة له بما يقرأه قارئ الشاشة في تلك اللحظة. ويستخدم بعض مستخدمي قارئات الشاشة على الأجهزة اللمسية إيماءات التمرير بدلا من ذلك، لكن أوامر لوحة المفاتيح هي المعتاد على الحاسوب المكتبي.
