WCAG 2.4.10: عناوين الأقسام

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

تنص إرشادات WCAG 2.4.10 — عناوين الأقسام (المستوى AAA) على ما يلي: "تُستخدم عناوين الأقسام لتنظيم المحتوى." يعني هذا أنه عندما تُقسَّم صفحة ويب أو مستند إلى عدة أقسام مميزة، يجب أن يكون لكل قسم عنوان يمكن تحديده برمجياً يصف موضوعه أو غرضه. الهدف ليس مجرد وجود نص منسق بصرياً يبدو كعنوان، بل استخدام وسم عناوين حقيقي ينقل البنية الهرمية لكل من المتصفحات وتقنيات المساعدة.

في HTML، يعني هذا استخدام عناصر العناوين الأصلية <h1> حتى <h6> بشكل مناسب. يجب أن تحمل الصفحة ذات الموضوع الرئيسي عنصراً من نوع <h1>، وأن تستخدم الأقسام الرئيسية <h2>، وأن تستخدم الأقسام الفرعية داخلها <h3>، وهكذا. يجب أن يعكس مستوى العنوان العمق المنطقي للمحتوى، لا أن يُختار بشكل اعتباطي لأسباب تتعلق بالتنسيق البصري. وعند استخدام ARIA، يكون الجمع بين role="heading" وaria-level مقبولاً أيضاً، رغم أن عناصر HTML الأصلية تظل مفضلة دائماً.

يُعتبر النجاح وفق هذا المعيار متحققاً عندما يكون لكل قسم محتوى مميز في الصفحة عنوان يصف بدقة ما يليه، ويكون هذا العنوان مميزاً دلالياً (وليس مجرد نص عريض أو كبير منسق بصرياً)، وتعكس هرمية العناوين تنظيم محتوى المستند بشكل منطقي. ويحدث الإخفاق عندما لا تحتوي أقسام المحتوى على أي عنوان، أو عندما تُتخطى مستويات العناوين بشكل اعتباطي (القفز من <h1> إلى <h4> دون سبب منطقي)، أو عندما يُستخدم نص منسق فقط بدلاً من عناصر عناوين صحيحة لتسمية قسم.

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

يُصنَّف هذا المعيار على أنه مستوى AAA، ما يعني أنه غير مطلوب لتحقيق الامتثال الأساسي لـ WCAG 2.2، لكنه يمثل أفضل الممارسات في مجال الإتاحة، والتي تحسن بشكل كبير تجربة مجموعة واسعة من المستخدمين.

لماذا يهم

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

فكر في مثال من الواقع: قد يحتوي موقع تجارة إلكترونية تركي يبيع الإلكترونيات على صفحة تفاصيل منتج بها أقسام تغطي مواصفات المنتج، وتقييمات العملاء، ومعلومات الشحن، وسياسة الإرجاع. إذا لم يكن لأي من هذه الأقسام عنصر عنوان، فلن يتمكن مستخدم كفيف يتنقل باستخدام NVDA على Firefox من القفز بينها. سيتعين عليه إما الاستماع إلى كل المحتوى أو استخدام استراتيجيات بحث قائمة على المحاولة والخطأ، مما يزيد بشكل كبير العبء المعرفي والوقت اللازم لإنجاز المهمة. مع عناوين <h2> صحيحة لكل قسم، يمكن للمستخدم نفسه الضغط على مفتاح H للقفز فوراً من قسم إلى آخر خلال ثوانٍ.

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

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

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

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

يتطلب معيار WCAG 2.4.10 إجراء اختبار يدوي ولا يمكن أتمتته بالكامل. فيما يلي سبب قصور الأدوات الآلية، وما يمكنها وما لا يمكنها اكتشافه:

• اختبار يدوي مطلوب — الاكتمال البنيوي: يمكن للأدوات الآلية مثل axe-core اكتشاف وجود أو غياب عناصر العناوين في الصفحة، ويمكنها الإشارة إلى مشكلات مثل تخطي مستويات العناوين (على سبيل المثال، القفز من <h1> إلى <h3>). ومع ذلك، لا يمكنها تحديد ما إذا كان محتوى الصفحة قد قُسِّم منطقياً إلى أقسام أو ما إذا كان العنوان يصف بدقة القسم الذي يقدمه. قد ترى الأداة هرمية عناوين صحيحة وتعتبر الفحص ناجحاً، بينما تحتوي الصفحة فعلياً على أربعة أقسام محتوى مميزة، ثلاثة منها بلا عناوين. إن الملاءمة الدلالية لموضع العنوان تتطلب مراجعاً بشرياً يفهم غرض المحتوى وبنيته.
• قاعدة axe-core — heading-order: تشير هذه القاعدة إلى الحالات التي تُتخطى فيها مستويات العناوين بطريقة تكسر المخطط المنطقي للمستند (على سبيل المثال، الانتقال مباشرة من <h1> إلى <h4>). ورغم أن هذا مؤشر جودة ذي صلة، فإن اجتياز هذه القاعدة لا يضمن الامتثال لـ 2.4.10، لأن القاعدة تتحقق فقط من الترتيب النسبي للعناوين الموجودة — ولا يمكنها تحديد ما إذا كان هناك عنوان مفقود من قسم يحتاج إليه.
• قاعدة axe-core — page-has-heading-one: تتحقق هذه القاعدة مما إذا كانت الصفحة تحتوي على عنصر واحد على الأقل من نوع <h1>، وهو متطلب بنيوي أساسي. مرة أخرى، فإن اجتياز هذا الفحص يعد إشارة إيجابية لكنه لا يؤكد الامتثال الكامل لـ 2.4.10، إذ يمكن أن تحتوي الصفحة على <h1> ومع ذلك يكون بها عدة أقسام غير معنونة أسفلها.
• لماذا الأتمتة الكاملة مستحيلة: يتطلب تحديد ما إذا كانت منطقة من المحتوى تشكل "قسماً" يستحق عنواناً فهماً لدلالات المحتوى وغرضه — وهي مهمة تتطلب حالياً حكماً بشرياً. لا يمكن لخوارزمية أن تميز بشكل موثوق بين فقرة مترابطة تتابع بشكل طبيعي ما يسبقها وبين منطقة موضوع جديدة فعلاً تستحق عنواناً خاصاً بها. لهذا السبب يُذكر معيار 2.4.10 دائماً على أنه يتطلب تقييماً يدوياً في أي تدقيق شامل.

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

