WCAG 2.4.4: غرض الرابط (في السياق)

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

WCAG 2.4.4 — غرض الرابط (في السياق) — هو معيار نجاح من المستوى A ضمن مبدأ إمكانية التشغيل (Operable). ينص هذا المعيار على أنه يجب أن يكون من الممكن تحديد غرض كل رابط من نص الرابط وحده، أو من نص الرابط مع سياق الرابط المحدد برمجياً. إذا لم يكن أي منهما كافياً، يفشل الرابط في هذا المعيار.

تعبير "سياق الرابط المحدد برمجياً" مُعرَّف بعناية في WCAG. يشير إلى المعلومات التي يمكن اشتقاقها من نفس الجملة أو الفقرة أو عنصر القائمة أو خلية الجدول التي يوجد فيها الرابط، أو من العنوان الذي يسبق القسم الذي يحتوي على الرابط. كما يشمل السياق المكشوف من خلال علاقات ARIA مثل aria-labelledby أو aria-describedby. والأهم أن هذا السياق يجب أن يكون متاحاً برمجياً — أي يمكن لتقنيات المساعدة قراءته تلقائياً — وليس مجرد سياق مرئي ضمني للمستخدمين المبصرين.

عملياً، تتأثر العناصر والسمات التالية في HTML مباشرة بهذا المعيار: عناصر الربط <a href>، عناصر <area> في خرائط الصور، عناصر <button> التي تُطلِق عملية تنقّل، العناصر المُنسَّقة أو المُبرمَجة لتتصرف كرابط باستخدام أدوار ARIA مثل role='link'، وعناصر SVG <a>. الاسم المتاح (accessible name) للرابط — المحسوب من النص الداخلي، أو aria-label، أو aria-labelledby، أو سمة alt على صورة فرعية — هو الوسيلة الأساسية للتعبير عن الغرض.

ما الذي يُعتبَر اجتيازاً: يجتاز الرابط المعيار إذا كان بإمكان المستخدم تحديد وجهته أو وظيفته دون سياق إضافي (مثلاً: "تنزيل التقرير السنوي 2024 بصيغة PDF")، أو إذا كان السياق البرمجي المحيط يجعل الغرض واضحاً (مثلاً رابط "اقرأ المزيد" داخل عنصر <li> يبدأ بعنوان المقالة). لا يشترط أن يكون نص الرابط فريداً على مستوى الصفحة بأكملها؛ يكفي أن يكون غير ملتبس ضمن سياقه.

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

الاستثناء الرسمي: تعترف WCAG باستثناء واحد. عندما يكون غرض الرابط غامضاً عن قصد — بمعنى أن كشف الغرض مسبقاً سيُفقد الرابط أو المحتوى المحيط به فائدته — لا ينطبق هذا المعيار. هذا الاستثناء ضيق للغاية ونادراً ما يكون قابلاً للتطبيق في السيناريوهات الواقعية.

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

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

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

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

سيناريو واقعي ملموس: تخيّل صفحة قائمة منتجات في موقع تجارة إلكترونية تعرض عشرة منتجات، لكل منها زر "اشترِ الآن" ورابط "اعرف المزيد" معروضين بشكل متطابق. يسمع مستخدم كفيف يتنقل عبر قائمة الروابط عشر مرات متتالية عبارة "اعرف المزيد" دون أي إشارة إلى المنتج الذي يشير إليه كل رابط. لشراء المنتج الصحيح، يجب عليه قراءة السياق المحيط بكل رابط — وهي عملية قد تستغرق دقائق بدلاً من ثوانٍ. باستخدام نص رابط وصفي مثل "اعرف المزيد عن سماعات Sony WH-1000XM5"، يمكن إنجاز المهمة نفسها بإيماءة تنقل واحدة.

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

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

