WCAG 2.4.7: تركيز مرئي

ماذا يعني هذا المعيار

يتطلب معيار WCAG 2.4.7 Focus Visible أن يُظهر كل عنصر تفاعلي في صفحة الويب — الروابط، الأزرار، حقول النماذج، الويدجت المخصصة، وأي مكوّن آخر يمكن تشغيله عبر لوحة المفاتيح — مؤشر تركيز مرئي عندما يحصل على تركيز لوحة المفاتيح. ببساطة، عندما يضغط المستخدم على مفتاح Tab للتنقل عبر الصفحة، يجب أن يكون قادرًا على رؤية العنصر النشط حاليًا بشكل واضح.

لا يفرض هذا المعيار نمطًا بصريًا محددًا لمؤشر التركيز، بل يشترط فقط حدوث بعض التغيّر المرئي. ومع ذلك، فإن مؤشرًا بالكاد يمكن إدراكه — مثل إطار منقط بسماكة بكسل واحد يندمج مع الخلفية — قد يفي من الناحية التقنية بمتطلبات 2.4.7 لكنه يفشل في تلبية المعيار الأكثر صرامة WCAG 2.4.11 (Focus Appearance) الذي تم تقديمه في WCAG 2.2. وفقًا لـ 2.4.7 وحده، يكفي أي تغيّر بصري يمكن تمييزه.

ما الذي يُعد اجتيازًا: يجتاز مؤشر التركيز المعيار إذا كان المستخدم المبصر الذي يتنقل عبر الصفحة باستخدام Tab قادرًا على تحديد العنصر الذي عليه التركيز دون الاعتماد على إعلانات قارئ الشاشة أو إشارات غير بصرية أخرى. من التطبيقات المقبولة الشائعة: الإطارات الافتراضية للمتصفح، قواعد CSS مخصصة باستخدام outline أو box-shadow، تغيّر في أسلوب التسطير، أو تغيّر في لون الخلفية عند حالة :focus أو :focus-visible.

ما الذي يُعد فشلًا: يحدث الفشل عندما يقوم المطوّر بإزالة حلقة التركيز الافتراضية للمتصفح — عادةً عبر outline: none أو outline: 0 في CSS — دون استبدالها بمؤشر مخصص مكافئ. كما يحدث الفشل عندما يتم جعل مكوّن مخصص (مبني باستخدام عناصر <div> أو <span>) قابلاً للتركيز عبر لوحة المفاتيح باستخدام tabindex دون أن يحصل على أي تغيّر مرئي في النمط عند التركيز.

الاستثناءات الرسمية: يشير WCAG إلى أن هذا المعيار ينطبق فقط على الواجهات التي يمكن تشغيلها عبر لوحة المفاتيح. المكوّنات الزخرفية البحتة أو المستبعدة صراحةً من ترتيب الانتقال بالمفتاح Tab (عبر tabindex='-1') ليست ملزمة بإظهار مؤشر تركيز، لأنها لا يمكن أن تحصل على التركيز من خلال التنقل العادي بلوحة المفاتيح.

لماذا يهم

وضوح التركيز هو أساس إمكانية الوصول عبر لوحة المفاتيح، وإمكانية الوصول عبر لوحة المفاتيح هي بوابة الوصول لمجموعة واسعة من فئات الإعاقة. وفقًا لمراكز مكافحة الأمراض والوقاية منها (CDC)، فإن 26% من البالغين في الولايات المتحدة يعيشون مع شكل من أشكال الإعاقة، وكثير من هؤلاء يعتمدون على لوحات المفاتيح أو تقنيات مساعدة تحاكي لوحة المفاتيح بدلًا من أجهزة التأشير.

المستخدمون ذوو الإعاقات الحركية — بما في ذلك الأشخاص الذين لديهم حالات مثل التصلب الجانبي الضموري (ALS)، الشلل الدماغي، إصابات الإجهاد المتكرر، أو مرض باركنسون — يعتمدون كثيرًا على لوحات المفاتيح، وأجهزة التبديل، وأجهزة sip-and-puff، أو برامج تتبع حركة العين. جميع هذه أساليب الإدخال تعتمد على نموذج تركيز لوحة المفاتيح في المتصفح. إذا كان مؤشر التركيز غير مرئي، فلن يتمكن هؤلاء المستخدمون من تحديد مكانهم في الصفحة، ولا من تفعيل التحكم الصحيح، وقد يُحرمون تمامًا من تنفيذ مهام حاسمة مثل إرسال نموذج، إتمام عملية شراء، أو التنقل في قائمة.

