اختبار الوصول بلوحة المفاتيح

من يعتمد على لوحة المفاتيح وأي المعايير تنطبق

كثيرون لا يستخدمون الفأرة أبداً: المستخدمون المكفوفون يتنقلون بقارئ شاشة تُشغّله لوحة المفاتيح؛ وذوو الرعاش أو محدودية حركة اليد يستخدمون لوحة المفاتيح أو جهاز تبديل (Switch) أو تحكماً صوتياً يحاكي ضغطات المفاتيح؛ وآخرون يفضّلونها ببساطة. وعلى الهواتف والأجهزة اللوحية تستخدم لوحات المفاتيح الخارجية والوصول بالتبديل نموذج التركيز نفسه. فإذا تعذّر الوصول إلى شيء بلوحة المفاتيح، أُغلق أمام كل هؤلاء.

معايير نجاح WCAG 2.2 التالية هي جوهر اختبار لوحة المفاتيح:

• 2.1.1 Keyboard (A) — كل الوظائف قابلة للتشغيل عبر واجهة لوحة المفاتيح دون اشتراط توقيتات محددة لضغطات المفاتيح (والرسم الحر وما شابهه من إدخال يعتمد على مسار الحركة هو الاستثناء).
• 2.1.2 No Keyboard Trap (A) — إذا أمكن نقل التركيز إلى مكوّن بلوحة المفاتيح، أمكن نقله خارجه بلوحة المفاتيح؛ وإذا لزم مفتاح غير قياسي، يُبلَّغ المستخدم به.
• 2.1.4 Character Key Shortcuts (A) — اختصارات الحرف الواحد يمكن إيقافها أو إعادة تعيينها، أو لا تعمل إلا عندما يكون التركيز على المكوّن المعني.
• 2.4.1 Bypass Blocks (A) — توجد آلية لتخطي الكتل المتكررة في صفحات كثيرة، مثل رابط التخطي.
• 2.4.3 Focus Order (A) — يتنقل التركيز بترتيب يحفظ المعنى وقابلية التشغيل.
• 2.4.7 Focus Visible (AA) — لتركيز لوحة المفاتيح مؤشر مرئي.
• 2.4.11 Focus Not Obscured (Minimum) (AA) — المكوّن الذي عليه التركيز لا يُحجب بالكامل بمحتوى وضعه المؤلف كالترويسات الثابتة أو الأشرطة.
• 3.2.1 On Focus (A) — تلقّي التركيز لا يسبب وحده تغييراً في السياق.
• ذات صلة: 1.4.13 Content on Hover or Focus (AA) للتلميحات والنوافذ المنبثقة، ومعايير AAA وهي 2.1.3 Keyboard (No Exception) و2.4.12 Focus Not Obscured (Enhanced) و2.4.13 Focus Appearance.

كيف تدير جلسة اختبار بلوحة المفاتيح

أبعد الفأرة عن متناول يدك وابدأ والتركيز في شريط العنوان في المتصفح، بحيث يقع أول ضغط على Tab على أول عنصر في الصفحة. تنقّل عبر الصفحة في الاتجاهين وشغّل كل عنصر تحكم. المفاتيح التي تحتاجها:

• Tab وShift+Tab — الانتقال إلى العنصر التالي والسابق القابل للتركيز.
• Enter — تفعيل الروابط والأزرار وإرسال النماذج. Space — تفعيل الأزرار، وتبديل مربعات الاختيار، وفتح بعض القوائم.
• مفاتيح الأسهم — التنقل داخل العناصر المركّبة: مجموعات أزرار الاختيار، والتبويبات، والقوائم، وصناديق القوائم، والمنزلقات، والشبكات.
• Escape — إغلاق نوافذ الحوار والقوائم والنوافذ المنبثقة والتلميحات.
• Home وEnd وPage Up وPage Down — القفز داخل القوائم والمنزلقات والعناصر الطويلة حيث يحددها النمط.

ترتيب التركيز وظهوره وعدم حجبه