• link-name: تتحقق هذه القاعدة من أن كل عنصر <a> يحتوي على سمة href، وكل عنصر يحمل role='link'، وكل عنصر <area> لديه اسم متاح غير فارغ. يتم حساب الاسم المتاح عبر خوارزمية حساب الاسم المتاح القياسية في ARIA: محتوى النص الداخلي، أو aria-label، أو aria-labelledby، أو سمة alt لصورة فرعية <img>. يشير axe إلى وجود انتهاك عندما يكون الاسم المتاح المحسوب فارغاً، أو يحتوي على مسافات بيضاء فقط، أو غائباً تماماً. تلتقط هذه القاعدة الشكل الأشد خطورة من فشل 2.4.4 — الروابط التي لا تحمل أي اسم — لكنها لا تستطيع اكتشاف الروابط التي تكون أسماؤها موجودة تقنياً لكنها عديمة المعنى دلالياً (مثل "انقر هنا" أو "اقرأ المزيد")، لأن الأدوات الآلية لا يمكنها تحديد النية من سلاسل عامة.
• duplicate-id-aria: تتحقق هذه القاعدة من عدم مشاركة عنصرين على الصفحة لنفس قيمة سمة id عندما تتم الإشارة إلى هذا id بواسطة سمة ARIA مثل aria-labelledby أو aria-describedby. تؤدي المعرفات المكررة المستخدمة في علاقات ARIA إلى قيام المتصفح بحل المرجع بشكل غير متوقع — عادةً إلى أول عنصر مطابق في ترتيب DOM — مما قد يتسبب في حساب الاسم المتاح للرابط من عنصر خاطئ تماماً. على سبيل المثال، إذا استخدم رابطان السمة aria-labelledby='product-title' وكان هناك عنصران يشتركان في هذا المعرف، فقد تعلن قارئات الشاشة اسم منتج خاطئ لأحد الرابطين أو كليهما، مما يشكل انتهاكاً مباشراً للمعيار 2.4.4. يشير axe إلى هذا كمسألة حرجة لأن الاسم المتاح الناتج غير موثوق.

من المهم فهم حدود الاختبار الآلي لهذا المعيار. يمكن لأدوات مثل axe-core التحقق من أن للرابط اسماً متاحاً، لكنها لا تستطيع التحقق من أن هذا الاسم ذو معنى. يمر رابط يحمل الاسم "هنا" قاعدة link-name تلقائياً لأن السلسلة غير فارغة. يتطلب تقييم ما إذا كان نص الرابط العام يفشل 2.4.4 حكماً بشرياً. وهذا يجعل الاختبار اليدوي مكمّلاً أساسياً للفحص الآلي لهذا المعيار.

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

1. فحص آلي باستخدام axe DevTools أو Lighthouse: ثبّت إضافة المتصفح axe DevTools (Chrome أو Firefox) أو نفّذ تدقيق إمكانية الوصول في Lighthouse ضمن Chrome DevTools. شغّل فحصاً كاملاً للصفحة وفلتر النتائج حسب القاعدتين link-name وduplicate-id-aria. راجع كل عنصر تم الإشارة إليه: تأكد من أن الاسم المتاح المحسوب غائب أو فارغ في انتهاكات link-name، وتحقق من أن المعرفات المكررة تكسر مراجع تسميات ARIA في انتهاكات duplicate-id-aria. لاحظ أن اجتياز هذه الفحوصات الآلية لا يضمن الامتثال الكامل للمعيار 2.4.4 — انتقل إلى الخطوات اليدوية.
2. مراجعة قائمة الروابط يدوياً: في NVDA مع Firefox، اضغط مجموعة المفاتيح Insert+F7 لفتح مربع حوار قائمة العناصر واختر "Links". راجع كل إدخال في القائمة بمعزل عن السياق البصري. اسأل نفسك: هل يمكنك تحديد وجهة كل رابط من نصه وحده؟ كرر ذلك في JAWS مع Chrome باستخدام Insert+F7 لفتح قائمة الروابط. في VoiceOver مع Safari على macOS، اضغط Control+Option+U لفتح Web Item Rotor واختر "Links". يجب فحص أي رابط يكون غرضه غامضاً في العزل مقابل سياقه البرمجي.
3. اختبار التنقل بلوحة المفاتيح: باستخدام مفتاح Tab فقط، تنقّل عبر جميع العناصر التفاعلية في الصفحة. في كل مرة ينتقل التركيز إلى رابط، اقرأ النص المُعلن فقط (وليس المحتوى البصري المحيط). إذا لم تتمكن من تحديد وجهة الرابط مما يُعلن، فمن المرجح أن الرابط يفشل المعيار 2.4.4. انتبه بشكل خاص للروابط التي تحتوي على أيقونات فقط (أيقونات وسائل التواصل الاجتماعي، أزرار الأسهم) وروابط الصور.
4. التحقق من السياق: بالنسبة للروابط التي تعتمد على السياق المحيط (مثل "اقرأ المزيد" داخل عنصر قائمة)، افحص DOM للتأكد من أن النص السياقي موجود في نفس الجملة أو الفقرة أو عنصر القائمة أو خلية الجدول التي يوجد فيها الرابط. السياق الذي يكون متجاوراً بصرياً فقط دون ارتباط برمجي لا يفي بالمعيار. استخدم أدوات تطوير المتصفح لفحص شجرة إمكانية الوصول المحسوبة والتأكد من العلاقة.
5. مراجعة تسميات ARIA: ابحث في شفرة مصدر الصفحة عن جميع استخدامات aria-labelledby وaria-describedby على عناصر الروابط. تحقق من أن كل معرف مشار إليه موجود مرة واحدة فقط في المستند وأن العنصر المشار إليه يحتوي على النص الوصفي المقصود. استخدم لوحة شجرة إمكانية الوصول في المتصفح (المتاحة في Chrome DevTools ضمن علامة التبويب Accessibility) لتأكيد الاسم المحسوب لكل رابط.

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

