WCAG 1.3.6: تحديد الغرض

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

\n

WCAG 1.3.6 — تحديد الغرض هو معيار من المستوى AAA ضمن المبدأ الأول (قابل للإدراك) يوسّع متطلبات البنية والدلالات القائمة إلى مستوى أدق من التفصيل. على وجه التحديد، يتطلب أن يكون غرض كل مكوّن من مكوّنات واجهة المستخدم، وكل أيقونة، وكل منطقة، وبعض حقول الإدخال قابلاً للتحديد برمجياً — أي أن المعلومات الدلالية تكون مكشوفة بطريقة يمكن للمتصفحات، وملحقات المتصفح، وتقنيات المساعدة قراءتها والتصرف بناءً عليها.

\n

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

\n

من الناحية العملية، تجتاز الصفحة معيار 1.3.6 عندما تستخدم عناصر معالم HTML5 (مثل <header> و<nav> و<main> و<aside> و<footer> و<section>)، وتطبّق أدوار معالم ARIA المناسبة عندما لا تُستخدم عناصر المعالم، وتكشف عن غرض الأيقونات ومكوّنات واجهة المستخدم غير النصية الأخرى عبر أسماء أو أدوار يمكن الوصول إليها، وحيثما كان ذلك مناسباً تستخدم رموز غرض موحّدة مثل تلك المعرّفة في مواصفة W3C Personalization Semantics (المعروفة سابقاً باسم مقترح COGA Semantics)، على سبيل المثال عبر مفردات السمة aui-.

\n

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

\n\n

لماذا يهم

\n

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

\n

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

\n

المستخدمون ذوو الإعاقات الحركية الذين يعتمدون على الوصول عبر المفاتيح (switch access) أو أدوات التحكم الصوتي يستفيدون أيضاً بشكل كبير، لأن الأدوات الواعية بالغرض يمكنها إنشاء طبقات اختصارات أو خرائط أوامر صوتية فقط لعناصر التحكم التي تكون وظيفتها قابلة للقراءة آلياً. كما يستفيد المستخدمون المكفوفون الذين يتفاعلون عبر قارئات الشاشة من مناطق معالم ذات تسميات واضحة، مما يسمح لهم بالقفز مباشرة إلى محتوى <main> أو تخطي التنقل المتكرر. ويستفيد المستخدمون ضعاف البصر الذين يستخدمون تكبير المتصفح أو أوراق أنماط مخصّصة من بنية المعالم لأنها تتيح للمتصفح إعادة تدفّق المحتوى بشكل متوقّع.

\n

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

\n\n

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

\n

يتطلّب WCAG 1.3.6 إجراء اختبار يدوي بالإضافة إلى أي فحوصات آلية. يمكن للأدوات الآلية التحقق من وجود الوسوم الدلالية لكنها لا تستطيع تحديد ما إذا كانت هذه الوسوم تنقل بدقة وبشكل كامل غرض كل مكوّن كما يفعل المختبر البشري. القواعد التالية في axe-core ذات صلة وثيقة وتعمل كبدائل آلية لجوانب من هذا المعيار:

\n