1. فحص آلي باستخدام axe DevTools أو Lighthouse: ثبّت إضافة المتصفح axe DevTools (متاحة لـ Chrome وFirefox) وأجرِ فحصاً كاملاً للصفحة. راجع أي مشكلات متعلقة بـ heading-order وpage-has-heading-one. لاحظ أن فحصاً آلياً خالياً من الأخطاء لا يؤكد الامتثال لـ WCAG 2.4.10 — بل يقتصر فقط على الجزء القابل للأتمتة من الفحوصات. كما يعرض Lighthouse في أدوات مطوري Chrome مشكلات متعلقة بالعناوين ضمن تدقيق إمكانية الوصول؛ ابحث عن التحذيرات من نوع "Heading elements are not in a sequentially-descending order".
2. مراجعة المحتوى يدوياً — مخطط المستند: استخدم إضافة متصفح مثل HeadingsMap (متاحة لـ Chrome وFirefox) لإنشاء مخطط بصري لجميع عناصر العناوين في الصفحة. راجع هذا المخطط بشكل نقدي: هل يعكس بدقة بنية محتوى الصفحة؟ هل يمثل كل قسم مميز بعنوان؟ هل توجد أقسام محتوى مرئية على الصفحة لا تظهر في المخطط؟ إذا كانت الإجابة نعم، فإن هذه الأقسام تفتقر إلى عناوين وتفشل الصفحة في الامتثال لـ 2.4.10.
3. التنقل باستخدام قارئ الشاشة NVDA وFirefox: افتح الصفحة في Firefox مع تشغيل NVDA. اضغط على H للقفز إلى الأمام عبر العناوين وعلى Shift+H للعودة إلى الخلف. عند الوصول إلى كل عنوان، لاحظ ما إذا كان العنوان المُعلن يصف بدقة المحتوى الذي يليه. لاحظ أيضاً ما إذا كنت تصادف أي كتل كبيرة من المحتوى لا يُعلن أبداً أنها تحت عنوان. افتح قائمة العناصر في NVDA (NVDA+F7)، واختر علامة تبويب العناوين، وراجع قائمة العناوين الكاملة لاكتشاف الأقسام المفقودة أو المسمّاة بشكل خاطئ.
4. التنقل باستخدام قارئ الشاشة VoiceOver وSafari (macOS/iOS): على macOS، فعّل VoiceOver (Command+F5) وافتح الصفحة في Safari. استخدم VO+Command+H للتنقل عبر العناوين. على iOS، استخدم الدوّار (اسحب بإصبعين لضبطه على العناوين Headings) ثم اسحب للأسفل للتنقل عبر العناوين. تحقق من أن جميع أقسام المحتوى يمكن الوصول إليها عبر التنقل بالعناوين.
5. التنقل باستخدام قارئ الشاشة JAWS وChrome: في JAWS، اضغط على H للتنقل بين العناوين وافتح قائمة العناوين باستخدام Insert+F6. راجع القائمة للتحقق من الاكتمال والهرمية المنطقية. تأكد من أن العناوين لا تُستخدم لأغراض التنسيق فقط — يجب أن تظهر كعناوين فقط التسميات الحقيقية للأقسام.
6. فحص التنقل باستخدام لوحة المفاتيح فقط: باستخدام لوحة المفاتيح فقط، حاول التنقل عبر جميع الأقسام الرئيسية للصفحة دون استخدام العناوين. لاحظ عدد مرات الضغط على مفتاح Tab عبر العناصر التفاعلية للوصول إلى كل قسم. يعطي هذا فكرة عن العبء الواقع على مستخدمي لوحة المفاتيح عندما تكون بنية العناوين غير موجودة.

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

أقسام مُسمّاة بنص منسق فقط — غير صحيح

<div class='section'>
  <p class='section-title'>Product Specifications</p>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</div>

<div class='section'>
  <p class='section-title'>Customer Reviews</p>
  <p>This product exceeded my expectations.</p>
</div>

أقسام مُسمّاة بنص منسق فقط — صحيح

<!-- Using semantic heading elements makes sections navigable by screen readers -->
<section>
  <h2>Product Specifications</h2>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</section>

<section>
  <h2>Customer Reviews</h2>
  <p>This product exceeded my expectations.</p>
</section>

تخطي مستويات العناوين لأغراض التنسيق — غير صحيح

<h1>Annual Report 2024</h1>
<!-- h4 used here because it looks smaller visually, skipping h2 and h3 -->
<h4>Financial Overview</h4>
<p>Revenue grew by 12% this year...</p>
<h4>Regional Performance</h4>
<p>The Istanbul region led growth...</p>

تخطي مستويات العناوين لأغراض التنسيق — صحيح

<h1>Annual Report 2024</h1>
<!-- h2 used for major sections; CSS controls visual size, not heading level -->
<h2>Financial Overview</h2>
<p>Revenue grew by 12% this year...</p>
<h2>Regional Performance</h2>
<p>The Istanbul region led growth...</p>

عدم وجود عنوان لقسم رئيسي في الصفحة — غير صحيح

<main>
  <h1>Contact Us</h1>
  <form>
    <label for='name'>Name</label>
    <input type='text' id='name' name='name'>
    <label for='message'>Message</label>
    <textarea id='message' name='message'></textarea>
    <button type='submit'>Send</button>
  </form>
  <!-- This office locations section has no heading -->
  <div>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </div>