رابط أيقونة فقط بدون اسم متاح — غير صحيح

<!-- رابط أيقونة بدون نص وبدون aria-label -->
<a href='https://twitter.com/accsible'>
  <svg viewBox='0 0 24 24' width='24' height='24'>
    <path d='M23 3a10.9 10.9...' />
  </svg>
</a>

رابط أيقونة فقط بدون اسم متاح — صحيح

<!-- aria-label يوفر اسماً متاحاً وصفياً لقارئات الشاشة -->
<a href='https://twitter.com/accsible' aria-label='Accsible on Twitter'>
  <svg viewBox='0 0 24 24' width='24' height='24' aria-hidden='true' focusable='false'>
    <path d='M23 3a10.9 10.9...' />
  </svg>
</a>

روابط "اقرأ المزيد" عامة في قائمة بطاقات — غير صحيح

<!-- نصوص روابط متطابقة متعددة بدون سياق مميز -->
<ul>
  <li>
    <h3>Istanbul Accessibility Summit 2024</h3>
    <p>Join us for the annual summit on digital inclusion.</p>
    <a href='/events/istanbul-2024'>Read more</a>
  </li>
  <li>
    <h3>New WCAG 2.2 Guidelines Released</h3>
    <p>W3C has published the updated guidelines.</p>
    <a href='/news/wcag-22'>Read more</a>
  </li>
</ul>

روابط "اقرأ المزيد" عامة في قائمة بطاقات — صحيح

<!-- الخيار 1: نص مخفي بصرياً يُضاف إلى الرابط -->
<ul>
  <li>
    <h3>Istanbul Accessibility Summit 2024</h3>
    <p>Join us for the annual summit on digital inclusion.</p>
    <a href='/events/istanbul-2024'>
      Read more
      <span class='sr-only'>about the Istanbul Accessibility Summit 2024</span>
    </a>
  </li>
  <li>
    <h3>New WCAG 2.2 Guidelines Released</h3>
    <p>W3C has published the updated guidelines.</p>
    <a href='/news/wcag-22'>
      Read more
      <span class='sr-only'>about the New WCAG 2.2 Guidelines</span>
    </a>
  </li>
</ul>

<!-- الخيار 2: استخدام aria-label لاستبدال النص المرئي بالكامل -->
<a href='/events/istanbul-2024' aria-label='Read more about the Istanbul Accessibility Summit 2024'>
  Read more
</a>

رابط صورة بسمة alt فارغة — غير صحيح

<!-- الصورة تحتوي على alt فارغ، مما يجعل الرابط بلا اسم تماماً -->
<a href='/products/overlay-widget'>
  <img src='widget-logo.png' alt='' />
</a>

رابط صورة بسمة alt فارغة — صحيح

<!-- سمة alt على الصورة توفر الاسم المتاح للرابط -->
<a href='/products/overlay-widget'>
  <img src='widget-logo.png' alt='Accsible Overlay Widget — product details' />
</a>

aria-labelledby تشير إلى معرف مكرر — غير صحيح

<!-- عنصران يشتركان في نفس المعرف؛ الرابط الثاني يُحَل إلى تسمية خاطئة -->
<div>
  <span id='card-title'>Accsible SDK Documentation</span>
  <a href='/docs' aria-labelledby='card-title'>View</a>
</div>
<div>
  <span id='card-title'>Accsible Pricing Plans</span>
  <a href='/pricing' aria-labelledby='card-title'>View</a>
</div>

aria-labelledby تشير إلى معرف مكرر — صحيح

<!-- كل معرف فريد؛ كل رابط يُحَل إلى التسمية الصحيحة -->
<div>
  <span id='card-title-docs'>Accsible SDK Documentation</span>
  <a href='/docs' aria-labelledby='card-title-docs'>View</a>