المستخدمون ضعاف البصر الذين لا يستخدمون قارئ شاشة ولكن قد يقومون بتكبير الشاشة يعتمدون أيضًا على التركيز المرئي. عندما يقومون بالتكبير في جزء من الصفحة، تخبرهم حلقة التركيز المرئية أي عنصر نشط وتوجّه تفاعلهم.

الإعاقات المعرفية واضطرابات الانتباه تستفيد أيضًا من مؤشرات التركيز الواضحة. المستخدمون الذين لديهم اضطراب فرط الحركة وتشتت الانتباه (ADHD) أو صعوبات في الذاكرة غالبًا ما يفقدون إحساسهم بموقعهم في صفحة معقدة؛ يوفر مؤشر التركيز البارز مرساة بصرية موثوقة.

سيناريو واقعي ملموس: تخيّل مستخدمًا مصابًا بالتصلب المتعدد يتصفح موقع تجارة إلكترونية باستخدام لوحة المفاتيح فقط لأن استخدام الفأرة بدقة أصبح صعبًا. يتنقل عبر صفحة المنتج باستخدام Tab للوصول إلى زر "Add to Cart". إذا كان المطوّر قد أخفى حلقة التركيز، فلن يرى المستخدم أي إشارة إلى مكان التركيز. يضغط على Enter ولا يحدث شيء (لأن التركيز كان على عنصر غير تفاعلي) أو يتم تشغيل إجراء خاطئ. النتيجة هي الإحباط، والتخلي عن المهمة، وخسارة الإيرادات للشركة — وكل ذلك يمكن منعه عبر قاعدة CSS واحدة.

وبعيدًا عن الإعاقة، تفيد مؤشرات التركيز جميع المستخدمين في الحالات التي يكون فيها استخدام الفأرة غير مريح: المستخدمون المتقدمون الذين يتنقلون عبر اختصارات لوحة المفاتيح، مستخدمو الحواسيب المحمولة بدون فأرة خارجية، والمستخدمون الذين يملؤون نماذج طويلة. كما تحسّن مؤشرات التركيز المرئية تحسين محركات البحث (SEO) بشكل غير مباشر من خلال تشجيع استخدام HTML دلالي وترتيب Tab صحيح، وكلاهما تكافئه عناكب محركات البحث.

قواعد axe-core ذات الصلة

يتطلب معيار WCAG 2.4.7 إجراء اختبار يدوي لأن الأدوات الآلية لا يمكنها تحديد ما إذا كان مؤشر التركيز مرئيًا بشكل موثوق. يمكن لمحركات مثل axe-core وما شابهها اكتشاف وجود قاعدة CSS مثل outline: none، لكنها لا تستطيع تقييم النتيجة البصرية الفعلية عبر جميع السمات، وأنماط التباين العالي، ومحركات عرض المتصفحات. يوضّح ما يلي مشهد الاختبار:

• اختبار يدوي مطلوب — قمع focus-visible: لا يوفّر axe-core قاعدة مخصصة تشير بشكل قاطع إلى حالات فشل 2.4.7، لأن ذلك سيتطلب عرض الصفحة، والتنقل عبر كل عنصر باستخدام Tab، وإجراء تحليل تباين على مستوى البكسل لمؤشر التركيز — وهي مهمة تتجاوز التحليل الثابت أو على مستوى DOM. بدلًا من ذلك، يجب على المختبرين التنقل يدويًا عبر الصفحة باستخدام Tab والتأكد بصريًا من أن كل عنصر تفاعلي يُظهر تغيّرًا في التركيز.
• إشارة جزئية من css-orientation-lock وفحوصات الأنماط: بعض إعدادات axe-core تشير إلى وجود outline: 0 أو outline: none في ملفات الأنماط كتحذير لأفضل الممارسات، لكن هذا مجرد أسلوب تقريبي (heuristic)، وليس فحصًا قاطعًا للانتهاك، لأن القاعدة قد يتم تجاوزها بواسطة نمط تركيز مخصص صالح في مكان آخر ضمن سلسلة الأنماط.
• لماذا تعجز الأتمتة: قد يكون مؤشر التركيز مخفيًا فقط في حالات معينة (مثلًا عند فتح نافذة منبثقة)، أو فقط لأنواع معينة من العناصر، أو فقط في سمات ألوان معينة. تتطلب هذه الإخفاقات الشرطية وجود مختبر بشري يتنقل عبر كل عنصر تفاعلي في البيئة المعروضة فعليًا ويتأكد من الرؤية. يمكن لأدوات مثل axe DevTools Pro المساعدة عبر تمييز العناصر التي طُبّق عليها outline: none، لكن قرار الاجتياز/الفشل النهائي يجب أن يكون بشريًا.