</main>

عدم وجود عنوان لقسم رئيسي في الصفحة — صحيح

<main>
  <h1>Contact Us</h1>
  <section>
    <h2>Send Us a Message</h2>
    <form>
      <label for='name'>Name</label>
      <input type='text' id='name' name='name'>
      <label for='message'>Message</label>
      <textarea id='message' name='message'></textarea>
      <button type='submit'>Send</button>
    </form>
  </section>
  <!-- Office locations section now has a descriptive heading -->
  <section>
    <h2>Our Offices</h2>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </section>
</main>

استخدام دور ARIA للعناوين بدون aria-level — غير صحيح

<!-- role=heading without aria-level defaults to level 2, which may be wrong -->
<div role='heading'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

استخدام دور ARIA للعناوين بدون aria-level — صحيح

<!-- Native HTML is strongly preferred; if ARIA is used, aria-level must be explicit -->
<!-- Preferred: -->
<h2>Shipping Policy</h2>
<p>Orders are shipped within 2 business days...</p>

<!-- Acceptable when native heading cannot be used: -->
<div role='heading' aria-level='2'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

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

• استخدام أصناف CSS مثل .title أو .section-header على عناصر <p> أو <div> بدلاً من عناصر العناوين الفعلية <h1>–<h6>: التنسيق البصري وحده لا ينقل البنية إلى تقنيات المساعدة. يجب أن يكون العنوان عنصراً حقيقياً من عناصر العناوين أو يحمل دور ARIA صالحاً للعناوين مع مستوى محدد صراحة.
• اختيار مستويات العناوين بناءً على حجم الخط بدلاً من هرمية المستند: اختيار <h4> لأنه يظهر بالحجم البصري المرغوب، بينما يجب منطقياً أن يكون <h2>، يكسر مخطط المستند ويُربك مستخدمي قارئ الشاشة الذين يسمعون "عنوان مستوى 4" دون أي مستوى 2 أو 3 يسبقه.
• تطبيق خصائص font-size أو font-weight لتصغير حجم <h1> بصرياً بدلاً من استخدام عنصر عنوان بمستوى أدنى: يؤدي هذا إلى عدم تطابق بين الهرمية البصرية والهرمية الدلالية؛ استخدم CSS للتحكم في الحجم ومستويات العناوين الأصلية لنقل البنية.
• إغفال العناوين من أقسام المحتوى المحمّلة ديناميكياً (مثل لوحات التبويب، أو مربعات الحوار المنبثقة، أو النتائج المحمّلة عبر AJAX): غالباً ما يفتقر المحتوى الجديد الذي يُحقن في الصفحة إلى بنية عناوين. يجب أن يتضمن كل قسم يُعرض ديناميكياً عنواناً مناسباً حتى لا يُترك المستخدمون الذين يتنقلون بالعناوين في "جزيرة محتوى" بلا تسمية.
• استخدام <h1> واحد فقط لعنوان الصفحة دون عناوين أخرى في صفحة تحتوي على خمسة أقسام محتوى مميزة أو أكثر: وجود عنصر <h1> واحد يفي بمتطلبات الفحوصات الآلية لكنه لا يحقق معيار 2.4.10 إذا كانت الأقسام الرئيسية اللاحقة غير معنونة.
• تضمين العناوين داخل عناصر <button> أو <a>: يؤدي وضع عنوان داخل عنصر تفاعلي إلى أدوار متضاربة لتقنيات المساعدة ويُعد HTML غير صالح. يجب أن تُستخدم العناوين لتسمية أقسام المحتوى، لا عناصر التحكم التفاعلية.
• استخدام role='heading' دون تحديد aria-level: المستوى الضمني الافتراضي في ARIA هو 2، وقد لا يتطابق مع بنية المستند المقصودة وسينتج عنه مخطط غير صحيح بصمت إذا كان القسم في مستوى مختلف.
• إضافة عناوين زخرفية أو مكررة — مثل تكرار عنوان الصفحة كعنصر <h2> داخل كل بطاقة محتوى — مما يخلق ضوضاء في العناوين دون قيمة تنقلية ذات معنى: يجب أن تصف العناوين بشكل فريد ودقيق القسم الذي تقدمه؛ فالعناوين المكررة تقلل من فائدة التنقل بالعناوين لمستخدمي قارئ الشاشة.
• إخفاء العناوين بصرياً باستخدام display:none أو visibility:hidden في محاولة لتوفير بنية خاصة بقارئ الشاشة فقط: تخفي هذه خصائص CSS العنصر أيضاً عن تقنيات المساعدة. استخدم تقنية الإخفاء البصري القياسية (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);) إذا كان يجب أن يكون العنوان موجوداً في شجرة إمكانية الوصول دون أن يكون مرئياً على الشاشة.
• عدم تحديث بنية العناوين عند إعادة تنظيم محتوى الصفحة أثناء إعادة التصميم: غالباً ما تُترك العناوين التي أضيفت أثناء التطوير الأولي دون تحديث عندما يُعاد ترتيب أقسام المحتوى أو دمجها أو استبدالها. يجب أن تكون مراجعات العناوين جزءاً من أي دورة مراجعة للمحتوى أو التصميم، لا إصلاحاً لمرة واحدة في مجال الإتاحة.

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

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

