WCAG 2.4.13: مظهر التركيز

ماذا تعني هذه القاعدة

المعيار WCAG 2.4.13 الخاص بمظهر التركيز هو معيار من المستوى AAA تم تقديمه في WCAG 2.2 ويضع متطلبات دقيقة وقابلة للقياس للمظهر البصري لمؤشرات تركيز لوحة المفاتيح. بينما يضمن المعيار ذو المستوى الأدنى 2.4.11 (التركيز غير محجوب، مستوى AA) أن العنصر الذي عليه التركيز غير مخفي بالكامل، و2.4.7 (التركيز مرئي، مستوى AA) يطلب ببساطة وجود أي مؤشر تركيز، فإن 2.4.13 يذهب أبعد من ذلك من خلال تحديد مدى وضوح هذا المؤشر.

للاجتياز وفق هذا المعيار، يجب أن يحقق مؤشر تركيز لوحة المفاتيح جميع الشروط التالية:

• المساحة الدنيا: يجب أن يكون لمؤشر التركيز مساحة لا تقل عن محيط المكوّن غير المركّز مضروبًا في 2 بكسل CSS. عمليًا، بالنسبة لزر مستطيل نموذجي، يعني هذا أن مخطط التركيز يجب أن تكون مساحته مساوية أو أكبر من محيط الزر مضروبًا في 2px — حلقة تركيز بسماكة لا تقل عن 2px حول الحدود بالكامل تُعد مستوفية للشرط.
• نسبة التباين لمؤشر التركيز: يجب أن تكون البكسلات التي تشكل مؤشر التركيز ذات نسبة تباين لا تقل عن 3:1 بين حالتي التركيز وعدم التركيز. لذا إذا كان للزر خلفية بيضاء في حالته الافتراضية، فيجب أن يكون إطار التركيز المرسوم حوله ذا تباين لا يقل عن 3:1 مقابل تلك الخلفية البيضاء.
• عدم تقليل التباين للمحتوى المحاط: يجب ألا يقلل مؤشر التركيز تباين النص أو أي محتوى آخر داخل المكوّن الذي عليه التركيز إلى أقل من 4.5:1 (للنص تحت 18pt / 14pt عريض) أو 3:1 (للنص الكبير والمحتوى غير النصي).

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

تحدد مواصفة WCAG استثناءً واحدًا ملحوظًا: إذا كان مؤشر التركيز الافتراضي للمتصفح (الافتراضي لوكيل المستخدم) يستوفي المتطلبات، فلا يحتاج المؤلف إلى إضافة نمط مخصص. ومع ذلك، تختلف القيم الافتراضية للمتصفحات بشكل كبير — فالمتصفحات المبنية على Chromium توفر عادةً مخططًا أزرق، بينما قد يعرض Safari حلقة تفتقر إلى التباين الكافي في بعض مخططات الألوان. ينبغي على المؤلفين التحقق من أن المؤشر الافتراضي يستوفي العتبة أو توفير نمط مخصص قوي.

ينطبق هذا المعيار على جميع المكوّنات التفاعلية والقابلة للتركيز: الروابط، الأزرار، حقول النماذج، قوائم select، مربعات الاختيار، أزرار الاختيار، مكوّنات الواجهة المخصصة المبنية بأدوار ARIA، وأي عنصر تم جعله قابلًا للتركيز عبر tabindex. كما ينطبق على مؤشرات التركيز التي يتم إنشاؤها بالكامل عبر CSS على العناصر الكاذبة أو عبر تغييرات الفئات التي يتحكم فيها JavaScript.

لماذا يهم

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