كيفية الاختبار

1. فحص آلي مبدئي: شغّل axe DevTools (امتداد المتصفح أو CLI) أو Google Lighthouse على الصفحة. ابحث عن أي تحذيرات تتعلق بأفضل الممارسات أو ميزات تجريبية مرتبطة بأنماط التركيز. رغم أن هذه لا تؤكد بشكل قاطع وجود فشل في 2.4.7، إلا أنها تُظهر العناصر التي تستحق الفحص. في Lighthouse، تحقق من فئة "Accessibility" للعثور على النتائج المتعلقة بالتركيز. صدّر التقرير وسجّل جميع العناصر التفاعلية التي تم تمييزها.
2. اختبار التنقل بلوحة المفاتيح يدويًا باستخدام Tab: افصل الفأرة أو أبعدها. اضغط على Tab بشكل متكرر من أعلى الصفحة وتنقل عبر كل عنصر تفاعلي — الروابط، الأزرار، الحقول، القوائم المنسدلة، النوافذ المنبثقة (modals)، علامات التبويب، الأكورديونات، ومنتقيات التاريخ. عند كل توقف، تأكد من أن العنصر الذي عليه التركيز يمكن تمييزه بصريًا عن العناصر المجاورة غير المركّزة. سجّل أي عنصر لا ينتج عن وصول التركيز إليه أي تغيّر مرئي.
3. اختبار التنقل العكسي باستخدام Shift+Tab: استخدم Shift+Tab للتنقل للخلف عبر الصفحة وكرر الفحص البصري. بعض التطبيقات تكسر وضوح التركيز في اتجاه واحد فقط بسبب مشكلات في أولوية CSS.
4. اختبار NVDA + Firefox: افتح Firefox مع تشغيل NVDA. استخدم وضع التصفح (مفاتيح الأسهم) ثم انتقل إلى وضع النماذج (Enter) للتفاعل مع عناصر النماذج. تأكد من أن كل عنصر يعلن NVDA أنه في حالة تركيز يظهر أيضًا مؤشرًا مرئيًا على الشاشة — وهذا مفيد لاكتشاف التباينات بين تركيز تقنية المساعدة وتركيز المتصفح.
5. اختبار VoiceOver + Safari (على macOS/iOS): فعّل VoiceOver واستخدم Tab أو VO+Right Arrow للتنقل عبر العناصر التفاعلية. تحقق بصريًا من أن حلقة التركيز على الشاشة تطابق ما يعلنه VoiceOver.
6. اختبار JAWS + Chrome: استخدم JAWS في وضع المؤشر الافتراضي ثم وضع التطبيق. تنقل عبر عناصر التحكم التفاعلية باستخدام Tab وتأكد من ظهور مؤشر التركيز المرئي على كل عنصر يحصل على التركيز.
7. اختبار وضع التباين العالي: فعّل وضع التباين العالي في Windows (أو Increase Contrast في macOS) وكرر اختبار Tab. بعض مؤشرات التركيز تعتمد على ألوان تختفي في سمات التباين العالي؛ يجب أن يبقى المؤشر مرئيًا في هذه الأوضاع.
8. فحص CSS: افتح أدوات المطوّرين في المتصفح، اختر عنصرًا تفاعليًا، اجعله في حالة تركيز بالضغط على Tab حتى يصبح نشطًا، ثم افحص الأنماط المحسوبة. تحقق من عدم وجود قاعدة تضبط outline: none أو outline: 0 دون نمط تركيز تعويضي مكافئ. تحقق أيضًا من استخدام :focus-visible مقابل :focus لضمان تغطية التركيز الناتج عن لوحة المفاتيح.

كيفية الإصلاح

إزالة outline عالميًا بدون بديل — غير صحيح

<!-- CSS resets that remove all focus indicators globally -->
<style>
  * {
    outline: none; /* Removes focus ring from every element */
  }
</style>

<a href='/products'>View Products</a>
<button type='submit'>Buy Now</button>

إزالة outline عالميًا بدون بديل — صحيح

<!-- Remove the global outline: none reset.
     Provide a custom focus style that is visually clear. -->
<style>
  /* Respect users who prefer reduced motion */
  :focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
</style>

<a href='/products'>View Products</a>
<button type='submit'>Buy Now</button>
<!-- Now both elements show a high-contrast blue outline when focused via keyboard -->

زر مخصص مبني على div بدون نمط تركيز — غير صحيح