يجب أن يتبع ترتيب التركيز ترتيب القراءة في التخطيط: في الصفحة من اليسار إلى اليمين يبدأ من أعلى اليسار إلى أسفل اليمين، وفي الصفحة العربية من اليمين إلى اليسار يبدأ من أعلى اليمين. وينكسر الترتيب عندما يختلف ترتيب DOM عن الترتيب المرئي (إعادة الترتيب بـ CSS grid أو flex، أو اللوحات ذات الموضع المطلق)، أو عندما يستخدم المؤلفون قيم tabindex موجبة تسحب العناصر أمام كل شيء آخر. القيمة tabindex="0" تضيف عنصر تحكم مخصصاً إلى الترتيب الطبيعي، والقيمة tabindex="-1" تجعل العنصر قابلاً للتركيز بالبرمجة فقط؛ أما القيم الموجبة فهي عيب في أغلب الأحوال.

يجب أن يكون مؤشر التركيز مرئياً على كل عنصر قابل للتركيز وعلى كل خلفية يقع عليها. وأكثر أسباب الإخفاق شيوعاً قاعدة «outline: none» عامة دون نمط بديل. افحص الروابط داخل النصوص، والأزرار في الأشرطة الملونة، والبطاقات، وحقول الإدخال في التذييلات الداكنة. يشترط المستوى AA في WCAG 2.2 فقط أن يكون المؤشر مرئياً؛ ويضيف معيار AAA رقم 2.4.13 Focus Appearance متطلبات للحجم والتباين تصلح هدفاً جيداً للتصميم.

وأخيراً تحقق من أن التركيز لا يُحجب بالكامل أبداً. فالترويسات والتذييلات الثابتة، وأشرطة ملفات تعريف الارتباط، وأزرار المحادثة، والأوراق السفلية كثيراً ما تغطي العنصر الذي عليه التركيز أثناء تمرير الصفحة، وهذا إخفاق في 2.4.11 Focus Not Obscured (Minimum). تنقّل بـ Tab في الصفحات الطويلة مع وجود كل العناصر الثابتة، بما في ذلك عند تكبير 200% حيث تغطي جزءاً أكبر من نافذة العرض.

فخاخ لوحة المفاتيح وتجاوز الكتل

فخ لوحة المفاتيح (Keyboard trap) هو أي موضع يستطيع التركيز دخوله ولا يستطيع مغادرته. والمشتبه بهم المعتادون: محتوى الأطراف الثالثة المضمَّن في iframe (الخرائط ومشغلات الفيديو وحقول الدفع)، ومحررات النص المنسق التي تلتقط Tab لإدراج مسافة بادئة، ومنتقيات التاريخ المخصصة، وسكربتات إدارة التركيز في نوافذ الحوار التي تواصل سحب التركيز إليها بعد إغلاقها. اختبر كلاً منها بالدخول بـ Tab ثم محاولة الخروج بـ Tab وShift+Tab وEscape. وإذا تطلب الخروج شيئاً غير معتاد، فيجب أن يخبر المكوّن المستخدم بكيفيته.

أما تجاوز الكتل (Bypass blocks) فيتعلق بالجهد لا بالإمكان. إذا اضطر مستخدم لوحة المفاتيح إلى الضغط على Tab أربعين مرة لتجاوز قائمة التنقل في كل صفحة، فالصفحة قد تكون قابلة للتشغيل لكنها ليست قابلة للاستخدام. ويشترط المعيار 2.4.1 وجود آلية لتخطي الكتل المتكررة. ورابط «التخطي إلى المحتوى الرئيسي» بوصفه أول عنصر قابل للتركيز هو الأكثر مباشرة لمستخدمي لوحة المفاتيح؛ وتخدم المعالم والعناوين مستخدمي قارئات الشاشة أيضاً. تحقق من أن رابط التخطي يظهر عند التركيز عليه، وأن تفعيله ينقل التركيز فعلاً — لا موضع التمرير فقط — بحيث يذهب Tab التالي إلى أول عنصر تحكم في المحتوى الرئيسي.

العناصر المخصصة وأنماط المفاتيح المتوقعة

عناصر التحكم الأصلية في HTML — button، وa مع href، وinput، وselect، وtextarea، وdetails — تأتي بسلوك لوحة مفاتيح مدمج. أما العناصر المخصصة المبنية من div وspan فلا سلوك لها حتى يضيفه المطورون، وأدوار ARIA لا تضيفه أيضاً. ويوثّق دليل ممارسات تأليف ARIA (APG) الصادر عن W3C تفاعل لوحة المفاتيح الذي يتوقعه المستخدمون لكل نمط شائع؛ استخدمه نتيجةً متوقعة في حالات اختبارك. وفي العناصر المركّبة يكون العنصر كله عادةً محطة Tab واحدة، وتتنقل مفاتيح الأسهم داخله.