مستخدمو لوحة المفاتيح فقط — بما في ذلك الأشخاص ذوو الإعاقات الحركية مثل الرعاش أو الشلل أو إصابات الإجهاد المتكرر — يعتمدون بالكامل على لوحة المفاتيح للتنقل. بالنسبة لهؤلاء المستخدمين، فإن مؤشر التركيز غير المرئي أو شبه المرئي ليس مجرد إزعاج؛ بل يجعل الواجهة بأكملها غير قابلة للاستخدام. وفقًا لمنظمة الصحة العالمية، يعيش حوالي 1.3 مليار شخص مع شكل من أشكال الإعاقة، وتمثل الإعاقات الحركية إحدى أكبر الفئات بين الأشخاص الذين يتجنبون استخدام الفأرة أو لا يمكنهم استخدامها.

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

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

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

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

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

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

يتطلب المعيار WCAG 2.4.13 اختبارًا يدويًا لأن الأدوات الآلية لا يمكنها تقييم حجم وتباين مؤشر التركيز بالكامل في كل سياق عرض محتمل للمتصفح. لا يحتوي axe-core على قاعدة آلية واحدة تشير مباشرة إلى حالات الفشل في 2.4.13. الأسباب تقنية:

• لماذا الأتمتة غير كافية: يتطلب حساب المساحة البكسلية الدقيقة لمؤشر التركيز محاكاة تركيز لوحة المفاتيح على كل عنصر تفاعلي، وقياس هندسة المخطط المرسوم (التي تعتمد على المتصفح ونظام التشغيل ومستوى التكبير وCSS)، وحساب نسبة التباين لبكسلات المؤشر مقابل جيرانها، والتحقق من أن أياً من هذه لا ينتهك متطلب تباين المحتوى المحاط. لا يوجد محرك إمكانية وصول آلي حاليًا ينفذ جميع هذه الخطوات بشكل موثوق عبر جميع المكوّنات. يمكن لـ axe-core الإشارة إلى غياب أي نمط تركيز (مرتبط بـ 2.4.7) لكنه لا يستطيع قياس ما إذا كان النمط الموجود يستوفي حدود المساحة والتباين في 2.4.13.
• تغطية جزئية عبر قواعد متعلقة بالتركيز: تتحقق قاعدة focus-visible في axe-core مما إذا كانت العناصر تحتوي على مؤشر تركيز مرئي من الأساس. إذا كان لدى عنصر ما outline: none أو outline: 0 دون أي مؤشر بصري بديل، فستشير هذه القاعدة إليه. ومع ذلك، فإن اجتياز هذه القاعدة لا يضمن الامتثال لـ 2.4.13 — فقد يكون للعنصر مخطط مرئي تقنيًا لكنه لا يزال رفيعًا جدًا أو منخفض التباين.
• الاختبار اليدوي هو الطريقة الحاسمة: يجب على المختبرين فحص كل مكوّن تفاعلي بصريًا في حالة التركيز، وقياس أو تقدير أبعاد المخطط، والتحقق من نسب التباين باستخدام محلل تباين الألوان. لهذا السبب تسرد WCAG المعيار 2.4.13 كمعيار يتطلب اختبارًا يدويًا فقط لأغراض axe-core.

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