\n
• region — تتحقق من أن كل المحتوى في الصفحة موجود داخل منطقة معلم. تشير إلى المحتوى الذي يقع خارج أي عنصر معلم معروف أو دور معلم ARIA. رغم أن هذه القاعدة لا تختبر دقة تحديد الغرض، إلا أنها تضمن وجود الأساس البنيوي الذي يتطلبه 1.3.6. الفشل يعني أن محتوى مهماً غير مرئي للتنقل المعتمد على المعالم.
\n
• landmark-one-main — تتحقق من أن الصفحة تحتوي على عنصر <main> واحد بالضبط أو عنصر بدور role='main'. هذا أساسي لـ 1.3.6 لأن منطقة المحتوى الرئيسي هي واحدة من أهم المناطق التي يجب أن يكون غرضها قابلاً للتحديد. وجود عدة معالم <main> أو غيابها يجعل من المستحيل على أدوات التخصيص عزل المحتوى الأساسي.
\n
• landmark-complementary-is-top-level — تتحقق من أن عناصر <aside> أو مناطق role='complementary' ليست متداخلة داخل منطقة المحتوى الرئيسي بطريقة تسيء تمثيل غرضها. التداخل غير الصحيح يضلّل تقنيات المساعدة بشأن العلاقة بين المناطق.
\n
• aria-allowed-role وaria-valid-attr-value — تشير إلى تعيينات أدوار ARIA غير الصالحة أو غير المناسبة. بما أن 1.3.6 يعتمد على دلالات أدوار دقيقة، فإن استخدام دور غير صحيح (مثل role='navigation' على مجموعة أزرار) يقوّض تحديد الغرض بشكل مباشر، وهذه القواعد ستكشف مثل هذه الحالات غير المتطابقة.
\n
• button-name وlink-name — تتحقق من أن عناصر التحكم التفاعلية لها أسماء يمكن الوصول إليها. الأزرار والروابط المعتمدة على الأيقونات فقط بدون أسماء يمكن الوصول إليها هي نمط فشل أساسي لـ 1.3.6، إذ لا يمكن تحديد أي غرض لعنصر تحكم بلا اسم. تشير هذه القواعد إلى غياب aria-label أو aria-labelledby أو النص المرئي.
\n

\n

يتطلّب الاختبار اليدوي لأن الأدوات الآلية لا يمكنها تقييم ما إذا كانت رموز الغرض المختارة أو الأدوار الدلالية تمثّل بدقة الوظيفة الحقيقية للمكوّن ضمن سياق التطبيق. قد يكون للزر اسم يمكن الوصول إليه ودور ARIA صالح لكنه يظل غير مستوفٍ لـ 1.3.6 إذا كان الاسم مضلّلاً أو لم يعكس الدور ما يفعله عنصر التحكم فعلياً.

\n\n

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

\n

\n
1. تشغيل فحص آلي باستخدام axe DevTools أو Lighthouse. افتح الصفحة في Chrome، فعّل ملحق axe DevTools، وشغّل فحصاً لكامل الصفحة. رشّح النتائج حسب القواعد المذكورة أعلاه: region وlandmark-one-main وbutton-name وlink-name. لاحظ أي انتهاكات وتقييمات تأثيرها. في Lighthouse، شغّل تدقيق إمكانية الوصول وراجع أقسام المعالم وARIA. وثّق جميع حالات الفشل كنقطة أساس، مع فهم أنها تمثّل جزءاً فقط من الامتثال لـ 1.3.6.
\n
2. فحص بنية المعالم يدوياً باستخدام أدوات مطوّر المتصفح. افتح DevTools، وانتقل إلى لوحة Accessibility Tree (في Chrome) أو Accessibility Inspector (في Firefox)، وتحقق من أن الصفحة تكشف عن تسلسل هرمي متماسك للمعالم: عنصر <header> واحد في المستوى الأعلى، وعنصر <main> واحد، وعلى الأقل عنصر <nav> واحد (مع تسمية مميّزة إذا وُجد أكثر من واحد)، وعنصر <footer>. تأكد من أن أي منطقة محتوى ذات معنى ليست ملفوفة فقط داخل <div> أو <span> عام.
\n
3. الاختبار باستخدام NVDA وFirefox. شغّل NVDA، وافتح الصفحة في Firefox، واضغط على D للتنقل بين المعالم. تحقق من أن كل معلم يُعلن عنه بدور ذي معنى، وعندما توجد عدة معالم من النوع نفسه، يحمل كل منها تسمية فريدة. انتقل إلى كل زر معتمد على الأيقونة فقط باستخدام مفتاح Tab وتأكد من أن NVDA يعلن اسماً وصفياً يمكن الوصول إليه — وليس سلسلة فارغة أو اسم ملف أو تسمية عامة مثل "button".
\n
4. الاختبار باستخدام VoiceOver وSafari (macOS/iOS). فعّل VoiceOver (Cmd+F5 على macOS). استخدم Rotor (Vo+U) لفتح قائمة المعالم وتحقق من ظهور جميع المناطق المتوقعة. تنقّل عبر عناصر التحكم التفاعلية باستخدام Tab واستمع إلى الأوصاف ذات المعنى. على iOS، استخدم تمريرة بثلاثة أصابع للتنقل حسب العناوين والمعالم وتأكد من الإعلان عن غرض كل منطقة بشكل صحيح.
\n
5. الاختبار باستخدام JAWS وChrome. افتح الصفحة في Chrome مع تشغيل JAWS. اضغط على R للتنقل بين المناطق وتأكد من دقة دور وتسمية كل منطقة. استخدم JAWS Virtual Cursor لقراءة الأزرار المعتمدة على الأيقونات وتحقق من نقل غرضها. استخدم قائمة الروابط في JAWS (Insert+F7) لمراجعة جميع أسماء الروابط من حيث المعنى.
\n
6. اختبار دلالات التخصيص (إن كانت مطبّقة). إذا كانت صفحتك تستخدم مفردات W3C Personalization Semantics (مثل سمات data-purpose أو aui-)، فاستخدم أداة اختبار Personalization Semantics أو ملحق متصفح متوافق للتحقق من أن رموز الغرض مطبّقة بشكل صحيح وقابلة للقراءة آلياً من قبل وكلاء المستخدم الذين يدعمون المواصفة.
\n
7. إجراء تدقيق غرض مكوّن بمكوّن. بالنسبة لكل مكوّن تفاعلي وأيقونة في الصفحة، اسأل: هل يمكن تحديد غرض هذا المكوّن بدون سياق بصري؟ إذا كان إزالة جميع CSS والصور لا يزال يترك غرض المكوّن واضحاً من DOM وسمات ARIA وحدها، فهو ينجح. إذا كان الغرض يُنقل بصرياً فقط، فهو يفشل.
\n