• الزر — Enter وSpace يفعّلانه. وعنصر div يستجيب للنقر فقط يُعدّ إخفاقاً.
• مربع الاختيار — Space يبدّله. مجموعة أزرار الاختيار — يدخل Tab المجموعة عند الخيار المحدد؛ ومفاتيح الأسهم تتنقل وتحدد.
• التبويبات — ينقل Tab التركيز إلى قائمة التبويبات عند التبويب النشط؛ والسهمان الأيمن والأيسر يتنقلان بين التبويبات؛ وTab مرة أخرى ينتقل إلى اللوحة.
• زر القائمة — Enter أو Space يفتح القائمة ويركّز على أول عنصر (وقد يفتحها السهم للأسفل أيضاً)؛ والأسهم تتنقل؛ وEscape يغلقها ويعيد التركيز إلى الزر.
• مربع التحرير والسرد (Combobox) وصندوق القائمة (Listbox) — السهم للأسفل يفتح الخيارات أو يتنقل فيها؛ وEnter يحدد؛ وEscape يغلق القائمة المنبثقة.
• المنزلق (Slider) — مفاتيح الأسهم تغيّر القيمة بخطوة؛ وHome وEnd ينتقلان إلى الحد الأدنى والأقصى.
• التخطيطات من اليمين إلى اليسار — يحدد APG وظائف مفاتيح الأسهم الأفقية (Right Arrow للتبويب التالي أو لزيادة قيمة المنزلق) دون أن يتناول التخطيطات من اليمين إلى اليسار، فلا يضع قاعدة مستقلة لاتجاه RTL. وفي التخطيط العربي المعكوس، النتيجة المتوقعة المعتمدة في هذا الموضوع (انظر الدليل المحوري لاختبار إمكانية الوصول ودليل اختبار RTL) أن تتبع الأسهم الأفقية الاتجاه المرئي: فالتبويب التالي يقع إلى اليسار، لذا ينتقل إليه السهم الأيسر (Left Arrow)، وفي منزلق معكوس حدّه الأدنى على اليمين يزيد السهم الأيسر القيمة. أما السهمان للأعلى وللأسفل وHome وEnd فتبقى معانيها كما هي. دوّن القاعدة في مواصفة التصميم، وتحقق من أن كل العناصر تطبّقها بالطريقة نفسها.
• الإفصاح والأكورديون — Enter أو Space يوسّع القسم ويطويه.
• نافذة الحوار المشروطة (Modal) — يبقى Tab وShift+Tab داخلها؛ وEscape يغلقها.

نوافذ الحوار المشروطة والقوائم والمحتوى الديناميكي

إدارة التركيز هي الموضع الذي تفشل فيه معظم تطبيقات الصفحة الواحدة. عند فتح نافذة حوار مشروطة يجب أن ينتقل التركيز إليها — إلى الحقل الأول، أو أول عنصر قابل للتنفيذ، أو عنوان النافذة إذا كان المحتوى طويلاً. وما دامت مفتوحة، يجب أن يدور Tab داخلها وألا يمكن الوصول إلى الصفحة خلفها. وعند إغلاقها يجب أن يعود التركيز إلى العنصر الذي فتحها ليكمل المستخدم من حيث كان. ويتولى العنصر الأصلي dialog المفتوح بـ showModal() جزءاً كبيراً من ذلك؛ أما النوافذ المخصصة فيجب أن تفعله بالبرمجة.

طبّق القاعدة نفسها على كل تغيير يطلقه المستخدم: بعد حذف صف، يجب أن ينتقل التركيز إلى صف مجاور أو رسالة حالة، لا أن يعود إلى أعلى المستند؛ وبعد تغيير المسار على جانب العميل، يجب أن ينتقل التركيز إلى عنوان الصفحة الجديدة أو منطقتها الرئيسية؛ والقوائم والنوافذ المنبثقة المفتوحة بلوحة المفاتيح يجب أن تُغلق بـ Escape وتعيد التركيز إلى مطلقها. والمحتوى الذي يظهر عند التمرير بالفأرة يجب أن يظهر أيضاً عند تركيز لوحة المفاتيح وأن يمكن إخفاؤه دون نقل التركيز (1.4.13 Content on Hover or Focus).

حالات اختبار لوحة المفاتيح