1. فحص آلي (إشارة جزئية فقط): شغّل axe DevTools أو Lighthouse على الصفحة. ابحث عن أي حالات فشل متعلقة بـ focus-visible أو focus-order-semantics. رغم أن هذه لن تشير مباشرة إلى انتهاكات 2.4.13، إلا أنها قد تُظهر عناصر تم قمع أنماط التركيز فيها بالكامل، وهو فشل أساسي مسبق. في Chrome DevTools، افتح لوحة Accessibility واستخدم وضع الفحص "Tab" للتنقل بين العناصر القابلة للتركيز.
2. اختبار تنقل بصري بلوحة المفاتيح: افصل الفأرة أو ضعها جانبًا. اضغط على Tab للتحرك عبر كل عنصر تفاعلي في الصفحة. لكل عنصر عليه التركيز، افحص مؤشر التركيز بصريًا. اسأل نفسك: هل هناك حلقة أو مؤشر آخر مرئي بوضوح؟ هل يبدو بسماكة لا تقل عن 2px؟ هل يتباين بقوة مع الخلفية المحيطة؟ دوّن أي عناصر تتردد عندها أو تواجه صعوبة في رؤية موضع التركيز.
3. قياس التباين: استخدم WebAIM Contrast Checker أو أداة سطح المكتب Colour Contrast Analyser. مع وجود التركيز على مكوّن ما، التقط لقطة شاشة. خذ عينة من لون بكسلات مؤشر التركيز ولون الخلفية المجاورة مباشرة له. تحقق من أن نسبة التباين لا تقل عن 3:1.
4. قياس الأبعاد: استخدم أدوات المطور في المتصفح (Chrome أو Firefox). اختر عنصرًا عليه التركيز وافحص أنماطه المحسوبة. تحقق من outline-width وoutline-offset وأي box-shadow يُستخدم كحلقة تركيز. اضرب محيط العنصر (2 × العرض + 2 × الارتفاع) في 2px لحساب المساحة الدنيا. تحقق من أن المساحة المرسومة للمؤشر تساوي أو تتجاوز هذه القيمة.
5. اختبار قارئ الشاشة + لوحة المفاتيح (NVDA + Firefox): افتح الصفحة في Firefox مع تشغيل NVDA. تنقل باستخدام Tab ومفاتيح الأسهم. تأكد من أن مؤشر التركيز البصري يتحرك بالتزامن مع التركيز الذي يعلنه NVDA. أولِ اهتمامًا خاصًا للأدوات المخصصة (مثل الشرائح، النوافذ المنبثقة، الأكورديون) حيث قد تتم إدارة التركيز عبر JavaScript.
6. VoiceOver + Safari (macOS/iOS): فعّل VoiceOver باستخدام Command + F5. استخدم Tab للتنقل بين العناصر التفاعلية. تحقق من أن مؤشر VoiceOver (الصندوق ذو المخطط الأسود) لا يحل محل مؤشر تركيز CSS المناسب — يجب أن توفر الصفحة نفسها مؤشرًا مستقلًا.
7. اختبار وضع التباين العالي: على Windows، فعّل وضع التباين العالي (الإعدادات → سهولة الوصول → التباين العالي). أعد تحميل الصفحة وكرر اختبار التنقل بلوحة المفاتيح. بعض أنماط تركيز CSS يتم تجاوزها بواسطة نظام التشغيل في وضع التباين العالي؛ تحقق من أن مؤشرًا مرئيًا لا يزال يظهر. استخدم استعلام الوسائط CSS forced-colors: active لضبط الأنماط بشكل مشروط عند الحاجة.

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

إزالة المخطط الافتراضي للمتصفح — غير صحيح

<!-- Many stylesheets globally suppress the default focus outline -->
<style>
  * {
    outline: none; /* Removes ALL focus indicators site-wide */
  }
  a:focus, button:focus {
    outline: 0; /* Redundant removal; no replacement provided */
  }
</style>
<button>Submit Payment</button>

إزالة المخطط الافتراضي للمتصفح — صحيح

<!-- Remove the default only when providing a superior custom indicator -->
<style>
  /* Only suppress default outline when :focus-visible applies, then provide a strong replacement */
  :focus-visible {
    outline: 3px solid #0057b8; /* 3px ensures area requirement is met for typical elements */
    outline-offset: 2px;       /* Offset separates indicator from element edge for clarity */
  }
  /* Respect forced-colors (Windows High Contrast) by using system keywords */
  @media (forced-colors: active) {
    :focus-visible {
      outline: 3px solid ButtonText;
    }
  }
</style>
<button>Submit Payment</button>

حلقة تركيز منخفضة التباين على خلفية ملوّنة — غير صحيح

<style>
  .cta-button {
    background-color: #0057b8;
    color: #ffffff;
  }
  .cta-button:focus {
    outline: 2px solid #3399ff; /* Light blue outline on dark blue background: contrast ratio ~1.4:1 — fails */
  }