<!-- A div styled as a button, made focusable, but missing :focus CSS -->
<style>
  .fake-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #e00;
    color: #fff;
    cursor: pointer;
  }
  /* No :focus or :focus-visible rule defined */
</style>

<div class='fake-btn' tabindex='0' role='button'
     onclick='addToCart()' onkeydown='handleKey(event)'>
  Add to Cart
</div>

زر مخصص مبني على div بدون نمط تركيز — صحيح

<!-- Add :focus-visible to the custom component so keyboard
     users see a clear indicator when this element is focused -->
<style>
  .fake-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #e00;
    color: #fff;
    cursor: pointer;
  }
  .fake-btn:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 3px;
  }
</style>

<div class='fake-btn' tabindex='0' role='button'
     onclick='addToCart()' onkeydown='handleKey(event)'>
  Add to Cart
</div>
<!-- The yellow outline appears only on keyboard focus, not on mouse click -->

حلقة التركيز مخفية داخل طبقة نافذة منبثقة (modal overlay) — غير صحيح

<!-- Modal applies overflow:hidden and a stacking context that clips
     the default outline, making it invisible -->
<style>
  .modal-body {
    overflow: hidden; /* Clips outlines that extend beyond the element */
    border-radius: 8px;
  }
</style>

<div class='modal-body'>
  <button>Confirm Order</button>
  <button>Cancel</button>
</div>

حلقة التركيز مخفية داخل طبقة نافذة منبثقة (modal overlay) — صحيح

<!-- Use box-shadow instead of outline so it renders
     inside the stacking context and is never clipped -->
<style>
  .modal-body {
    overflow: hidden;
    border-radius: 8px;
  }
  .modal-body button:focus-visible {
    /* box-shadow is not clipped by overflow:hidden --
       it stays within the element's own box -->
    box-shadow: 0 0 0 3px #005fcc;
    outline: none; /* Remove default to avoid double ring */
  }
</style>

<div class='modal-body'>
  <button>Confirm Order</button>
  <button>Cancel</button>
</div>

الأخطاء الشائعة

• إضافة outline: none إلى CSS أساسي (reset) دون مراجعة العناصر التي يؤثر عليها. العديد من ملفات reset الشائعة (مثل الإصدارات الأقدم من normalize.css أو أدوات Bootstrap) تقمع حلقات التركيز عالميًا. احرص دائمًا على إضافة قاعدة صريحة لـ :focus-visible تعيد وضوح التركيز لمستخدمي لوحة المفاتيح.
• الاعتماد فقط على :focus عندما يكون :focus-visible أنسب — أو العكس. استخدام :focus فقط يطبّق المؤشر أيضًا عند النقر بالفأرة، مما قد يبدو غريبًا. استخدام :focus-visible فقط دون بديل :focus قد يترك المتصفحات الأقدم بدون أي مؤشر. اختبر في جميع المتصفحات المستهدفة.
• تطبيق outline: none داخل تجاوز (override) في سمة مكتبة مكوّنات دون فهم سلسلة الأنماط (cascade). يمكن لتجاوز واحد في ملف سمة أن يمحو بصمت مؤشرات التركيز لكل مكوّن يرث منه، بما في ذلك الويدجت من أطراف ثالثة.
• استخدام لون تركيز لا يملك تباينًا كافيًا مع العنصر أو خلفية الصفحة. إطار رمادي فاتح على خلفية بيضاء يضيف إطارًا من الناحية التقنية لكنه قد يكون غير ملحوظ. رغم أن 2.4.7 لا يفرض نسبة تباين محددة، فإن 2.4.11 يفعل ذلك — ومؤشرات التركيز ذات التباين المنخفض هي مصدر شائع لإخفاقات التدقيق حتى عندما يعتقد المطوّرون أنهم امتثلوا.
• ضبط overflow: hidden أو clip-path على حاوية، مما يقصّ الإطار الافتراضي للمتصفح. الحل هو الانتقال إلى مؤشرات تركيز تعتمد على box-shadow، والتي تُعرض داخل صندوق العنصر نفسه ولا تُقص بواسطة قواعد overflow في الحاوية الأم.
• نسيان مؤشرات التركيز على العناصر التفاعلية داخل مكوّنات SVG أو Canvas. تلميحات المخططات المخصصة، أزرار الأيقونات المبنية على SVG، وأدوات الرسم المبنية على canvas غالبًا لا تحتوي على أنماط تركيز أصلية. هذه تتطلب أدوار ARIA صريحة، و tabindex، و CSS باستخدام :focus-visible أو تغذية راجعة بصرية مدفوعة بجافاسكربت.
• إزالة وضوح التركيز فقط في CSS الخاص ببيئة الإنتاج (مثلًا عبر أداة post-processor أو خطوة في عملية البناء) مع تركه مرئيًا في بيئة التطوير. يؤدي هذا إلى اجتياز فريق التطوير لاختبارات الجودة المحلية بينما يتم شحن إمكانية وصول معطوبة للمستخدمين النهائيين.
• تطبيق مؤشر التركيز فقط على عنصر <a> وليس على عناصر role='link' من نوع span المستخدمة لروابط التنقل في تطبيقات SPA. كل عنصر يمكن الوصول إليه بلوحة المفاتيح — بغض النظر عن الوسم الأصلي — يحتاج إلى حالة تركيز مرئية.
• إخفاء حلقات التركيز فقط في عروض عرض معينة عبر media queries بافتراض أن مستخدمي الأجهزة المحمولة يلمسون الشاشة دائمًا. مستخدمو الأجهزة اللوحية مع لوحات مفاتيح Bluetooth والمستخدمون في الوضع الأفقي الذين يعتمدون على إدخال لوحة المفاتيح يُتركون بدون أي مؤشر تركيز.
• استخدام JavaScript لاستدعاء .blur() مباشرة بعد التركيز البرمجي لمنع ظهور حلقة التركيز. هذا خطأ جسيم يزيل وضوح التركيز تمامًا ولا يجب استخدامه أبدًا كاختصار تصميمي.