نفّذها لكل نوع صفحة ولكل عملية كاملة ضمن النطاق. كل سطر حالة اختبار بنتيجتها المتوقعة؛ وسجّل الإخفاقات مع معيار النجاح.

• KB-01 — أول ضغطة Tab من شريط العنوان تقع على رابط تخطٍّ يظهر عند التركيز عليه.
• KB-02 — تفعيل رابط التخطي ينقل التركيز إلى main؛ وTab التالي يصل إلى أول عنصر تحكم فيه.
• KB-03 — يصل Tab إلى كل عنصر تفاعلي؛ ولا يكون أي عنصر غير تفاعلي محطة Tab.
• KB-04 — يعكس Shift+Tab الترتيب تماماً.
• KB-05 — ترتيب التركيز يطابق ترتيب القراءة (افحص التخطيطين LTR وRTL).
• KB-06 — مؤشر التركيز مرئي على كل محطة وفوق كل خلفية.
• KB-07 — لا يُحجب أي عنصر مركَّز بالكامل خلف ترويسة أو تذييل ثابت أو شريط ملفات تعريف الارتباط أو أداة المحادثة.
• KB-08 — الأزرار تُفعَّل بـ Enter وSpace، والروابط بـ Enter.
• KB-09 — العناصر المخصصة تتبع مفاتيح APG (التبويبات: الأسهم؛ القائمة: Enter/Space وEsc؛ المنزلق: الأسهم وHome/End).
• KB-10 — النافذة المشروطة: ينتقل التركيز إليها عند الفتح، ويدور Tab داخلها، ويغلقها Esc، ويعود التركيز إلى مطلقها.
• KB-11 — لا فخاخ: يستطيع التركيز مغادرة كل عنصر وكل iframe ومشغّل فيديو ومحرّر.
• KB-12 — التلميحات والنوافذ المنبثقة التي تظهر عند التمرير بالفأرة تظهر أيضاً عند التركيز وتُغلق بـ Esc.
• KB-13 — التركيز وحده لا يرسل نموذجاً ولا ينتقل إلى صفحة ولا يغيّر السياق.
• KB-14 — اختصارات المفتاح الواحد يمكن إيقافها أو إعادة تعيينها، أو لا تعمل إلا حين يكون التركيز على المكوّن.
• KB-15 — بعد الحذف أو الإضافة أو تغيير المسار، يقع التركيز على عنصر منطقي لا على جسم المستند (body).
• KB-16 — يمكن إتمام كل عملية كاملة (مثل إتمام الشراء) بلوحة المفاتيح وحدها.

KB-01  First Tab from the address bar lands on a skip link that becomes visible on focus
KB-02  Activating the skip link moves focus to main; next Tab reaches the first control in main
KB-03  Tab reaches every interactive element; nothing non-interactive is a Tab stop
KB-04  Shift+Tab reverses the order exactly
KB-05  Focus order matches the reading order (check LTR and RTL layouts)
KB-06  Focus indicator visible on every stop, on every background
KB-07  No focused element is fully hidden by sticky header, footer, cookie banner or chat widget
KB-08  Buttons activate with Enter and Space; links with Enter
KB-09  Custom widgets follow APG keys (tabs: arrows; menu: Enter/Space, Esc; slider: arrows, Home/End)
KB-10  Modal: focus moves in on open, Tab cycles inside, Esc closes, focus returns to the trigger
KB-11  No trap: focus can leave every widget, iframe, video player and editor
KB-12  Tooltips and popovers shown on hover also show on focus and close with Esc
KB-13  Focus alone never submits, navigates or changes context
KB-14  Single-key shortcuts can be turned off or remapped, or work only when the component has focus
KB-15  After delete, add or route change, focus lands on a sensible element, not the document body
KB-16  Each complete process (e.g. checkout) can be finished with the keyboard only

جرّبها: مولّد قوائم تحقق QA بالذكاء الاصطناعي جرّبها: مولّد حالات الاختبار

أمثلة على العيوب

مصاغة كعناوين تقارير أخطاء، مع المعيار الذي يخفق فيه كل منها. واذكر في التقرير المتصفح وتسلسل المفاتيح الدقيق والموضع الذي انتهى إليه التركيز.