</style>
<button class='cta-button'>Book Now</button>

حلقة تركيز منخفضة التباين على خلفية ملوّنة — صحيح

<style>
  .cta-button {
    background-color: #0057b8;
    color: #ffffff;
  }
  .cta-button:focus-visible {
    /* White outline contrasts strongly against the dark blue button (contrast ~8:1) */
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    /* A dark offset box-shadow behind the white ring ensures contrast against light page backgrounds */
    box-shadow: 0 0 0 5px #0057b8;
  }
</style>
<button class='cta-button'>Book Now</button>

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

<style>
  .tab-item { cursor: pointer; padding: 12px 20px; }
  /* No :focus or :focus-visible style defined for custom tab */
</style>
<div role='tab' tabindex='0' class='tab-item'>Reservations</div>

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

<style>
  .tab-item {
    cursor: pointer;
    padding: 12px 20px;
    border-radius: 4px;
  }
  /* Explicit :focus-visible style — outline-width 3px with offset meets area threshold */
  .tab-item:focus-visible {
    outline: 3px solid #d4550a; /* 3:1+ contrast against white background */
    outline-offset: 3px;
  }
</style>
<div role='tab' tabindex='0' class='tab-item'>Reservations</div>

استخدام box-shadow رفيع كمؤشر تركيز — غير صحيح

<style>
  .form-input:focus {
    outline: none;
    /* 1px box-shadow spread: likely too small in area for most input sizes */
    box-shadow: 0 0 0 1px #005fcc;
  }
</style>
<input type='text' class='form-input' placeholder='Your email' />

استخدام box-shadow رفيع كمؤشر تركيز — صحيح

<style>
  .form-input:focus-visible {
    outline: none;
    /*
      3px spread provides sufficient area around a typical 300px-wide input.
      #005fcc on white background yields ~5.9:1 contrast — passes both 2.4.13 (3:1) and 1.4.3 (4.5:1).
    */
    box-shadow: 0 0 0 3px #005fcc;
  }
</style>
<input type='text' class='form-input' placeholder='Your email' />

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

• استخدام outline: none في CSS reset دون توفير أي مؤشر تركيز بديل. العديد من ملفات CSS reset الشائعة (مثل الإصدارات الأقدم من Normalize.css وملفات reset المخصصة) تزيل المخططات بشكل شامل. احرص دائمًا على إقران الإزالة باستبدال :focus-visible يستوفي متطلبات الحجم والتباين.
• توفير نمط تركيز فقط لـ :focus وليس لـ :focus-visible، مما يؤدي إلى ظهور حلقات تركيز عند النقر بالفأرة على الأزرار تزعج مستخدمي الفأرة المبصرين — ما يدفع المطورين إلى إزالتها تمامًا بدلًا من استخدام تقسيم الفئة الكاذبة الصحيح.
• اختيار لون حلقة تركيز يطابق تقريبًا لون خلفية المكوّن. على سبيل المثال، حلقة باللون الأزرق الفاتح #99ccff على خلفية بيضاء #ffffff لها نسبة تباين تقارب 1.5:1، وهي أقل بكثير من المطلوب 3:1.
• استخدام outline-width: 1px على مكوّنات صغيرة مثل أزرار الأيقونات أو مربعات الاختيار. حلقة بسماكة 1px حول أيقونة بحجم 24×24px لها مساحة تقارب 96 بكسل مربع، لكن المساحة الدنيا المطلوبة لعنصر 24×24 هي (24+24+24+24) × 2 = 192 بكسل مربع — أي سماكة 2px بالضبط. مخطط بسماكة 1px يفشل في هذا الحساب.
• نسيان اختبار مظهر التركيز على أدوات ARIA المخصصة مثل role='combobox' أو role='listbox' أو role='slider'. غالبًا ما تحتوي هذه المكوّنات على تركيز يُدار عبر JavaScript يتجاوز الفئات الكاذبة الأصلية في CSS ما لم تتم معالجته صراحة.
• تطبيق نمط تركيز فقط على وسوم a وbutton مع إهمال input وselect وtextarea وأي عنصر يحتوي على tabindex='0'.
• تجاوز أنماط التركيز في عمق مكتبة مكوّنات أو أداة طرف ثالث دون إدراك أن التجاوز يزيل المؤشر المرئي. من الجناة الشائعين مجموعات واجهة المستخدم مثل Bootstrap 4 (التي تضبط box-shadow على توهج خفيف) والتي قد لا تستوفي عتبة 2.4.13.
• عدم اختبار مظهر التركيز في وضع التباين العالي على Windows. بعض تقنيات المخطط وbox-shadow في CSS تظهر غير مرئية في وضع التباين العالي. استخدم كتلة @media (forced-colors: active) لضمان وجود بديل مرئي يعتمد على ألوان النظام.
• استخدام outline-offset بقيمة سالبة كبيرة جدًا لنقل المخطط داخل حد العنصر. يمكن أن يؤدي ذلك إلى تداخل المؤشر مع خلفية العنصر، مما يقلل التباين الفعلي إلى أقل من 3:1.
• افتراض أن مؤشر التركيز على حاوية الأب يكفي للعناصر التفاعلية الفرعية. يجب أن يستوفي كل عنصر قابل للتركيز المعيار بشكل مستقل؛ فصف مميز في جدول لا يفي بالمتطلب لرابط داخل خلية في ذلك الصف.

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