العلاقة مع لوائح إمكانية الوصول في تركيا

تضع التعميم الرئاسي 2025/10 في تركيا، المنشور في الجريدة الرسمية رقم 32933 بتاريخ 21 يونيو 2025، متطلبات ملزمة لإمكانية الوصول على الويب والهواتف المحمولة لمجموعة واسعة من الكيانات العاملة في تركيا. يفرض التعميم الالتزام بـ WCAG 2.2 على مستوى AA للمنظمات المشمولة، مما يجعل WCAG 2.4.7 Focus Visible متطلبًا قابلًا للتنفيذ مباشرة وليس مجرد توصية لأفضل الممارسات.

تشمل الكيانات التي يغطيها التعميم المؤسسات والهيئات العامة، منصات التجارة الإلكترونية، البنوك ومقدمي الخدمات المالية، المستشفيات والمنظمات الصحية، شركات الاتصالات التي لديها 200,000 مشترك أو أكثر، وكالات السفر، شركات النقل الخاصة، والمدارس الخاصة المرخّصة من قبل وزارة التربية الوطنية (MoNE). بالنسبة لجميع هذه المنظمات، فإن عدم توفير مؤشرات تركيز مرئية في واجهاتها الرقمية يُعد مسألة عدم امتثال تنظيمي، وليس مجرد قصور في سهولة الاستخدام.

يُعد Erişilebilirlik Logosu (شعار إمكانية الوصول)، الصادر عن وزارة الأسرة والخدمات الاجتماعية، علامة الشهادة الرسمية التي يمكن للكيانات المشمولة عرضها لإثبات الامتثال. يتطلب الحصول على شعار إمكانية الوصول اجتياز تدقيق رسمي وفق WCAG 2.2 مستوى AA. يعد WCAG 2.4.7 أحد معايير AA التي سيقيّمها المدققون، عادةً من خلال اختبار يدوي بلوحة المفاتيح كما هو موضح في قسم الاختبار أعلاه. لن تجتاز المنظمة التي يقوم موقعها بقمع حلقات التركيز أو يفشل في تنفيذ تركيز مرئي على المكوّنات المخصصة التدقيق المطلوب للحصول على الشعار.

بالنسبة لمنصات التجارة الإلكترونية التركية على وجه الخصوص، فإن وضوح التركيز له آثار تجارية مباشرة: المواقع القابلة للوصول تصل إلى قاعدة مستخدمين أوسع، بما في ذلك العملاء ذوي الإعاقات الحركية الذين يتسوقون حصريًا عبر لوحة المفاتيح أو أجهزة التبديل، كما أن الامتثال للتعميم الرئاسي 2025/10 يحمي المنظمات من الإجراءات الإدارية. إن بناء أنماط focus-visible في مكتبة المكوّنات منذ البداية — بدلًا من إعادة التهيئة بعد التدقيق — هو المسار الأكثر فعالية من حيث التكلفة للحفاظ على Erişilebilirlik Logosu والوفاء بالتزامات تركيا في مجال إمكانية الوصول.