</div>
<div>
  <span id='card-title-pricing'>Accsible Pricing Plans</span>
  <a href='/pricing' aria-labelledby='card-title-pricing'>View</a>
</div>

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

• استخدام "انقر هنا"، "هنا"، "المزيد"، أو "اقرأ المزيد" كنص رابط دون أي اسم متاح إضافي عبر aria-label أو aria-labelledby أو عناصر <span> مخفية بصرياً — هذه السلاسل عديمة المعنى عندما تُستخرَج من السياق البصري بواسطة قارئ الشاشة.
• إضافة aria-label إلى رابط يحتوي على نص مرئي مختلف دون التأكد من أن التسمية تبدأ بسلسلة النص المرئي — هذا ينتهك WCAG 2.5.3 (Label in Name) ويسبب ارتباكاً لمستخدمي التحكم الصوتي الذين يحاولون تفعيل الرابط بقول اسمه المرئي.
• تعيين alt='' لصورة هي المحتوى الوحيد لرابط، مما يجعل الاسم المتاح المحسوب للرابط فارغاً ويتسبب في انتهاك قاعدة link-name — يكون alt الفارغ صحيحاً للصور الزخرفية لكن ليس عندما تكون الصورة المحتوى الوحيد لعنصر تفاعلي.
• تطبيق aria-hidden='true' على عقدة النص الوحيدة داخل رابط، مما يزيل الاسم المتاح من شجرة إمكانية الوصول ويترك الرابط بلا اسم لمستخدمي قارئات الشاشة.
• إعادة استخدام نفس قيمة id عبر عناصر متعددة تتم الإشارة إليها بواسطة aria-labelledby على روابط مختلفة، مما يتسبب في قيام قارئات الشاشة بحساب اسم متاح خاطئ لرابط واحد أو أكثر بسبب حل المعرف بشكل غير متوقع.
• تغليف مكوّن بطاقة كامل (عنوان، صورة، فقرة، وزر) داخل وسم <a> واحد، مما يتسبب في قراءة قارئات الشاشة لمحتوى البطاقة بالكامل كاسم متاح للرابط — وهي تجربة مطوّلة ومربكة — بدلاً من استخدام تسمية موجزة ووصفيّة.
• الاعتماد فقط على تلميح سمة CSS title أو pseudo-class :hover لتوفير سياق الرابط — سمة title لا تُكشَف بشكل متسق بواسطة قارئات الشاشة وهي غير متاحة تماماً لمستخدمي لوحة المفاتيح فقط الذين لا يمكنهم تفعيل حالات hover.
• استخدام عنوان URL نفسه كنص رابط (مثلاً: <a href='https://example.com/p?id=12345'>https://example.com/p?id=12345</a>)، وهو غير قابل للنطق عملياً بواسطة قارئات الشاشة وعديم المعنى للمستخدمين ذوي الإعاقات الإدراكية.
• توليد معرفات الروابط أو قيم سمات ARIA ديناميكياً باستخدام أُطر JavaScript دون ضمان التفرد — غالباً ما تنتج مكوّنات React وVue وAngular المُعرَضة في قوائم معرفات مكررة ما لم تُطبَّق استراتيجيات key صريحة.
• نسيان إضافة focusable='false' إلى أيقونات SVG المضمّنة داخل الروابط في Internet Explorer وإصدارات Edge الأقدم، مما يتسبب في حصول SVG على نقطة توقف Tab خاصة به وإعلان قارئات الشاشة لـ SVG بشكل منفصل عن نص الرابط، مما يُجزّئ حساب الاسم المتاح.

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

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

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

بالنسبة لجميع هذه الكيانات، يمثّل نص الرابط غير المتوافق انتهاكاً تنظيمياً مباشراً. على سبيل المثال، إذا عرضت منصة تجارة إلكترونية تركية صفحات قائمة منتجات تحتوي على روابط متكررة "Satın Al" (اشترِ الآن) أو "Devamını Oku" (اقرأ المزيد) دون أي سياق برمجي، فلن يتمكن مستخدم كفيف يعتمد على TalkBack أو NVDA أو VoiceOver من تحديد المنتج الذي يشير إليه كل رابط، مما يشكل فشلاً في المعيار 2.4.4 وإخلالاً بمتطلبات المذكرة. وبالمثل، فإن بوابة حجز المواعيد في مستشفى حكومي تستخدم روابط تنقل بأيقونات فقط دون أسماء متاحة ستفشل كلّاً من قاعدة link-name في axe ومتطلبات المذكرة.

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