\n\n

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

\n\n

مناطق div عامة بدون معالم — غير صحيح

\n

<div class='site-header'>\n  <div class='logo'>Accsible</div>\n  <div class='main-nav'>\n    <a href='/home'>Home</a>\n    <a href='/pricing'>Pricing</a>\n  </div>\n</div>\n<div class='main-content'>\n  <p>Welcome to our platform.</p>\n</div>\n<div class='sidebar'>\n  <p>Related articles</p>\n</div>\n<div class='site-footer'>\n  <p>© 2025 Accsible</p>\n</div>

\n\n

مناطق div عامة بدون معالم — صحيح

\n

<!-- Use native HTML5 landmark elements so browsers and AT\n     can programmatically identify the purpose of each region -->\n<header>\n  <a href='/' aria-label='Accsible home'>\n    <img src='logo.svg' alt='Accsible' />\n  </a>\n  <nav aria-label='Primary navigation'>\n    <a href='/home'>Home</a>\n    <a href='/pricing'>Pricing</a>\n  </nav>\n</header>\n<main>\n  <p>Welcome to our platform.</p>\n</main>\n<aside aria-label='Related articles'>\n  <p>Related articles</p>\n</aside>\n<footer>\n  <p>© 2025 Accsible</p>\n</footer>

\n\n

زر معتمد على الأيقونة فقط بدون اسم يمكن الوصول إليه — غير صحيح

\n

<!-- An icon button whose purpose cannot be determined\n     programmatically — it has no accessible name at all -->\n<button class='btn-icon'>\n  <svg viewBox='0 0 24 24' width='24' height='24'>\n    <path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/>\n  </svg>\n</button>

\n\n

زر معتمد على الأيقونة فقط بدون اسم يمكن الوصول إليه — صحيح

\n

<!-- aria-label gives the button a programmatically determinable\n     purpose; the SVG is hidden from AT since the label covers it -->\n<button class='btn-icon' aria-label='Add to favourites'>\n  <svg viewBox='0 0 24 24' width='24' height='24' aria-hidden='true' focusable='false'>\n    <path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/>\n  </svg>\n</button>

\n\n

معالم تنقل متعددة بدون تسميات مميّزة — غير صحيح

\n

<!-- Two nav elements with identical roles but no labels:\n     screen readers cannot distinguish their purpose -->\n<nav>\n  <a href='/home'>Home</a>\n  <a href='/about'>About</a>\n</nav>\n\n<nav>\n  <a href='/page1'>Chapter 1</a>\n\n
(Content truncated due to token limit — please retry this article.)