WCAG 2.4.1: تجاوز الكتل

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

ينص معيار WCAG 2.4.1 Bypass Blocks على ما يلي: "يتوفر آلية لتجاوز كتل المحتوى التي تتكرر في صفحات ويب متعددة." عملياً، يعني هذا أن أي مجموعة من الروابط أو قوائم التنقل أو اللافتات أو كتل المحتوى الأخرى التي تظهر بشكل ثابت عبر صفحات متعددة يجب أن يكون لها طريقة تمكّن المستخدمين من تخطيها والانتقال مباشرة إلى المحتوى الفريد للصفحة الحالية.

أكثر تطبيق معترف به على نطاق واسع هو رابط تخطي التنقل — وهو عنصر رابط (anchor) يوضع كأول عنصر قابل للتركيز في الصفحة، ويرتبط بمنطقة المحتوى الرئيسي عبر معرّف جزء (fragment identifier) مثل #main-content. ومع ذلك، يقبل WCAG أيضاً آليات تجاوز أخرى، بما في ذلك مناطق المعالم (landmarks) المبنية بشكل صحيح (مثل عناصر HTML5 <main> و<nav> و<header> أو ما يعادلها في ARIA) وبنى العناوين التي تسمح لمستخدمي قارئات الشاشة بالقفز بين الأقسام.

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

تُعتبر الصفحة غير مستوفية لهذا المعيار عندما: لا يوجد رابط تخطي، ولا بنية معالم، ولا أي آلية أخرى؛ أو عندما يوجد رابط تخطي لكنه مخفي بشكل دائم عبر display:none أو visibility:hidden (مما يجعله غير قابل للتركيز)؛ أو عندما لا يوجد مرساة هدف لرابط التخطي في الـ DOM؛ أو عندما يكون الرابط موجوداً لكنه لا ينقل التركيز، مما يجبر مستخدمي لوحة المفاتيح على الاستمرار في التنقل عبر كل عنصر من عناصر التنقل. يقر WCAG باستثناء للصفحات التي لا تحتوي على كتلة متكررة — على سبيل المثال، مستند من صفحة واحدة بدون ترويسة تنقل — لكن هذا الاستثناء ضيق ونادراً ما ينطبق على مواقع الويب في العالم الحقيقي.

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

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

مستخدمو قارئات الشاشة من المكفوفين أو ضعاف البصر يعتمدون على مناطق المعالم والعناوين ليتعرفوا على بنية الصفحة ويقفزوا بين أقسامها. بينما توفر قارئات الشاشة الحديثة (JAWS وNVDA وVoiceOver) مفاتيح اختصار خاصة بها للتنقل بين المعالم والعناوين، فإن هذه الاختصارات لا تعمل إلا عندما تكون الصفحة مبنية بشكل صحيح. صفحة بدون معالم وبدون رابط تخطي تجبر على قراءة خطية لكل عنصر من الأعلى، بما في ذلك التنقل المتكرر، في كل مرة يتم فيها تحميل الصفحة.

فكّر في سيناريو واقعي: مواطن ضعيف البصر في تركيا يزور بوابة حكومية إلكترونية لتقديم إقرار ضريبي. تحتوي البوابة على شريط تنقل علوي يضم 18 رابطاً، ومسار تنقل (breadcrumb) يضم 4 روابط، وشريطاً جانبياً ثانوياً يضم 12 رابطاً — أي ما مجموعه 34 ضغطة Tab قبل الوصول إلى حقول النموذج. بدون آلية تجاوز، يجب على هذا المستخدم التنقل عبر العناصر الـ 34 في كل صفحة من صفحات العملية متعددة الخطوات. رابط تخطي مُنفّذ بشكل صحيح يقلل هذا إلى ضغطة مفتاح واحدة.

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

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