يُعد معيار WCAG 2.4.10 — عناوين الأقسام معياراً من المستوى AAA. وهذا يعني أنه ليس من بين المعايير الدنيا المطلوبة قانوناً بموجب التعميم، الذي يفرض الامتثال في المستويين A وAA على الكيانات المشمولة. ومع ذلك، فإن الهدف الأوسع للتعميم هو ضمان وصول رقمي فعّال لجميع المستخدمين، وتُعترف معايير المستوى AAA مثل 2.4.10 صراحةً بأنها تمثل أفضل الممارسات في مجال الإتاحة.

بالنسبة للكيانات المشمولة — وخاصة المؤسسات العامة، والبنوك، والمستشفيات، ومزودي خدمات الاتصالات الكبار — فإن تطبيق معيار WCAG 2.4.10 يُظهر التزاماً بالإتاحة يتجاوز الحدود الدنيا التنظيمية. عملياً، تُعد هياكل العناوين المنظمة جيداً أيضاً شرطاً مسبقاً لعدة معايير نجاح من المستوى AA (مثل 1.3.1 المعلومات والعلاقات و2.4.6 العناوين والتسميات)، ما يعني أن المنظمات التي تستهدف الامتثال الكامل للمستوى AA ستقترب بشكل طبيعي من الامتثال لـ 2.4.10 كجزء من هذا الجهد.

ستستفيد الخدمات المتخصصة الموجهة للمستخدمين ذوي الإعاقة، أو الخدمات الرقمية التي تقدمها المؤسسات العامة لفئات سكانية متنوعة تشمل كبار السن، والمستخدمين ذوي الإعاقات الإدراكية، أو مستخدمي تقنيات المساعدة، بشكل خاص من التطبيق الكامل لمعيار 2.4.10. إن التركيز المتزايد في تركيا على خدمات الحكومة الرقمية (e-devlet) وتوسع التجارة الإلكترونية يجعل بنية المحتوى القوية ليس فقط متطلباً من متطلبات الإتاحة، بل أولوية في مجالي سهولة الاستخدام وإدارة المخاطر القانونية.

تضع المنظمات في تركيا التي تحصل طوعاً على شهادة الامتثال لـ WCAG 2.2 في المستوى AAA — بما في ذلك 2.4.10 — نفسها في موقع الريادة في مجال الإتاحة، مما يدعم الثقة بالعلامة التجارية، ويقلل من مخاطر التقاضي، ويوسع جمهورها المحتمل ليشمل ما يُقدّر بـ 8.5 مليون شخص من ذوي الإعاقة في تركيا وفقاً لتقارير معهد الإحصاء التركي (TÜİK).