تضع التعميم الرئاسي التركي 2025/10، المنشور في الجريدة الرسمية رقم 32933 بتاريخ 21 يونيو 2025، متطلبات ملزمة لإمكانية الوصول على الويب والهواتف المحمولة لمجموعة واسعة من الكيانات العاملة في تركيا. يعتمد التعميم WCAG 2.2 كمعيار مرجعي تقني ويفرض الالتزام بمستوى AA للكيانات المشمولة. معيار WCAG 2.4.13 الخاص بمظهر التركيز هو معيار من المستوى AAA وبالتالي لا يُفرض مباشرة من قبل التعميم كجزء من الامتثال القياسي.

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

هناك أسباب عملية وسمعية للكيانات التركية المشمولة لتطبيق 2.4.13 طوعًا. تخدم البنوك ومقدمو الخدمات المالية، على وجه الخصوص، عملاء ذوي إعاقات حركية يعتمدون على التنقل بلوحة المفاتيح لإجراء المعاملات الآمنة. بوابة الخدمات المصرفية الإلكترونية لبنك تركي تستوفي 2.4.13 لا تتجاوز فقط المتطلبات التنظيمية، بل تقلل أيضًا من مخاطر أخطاء المستخدم وتُظهر مسؤولية اجتماعية للشركة. وبالمثل، يجب على المستشفيات وبوابات الرعاية الصحية التي يحجز فيها المرضى المواعيد أو يصلون إلى السجلات الطبية أن تضمن أن جميع المستخدمين — بما في ذلك المرضى المسنين الذين يعانون من ضعف التحكم الحركي الدقيق أو ضعف البصر — يمكنهم التنقل في تلك الواجهات بثقة.

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

بالنسبة للمنظمات التي تسعى إلى تحقيق امتثال كامل لمستوى AAA في WCAG 2.2 — سواء بدافع متطلبات الشراء أو التصدير إلى أسواق الاتحاد الأوروبي الخاضعة لقانون إمكانية الوصول الأوروبي، أو سياسات إمكانية الوصول الداخلية — فإن تطبيق 2.4.13 هو مكوّن ضروري. يوفر حزمة Accsible's overlay SDK ميزات قابلة للتهيئة لتعزيز التركيز يمكن أن تساعد المنظمات على إظهار مؤشرات تركيز قوية ومتوافقة عبر واجهاتها، مكملةً إصلاحات CSS على مستوى المؤلف الموضحة في هذه المقالة.