• bypass: تتحقق هذه القاعدة مما إذا كانت الصفحة توفر أي آلية لتجاوز كتل التنقل المتكررة. يفحص Axe الصفحة بحثاً عن وجود رابط تخطي يستهدف مرساة داخلية موجودة، وعن وجود أدوار معالم ARIA (role='main' وrole='navigation'، إلخ) أو عناصر معالم HTML5 (<main> و<nav> و<header> و<footer> و<aside>)، وعن سمات ARIA aria-label أو aria-labelledby التي تجعل المعالم المتعددة قابلة للتمييز. تشير القاعدة إلى وجود انتهاك عندما لا تكون أي من هذه الآليات موجودة. لاحظ أن هذه القاعدة تتطلب تحققاً يدوياً في بعض الحالات — على سبيل المثال، يمكن لـ axe اكتشاف وجود رابط تخطي لكنه لا يستطيع التأكد تلقائياً من أنه ينقل تركيز لوحة المفاتيح إلى الموقع الصحيح عند تفعيله.
• skip-link: تستهدف هذه القاعدة روابط التخطي تحديداً وتتحقق مما إذا كان عنصر الهدف المشار إليه بواسطة سمة href في رابط التخطي (مثل #main-content) موجوداً فعلياً في الـ DOM وقابلاً للوصول عبر لوحة المفاتيح. إذا كان رابط التخطي يشير إلى معرّف غير موجود، أو إذا كان عنصر الهدف غير قابل للتركيز (يفتقر إلى سمة tabindex عندما يكون عنصراً غير تفاعلي)، تشير القاعدة إلى وجود انتهاك. هذا يلتقط الخطأ الشائع المتمثل في إضافة رابط تخطي في HTML لكن مع نسيان إضافة سمة id المقابلة لعنصر المحتوى الرئيسي.
• tabindex: تشير هذه القاعدة إلى العناصر التي تحتوي على قيم tabindex أكبر من 0، والتي تنشئ ترتيب تبويب مخصصاً يختلف عن الترتيب الطبيعي في الـ DOM. بينما يُعد tabindex='0' مشروعاً وضرورياً لجعل العناصر غير التفاعلية قابلة للتركيز (مثل عنصر هدف رابط التخطي <div>)، فإن استخدام tabindex='1' وtabindex='2' وما إلى ذلك يربك تسلسل التبويب المتوقع عبر الصفحة بأكملها، مما قد يجعل آليات التجاوز غير متوقعة أو غير فعّالة. يمكن للأدوات الآلية اكتشاف وجود قيم tabindex إيجابية، لكن يجب على المختبِر البشري التحقق مما إذا كان ترتيب التبويب الناتج منطقياً وما إذا كان رابط التخطي لا يزال أول عنصر قابل للتركيز في التسلسل.

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

1. فحص آلي: شغّل axe DevTools (امتداد المتصفح) أو Lighthouse (أدوات مطوري Chrome > Lighthouse > Accessibility) على الصفحة. ابحث تحديداً عن الانتهاكات ضمن القواعد bypass وskip-link وtabindex. في axe DevTools، قم بتصفية النتائج حسب معرّفات هذه القواعد. في Lighthouse، تحقق من قسم "Navigation" في تدقيق إمكانية الوصول. دوّن أي عناصر "Needs Review" — إذ يضع axe علامة على بعض فحوصات التجاوز على أنها تتطلب تأكيداً يدوياً.
2. اختبار لوحة المفاتيح (جميع المتصفحات): افتح الصفحة في متصفح بدون تشغيل قارئ شاشة. اضغط على Tab مرة واحدة. تأكد من أن أول عنصر يتم تركيزه هو رابط تخطي (قد يظهر بصرياً في هذه اللحظة إذا كان خارج الشاشة سابقاً). اضغط Enter لتفعيل رابط التخطي. تأكد من أن تركيز لوحة المفاتيح قد انتقل إلى منطقة المحتوى الرئيسي — يجب أن تصل ضغطة Tab التالية إلى أول عنصر تفاعلي داخل المحتوى الرئيسي، وليس أول رابط في التنقل. إذا لم ينتقل التركيز، فإن رابط التخطي معطّل.
3. NVDA + Firefox: شغّل NVDA وافتح الصفحة في Firefox. اضغط على اختصار Insert+F7 لفتح قائمة العناصر (Elements List) والتحقق من المعالم. أو بدلاً من ذلك، اضغط على D للقفز بين مناطق المعالم وتأكد من وجود معلم main وأنه مُسمّى بوضوح. اضغط على H للتنقل حسب العناوين وتحقق من أن بنية العناوين تجعل أقسام الصفحة قابلة للتعرّف. انتقل باستخدام Tab إلى رابط التخطي وفعّله باستخدام Enter، ثم تأكد من أن NVDA يعلن عن محتوى من داخل منطقة المحتوى الرئيسي.
4. VoiceOver + Safari (macOS/iOS): فعّل VoiceOver (Command+F5 على Mac). استخدم الـ Rotor (Control+Option+U) لفتح قائمة المعالم وتحقق من ظهور مناطق معالم مسماة. انتقل باستخدام Tab إلى رابط التخطي واضغط Enter؛ تأكد من أن VoiceOver يقرأ المحتوى من منطقة المحتوى الرئيسي مباشرة بعد التفعيل. على iOS، استخدم إيماءة الـ Rotor للتبديل إلى المعالم (Landmarks) ومرّر بينها.
5. JAWS + Chrome: مع تشغيل JAWS، اضغط على Q للقفز مباشرة إلى معلم المحتوى الرئيسي. تحقق من أن JAWS يعلن عن الدخول إلى منطقة المحتوى الرئيسي. استخدم Insert+F3 لسرد المعالم وتأكد من وجود تسميات مناسبة. انتقل باستخدام Tab من بداية الصفحة وتحقق من أن رابط التخطي يُعلن عنه أولاً، مع اسم متاح مثل "Skip to main content".
6. التحقق من هدف التركيز: افحص قيمة href في رابط التخطي (مثل #main-content). استخدم أدوات مطوّر المتصفح للتأكد من أن عنصراً يحمل id='main-content' موجود في الـ DOM. إذا كان هذا العنصر <div> أو حاوية غير تفاعلية أخرى، فتأكد من أن لديه tabindex='-1' ليكون قابلاً للتركيز برمجياً دون إدخاله في ترتيب التبويب.

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

رابط تخطي مفقود — غير صحيح

<!-- Navigation appears first with no bypass mechanism -->
<div class='nav-wrapper'>
  <a href='/home'>Home</a>
  <a href='/about'>About</a>
  <a href='/services'>Services</a>
  <a href='/contact'>Contact</a>
</div>
<div class='content'>
  <h1>Welcome</h1>
  <p>Page content here.</p>
</div>

رابط تخطي مفقود — صحيح

<!-- Skip link is the first focusable element; visually hidden until focused -->
<a href='#main-content' class='skip-link'>Skip to main content</a>

<nav aria-label='Primary navigation'>
  <a href='/home'>Home</a>
  <a href='/about'>About</a>
  <a href='/services'>Services</a>
  <a href='/contact'>Contact</a>
</nav>

<!-- tabindex='-1' allows the div to receive programmatic focus without
     entering the natural tab order -->
<main id='main-content' tabindex='-1'>
  <h1>Welcome</h1>
  <p>Page content here.</p>
</main>

رابط تخطي مع هدف غير موجود — غير صحيح

<!-- The skip link exists but points to an ID that is not in the DOM -->
<a href='#content' class='skip-link'>Skip to main content</a>

<nav>...navigation links...</nav>

<!-- The id here is 'main', not 'content' — the skip link target is broken -->
<div id='main'>
  <h1>Page Title</h1>
</div>

رابط تخطي مع هدف غير موجود — صحيح

<!-- href value exactly matches the id of the target element -->
<a href='#main-content' class='skip-link'>Skip to main content</a>

<nav>...navigation links...</nav>

<!-- id matches the href fragment; tabindex='-1' ensures focus is received -->
<main id='main-content' tabindex='-1'>
  <h1>Page Title</h1>
</main>

رابط تخطي مخفي بشكل دائم — غير صحيح

<!-- display:none removes the element from the accessibility tree entirely -->
<a href='#main-content' style='display:none'>Skip to main content</a>

<!-- visibility:hidden also hides from screen readers and keyboard -->
<a href='#main-content' style='visibility:hidden'>Skip to main content</a>

رابط تخطي مخفي بشكل دائم — صحيح

<!-- CSS moves the link off-screen visually but keeps it in the tab order.
     On :focus, it becomes visible so sighted keyboard users can see it. -->
<style>
  .skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
  }
</style>

<a href='#main-content' class='skip-link'>Skip to main content</a>

عدم وجود بنية معالم — غير صحيح

<!-- Generic divs with no semantic role — screen readers cannot identify regions -->
<div class='header'>...logo and nav...</div>
<div class='sidebar'>...secondary links...</div>
<div class='page-body'>...main content...</div>
<div class='footer'>...footer links...</div>

عدم وجود بنية معالم — صحيح

<!-- HTML5 semantic elements expose landmark roles to assistive technologies.
     Multiple nav elements are distinguished with aria-label. -->
<header>
  <nav aria-label='Primary navigation'>...main nav links...</nav>
</header>
<aside aria-label='Related resources'>...secondary links...</aside>
<main id='main-content' tabindex='-1'>...main content...</main>
<footer>
  <nav aria-label='Footer navigation'>...footer links...</nav>
</footer>

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

• إخفاء رابط التخطي باستخدام display:none أو visibility:hidden بدلاً من تقنية CSS لإبعاده عن الشاشة، مما يزيله من العرض البصري ومن شجرة إمكانية الوصول، ويجعله غير فعّال تماماً لجميع المستخدمين.
• إضافة رابط تخطي مع href='#main-content' لكن دون إضافة سمة id='main-content' المطابقة على عنصر الهدف، مما يجعل الرابط لا يفعل شيئاً عند تفعيله.
• توجيه رابط التخطي إلى عنصر حاوية غير تفاعلي (مثل <div> أو <section>) دون إضافة tabindex='-1'، مما يعني أن المتصفحات ستمرير نافذة العرض لكنها لن تنقل تركيز لوحة المفاتيح إلى الهدف.
• وضع رابط التخطي في أي مكان غير كونه أول عنصر قابل للتركيز في الـ DOM — على سبيل المثال، بعد الشعار أو بعد أول رابط في التنقل — مما يُفشل الغرض منه لأن المستخدمين ما زال عليهم الضغط على Tab لتجاوز محتوى للوصول إليه.
• استخدام قيم tabindex إيجابية (مثل tabindex='1') في أي مكان في الصفحة، مما يعيد تنظيم ترتيب التبويب بطرق غير متوقعة وقد ينقل رابط التخطي بعيداً عن موضعه المتوقع كأول عنصر.
• إدراج معلم <nav> واحد غير مسمّى فقط عندما تحتوي الصفحة على مناطق تنقل متعددة (تنقل رئيسي، مسار تنقل، تنقل في التذييل)، مما يجعل من المستحيل على مستخدمي قارئات الشاشة التمييز بينها باستخدام اختصارات التنقل بين المعالم.
• الاعتماد فقط على بنية المعالم دون توفير رابط تخطي، على افتراض أن جميع مستخدمي قارئات الشاشة يعرفون ويستخدمون اختصارات المعالم — مستخدمو لوحة المفاتيح المبصرون الذين لا يستخدمون قارئات الشاشة لا يستفيدون من المعالم وحدها ويعتمدون على رابط تخطي مرئي.
• تغليف جسم الصفحة بالكامل في عنصر <main> واحد يتضمن التنقل والترويسات والتذييلات، بدلاً من قصر <main> على المحتوى الفريد للصفحة.
• استخدام role='navigation' على <div> يحتوي على التنقل دون توفير aria-label عندما توجد معالم تنقل متعددة، مما يجعل قارئات الشاشة تعلن فقط "navigation" دون أي طريقة لتمييز المناطق.
• تنفيذ رابط التخطي بشكل صحيح في نموذج HTML ثابت ثم فقدانه أثناء عملية التصيير بإطار عمل JavaScript (مثل React أو Angular أو Vue) لأن مكوّن رابط التخطي غير مضمَّن في مخطط (layout) الجذر أو يتم حذفه بشكل شرطي أثناء التهيئة على جانب العميل (client-side hydration).

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

تُقرّر التعميم الرئاسي 2025/10 في تركيا، المنشور في الجريدة الرسمية رقم 32933 بتاريخ 21 يونيو 2025، متطلبات إلزامية لإمكانية الوصول على الويب والهواتف المحمولة استناداً إلى معايير التوافق WCAG 2.1 مستوى AA وWCAG 2.2 مستوى A. يُعد WCAG 2.4.1 Bypass Blocks معياراً من مستوى A، مما يضعه ضمن أكثر المتطلبات أساسية بموجب التعميم — أي أنه يمثل خط الأساس الذي لا يجوز أن تنخفض عنه خدمات الكيانات المشمولة في المجال الرقمي.

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

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

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