• «منتقي التاريخ لا يعمل بمفاتيح الأسهم؛ ولا يمكن اختيار التاريخ إلا بالفأرة» — 2.1.1 Keyboard.
• «مربع اختيار الموافقة على الشروط المخصص (div) لا يتبدل بـ Space» — 2.1.1 Keyboard.
• «يعلق تركيز Tab داخل iframe الخريطة المضمّنة في صفحة الفروع» — 2.1.2 No Keyboard Trap.
• «لا رابط تخطٍّ ولا معالم؛ يلزم 42 ضغطة Tab للوصول إلى نتائج البحث» — 2.4.1 Bypass Blocks.
• «قيمة tabindex موجبة على حقل النشرة البريدية ترسل أول ضغطة Tab إلى التذييل قبل رابط التخطي والترويسة» — 2.4.3 Focus Order.
• «ينتقل التركيز إلى بداية المستند بعد إغلاق درج المرشحات» — 2.4.3 Focus Order.
• «أُزيلت حلقة التركيز عن كل الروابط (outline: 0) دون بديل» — 2.4.7 Focus Visible.
• «شريط ملفات تعريف الارتباط الثابت يغطي زر «ادفع الآن» عند التركيز عليه بتكبير 200%» — 2.4.11 Focus Not Obscured (Minimum).
• «التركيز على محدد اللغة يعيد تحميل الصفحة بالعربية فوراً» — 3.2.1 On Focus.

جرّبها: مولّد عناوين الأخطاء بالذكاء الاصطناعي

ما الذي يمكن أتمتته

تلتقط محركات القواعد بعض مشكلات لوحة المفاتيح بشكل ثابت — قيم tabindex الموجبة، والأدوار التفاعلية غير القابلة للتركيز، والمناطق القابلة للتمرير دون وصول بلوحة المفاتيح — لكنها لا تحكم على الترتيب أو الظهور. وتسد أتمتة المتصفح جزءاً من الفجوة: فاختبار Playwright أو Cypress أو Selenium يستطيع ضغط المفاتيح والتحقق من العنصر الذي عليه التركيز، مما يجعل التقاط حالات انحدار إدارة التركيز في نوافذ الحوار وتغييرات المسار رخيصاً. واحتفظ بالجولة اليدوية للترتيب والظهور والحجب، فهي تحتاج إلى عين بشرية.

test("edit address dialog returns focus to its trigger", async ({ page }) => {
  await page.goto("/account/addresses");
  const edit = page.getByRole("button", { name: "Edit address" });
  await edit.focus();
  await page.keyboard.press("Enter");
  await expect(page.getByRole("dialog", { name: "Edit address" })).toBeVisible();
  await expect(page.getByRole("textbox", { name: "Street" })).toBeFocused();
  await page.keyboard.press("Escape");
  await expect(page.getByRole("dialog")).toBeHidden();
  await expect(edit).toBeFocused();
});

الأسئلة الشائعة

المراجع

• Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024توصية W3C التي تحدد معايير النجاح القابلة للاختبار لإتاحة محتوى الويب، مرتّبةً تحت أربعة مبادئ وثلاثة مستويات مطابقة (A وAA وAAA).
• Understanding WCAG 2.2W3C Web Accessibility Initiative (WAI)الشرح التوضيحي لكل إرشاد ومعيار نجاح في WCAG 2.2: الغرض، ومن يستفيد، والأمثلة والتقنيات (غير إلزامي).
• ARIA Authoring Practices Guide (APG)W3C Web Accessibility Initiative (WAI)أنماط للعناصر الشائعة (التبويبات والقوائم ونوافذ الحوار والقوائم المنسدلة) مع تفاعل لوحة المفاتيح المتوقع واستخدام ARIA — المرجع الذي تُقارَن به المكونات المخصصة.
• Easy Checks – A First Review of Web AccessibilityW3C Web Accessibility Initiative (WAI)فحوص أولية بسيطة يستطيع أي شخص إجراؤها — عنوان الصفحة والبدائل النصية والعناوين والتباين وتكبير النص والوصول بلوحة المفاتيح — قبل التقييم الكامل.
• Accessibility — MDNMDN Web Docs (Mozilla)أدلة عملية لبناء صفحات ويب ميسّرة وفحصها: HTML الدلالي وARIA ودعم لوحة المفاتيح والاختبار.
• Playwright DocumentationMicrosoft (Playwright)التوثيق الرسمي لـ Playwright، إطار الاختبار الشامل الذي يشغّل Chromium وWebKit وFirefox.