WCAG 2.4.9: غرض الرابط (الرابط فقط)

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

\n

WCAG 2.4.9 — غرض الرابط (الرابط فقط) هو معيار نجاح من المستوى AAA ضمن WCAG 2.1 و 2.2. يتطلب أن يكون من الممكن تحديد غرض كل رابط من نص الرابط وحده. على عكس نظيره من المستوى AA، WCAG 2.4.4 (غرض الرابط — في السياق)، الذي يسمح باستنتاج غرض الرابط من السياق المحيط مثل عنوان أو فقرة أو خلية جدول، فإن 2.4.9 أكثر صرامة بكثير: يجب أن يكون نص الرابط نفسه وصفياً بالكامل بذاته، دون أي اعتماد على المحتوى المحيط على الإطلاق.

\n

ينطبق هذا المعيار على جميع الروابط التشعبية التي يتم إنشاؤها باستخدام عنصر <a>، وكذلك أي عنصر تفاعلي يحمل اسماً متاحاً (accessible name) ويتصرف كرابط. يشمل ذلك الروابط الصورية (حيث يوفر سمة alt للصورة أو aria-label الاسم المتاح)، والروابط المصممة على شكل أزرار، والروابط المبنية باستخدام SVG. يجب أن يوضح الاسم المتاح للرابط — المحسوب من نصه المرئي، أو aria-label، أو aria-labelledby، أو نص بديل الصورة — بمفرده إلى أين يذهب الرابط أو ما الذي يفعله.

\n

ما الذي يُعد اجتيازاً: يجتاز الرابط معيار 2.4.9 عندما يتمكن مستخدم يقرأ نص الرابط فقط — ولا يقرأ أي شيء آخر في الصفحة — من فهم وجهة الرابط أو وظيفته بثقة. على سبيل المثال، يجتاز رابط نصه "Download the 2024 Annual Accessibility Report (PDF, 2.4 MB)" لأن كل المعلومات ذات الصلة موجودة داخل نص الرابط نفسه. كما يجتاز رابط نصه "Read the full article: How to Write Accessible Link Text". يجتاز أيضاً رابط صورة له alt='View pricing plans' لأن نص الـ alt وصفي بالكامل.

\n

ما الذي يُعد فشلاً: الروابط التي يكون نصها "click here" أو "read more" أو "learn more" أو "this" أو "here" أو أي عبارة أخرى لا تكون ذات معنى إلا في السياق تفشل في هذا المعيار. وبالمثل، يفشل رابط يلتف حول صورة تكون سمة alt الخاصة بها فارغة أو غير موجودة، مما يترك الرابط بلا اسم متاح. كما تفشل الروابط التي تستخدم aria-label أو aria-labelledby ولكن يظل اسمها المتاح المحسوب غامضاً.

\n

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

\n\n

لماذا يهم

\n

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

\n

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

\n

وفقاً لمنظمة الصحة العالمية، يعاني حوالي 2.2 مليار شخص حول العالم من شكل من أشكال ضعف البصر، منهم ما لا يقل عن 1 مليار لديهم حالة كان من الممكن الوقاية منها أو لم تُعالج بعد. وحتى بين المستخدمين من غير ذوي الإعاقات البصرية، يستفيد المستخدمون ذوو الإعاقات الحركية الذين يعتمدون على الوصول بالمفاتيح أو التنقل الصوتي (باستخدام أدوات مثل Dragon NaturallySpeaking) استفادة كبيرة من نصوص الروابط الوصفية، لأنهم يستطيعون تفعيل الرابط مباشرة عن طريق نطق اسمه أو اختياره. كما تستفيد مجموعات الإعاقة الإدراكية — بما في ذلك المستخدمون ذوو صعوبات الانتباه أو ضعف الذاكرة أو صعوبات القراءة — لأن تسميات الروابط الواضحة تقلل العبء الإدراكي والحاجة إلى إعادة قراءة السياق.

\n

فكر في سيناريو واقعي: مواطن تركي يزور موقع مستشفى حكومي لحجز موعد. تحتوي الصفحة على ثلاثة أزرار خدمة، كل منها يحتوي على عبارة "Randevu Al" (احجز موعداً) دون أي سياق إضافي في نص الرابط. يرى مستخدم كفيف يفتح قائمة الروابط في قارئ الشاشة "Randevu Al" و "Randevu Al" و "Randevu Al" — ثلاث خيارات لا يمكن تمييزها. لا يمكنه تحديد أي رابط مخصص لأمراض القلب، وأيها للطب العام، وأيها للأشعة دون الرجوع إلى السياق. يتطلب الالتزام بـ WCAG 2.4.9 أن يقرأ كل رابط "Randevu Al — Kardiyoloji" و "Randevu Al — Genel Pratisyen" و "Randevu Al — Radyoloji"، بحيث يكون الغرض واضحاً من نص الرابط وحده.

\n

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

\n\n

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

\n

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

\n

\n
• يتطلب اختباراً يدوياً — link-name (قاعدة axe): تكتشف قاعدة link-name في axe-core الروابط التي لا تحتوي على أي اسم متاح على الإطلاق (على سبيل المثال، عنصر <a> بلا محتوى نصي، ولا aria-label، ولا aria-labelledby، ولا صورة ذات سمة alt غير فارغة). وبينما تلتقط هذه القاعدة الروابط الفارغة تماماً، فإنها لا تستطيع تقييم ما إذا كان الاسم المتاح الموجود ذا معنى. سيمر رابط نصه "here" في قاعدة link-name الآلية لأنه يمتلك من الناحية التقنية اسماً متاحاً — لكنه يفشل في WCAG 2.4.9 لأن هذا الاسم غير وصفي بذاته. وهذا بالضبط سبب تمييز 2.4.9 على أنه يتطلب مراجعة يدوية: يجب على إنسان قراءة تسمية كل رابط والحكم على ما إذا كانت تنقل الغرض بمعزل عن غيرها.
\n
• يتطلب اختباراً يدوياً — identical-links-same-purpose: يتضمن axe-core قاعدة تشير إلى مجموعات من الروابط ذات الأسماء المتاحة المتطابقة ولكن بوجهات مختلفة. هذا أسلوب تقريبي يبرز الانتهاكات المحتملة لـ 2.4.9 — على سبيل المثال، عدة روابط "Read More" تشير إلى مقالات مختلفة. ومع ذلك، حتى هذه القاعدة تتطلب تأكيداً بشرياً، لأن الأسماء المتطابقة التي تشير إلى الوجهة نفسها لا تُعد انتهاكاً. تثير القاعدة مرشحين للمراجعة، لا حالات فشل مؤكدة.
\n
• لماذا لا تكفي الأتمتة: يتطلب تقييم غرض الرابط فهماً للغة الطبيعية. يمكن لأداة آلية أن تحسب أن الاسم المتاح للرابط هو السلسلة "details" لكنها لا تستطيع أن تعرف أن هذه السلسلة تفشل في وصف الوجهة. وبالمثل، لا يمكن للأداة تقييم ما إذا كان "View" كافياً (ربما يكون كذلك في واجهة ضيقة النطاق جداً) أو ما إذا كان "View the Q3 Financial Statement" أفضل. الحكم البشري، ويفضل أن يكون مقترناً باختبار باستخدام قارئ شاشة، هو الطريقة الموثوقة الوحيدة.
\n

\n\n

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

\n

\n
1. خط الأساس للفحص الآلي: شغّل axe DevTools (امتداد المتصفح) أو Lighthouse على الصفحة المستهدفة. في axe DevTools، ابحث عن أي انتهاكات لقاعدة link-name — تمثل هذه الروابط التي لا تحتوي على اسم متاح على الإطلاق وهي حالات فشل مؤكدة لـ 2.4.9. صدّر النتائج وسجّل جميع الروابط المشار إليها. لا يُكمل هذا الخطوة تدقيقك لـ 2.4.9؛ بل يحدد فقط أسهل حالات الفشل.
\n
2. إنشاء قائمة روابط باستخدام قارئ شاشة: افتح الصفحة في Firefox مع تثبيت NVDA. اضغط Insert + F7 (اختصار قائمة العناصر في NVDA) واختر "Links" من مربع الحوار. راجع القائمة الكاملة لتسميات الروابط. اسأل نفسك: هل يمكن لمستخدم يقرأ هذه القائمة فقط أن يفهم وجهة أو وظيفة كل رابط؟ كرر هذا الاختبار في JAWS بالضغط على Insert + F7 لفتح مربع حوار Links List، وفي VoiceOver على Safari (macOS) بالضغط على VO + U لفتح الـ Rotor والانتقال إلى Links. علّم أي رابط يكون ملصقه غامضاً، أو مكرراً مع وجهة مختلفة، أو مكوّناً بالكامل من سلسلة عنوان URL.
\n
3. تدقيق التنقل عبر المفتاح Tab: تنقّل في الصفحة باستخدام مفتاح Tab فقط. في كل مرة ينتقل التركيز إلى رابط، اقرأ النص المرئي للعنصر الذي عليه التركيز فقط (أو استمع إلى إعلان قارئ الشاشة). دون النظر إلى المحتوى المحيط، قرر ما إذا كان غرض الرابط واضحاً. وثّق كل رابط يكون غرضه غير واضح من نص الرابط وحده.
\n
4. فحص الروابط الصورية: حدد جميع الروابط التي تحتوي على صورة فقط (دون نص مرئي). افحص كل واحد منها باستخدام أدوات المطور في المتصفح للتحقق من أن الصورة تحتوي على سمة alt غير فارغة ووصفية، أو أن الرابط يحتوي على aria-label وصفي. يجب أن تسفر عملية حساب الاسم المتاح عن عبارة ذات معنى.
\n
5. فحص نصوص الروابط المكررة: ابحث في HTML الخاص بالصفحة عن عدة حالات لنص الرابط نفسه (على سبيل المثال، عدة روابط "Read More" أو "Buy Now"). تحقق مما إذا كانت هذه الروابط تشير إلى الوجهة نفسها (مقبول) أو إلى وجهات مختلفة (فشل في 2.4.9 ما لم يتم التمييز بينها عبر aria-label أو aria-labelledby).
\n
6. اختبار التحكم الصوتي: باستخدام Dragon NaturallySpeaking أو Windows Voice Access، حاول تفعيل الروابط عن طريق نطق تسميتها المرئية. إذا كان الملصق المنطوق غامضاً وظهرت عدة خيارات (على سبيل المثال، عند نطق "Click Read More" يتم تمييز عدة روابط)، فهذا يؤكد وجود فشل حقيقي في سهولة الاستخدام يتماشى مع 2.4.9.
\n

\n\n

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

\n

نص رابط عام "Read More" — غير صحيح

\n

<!-- Fails 2.4.9: link purpose cannot be determined from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>Read more</a>\n</article>

\n

نص رابط عام "Read More" — صحيح

\n

<!-- Passes 2.4.9: link purpose is fully clear from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>\n    Read more about improving your website's accessibility score\n  </a>\n</article>\n\n<!-- Alternative: visually show short text but provide full accessible name -->\n<a href='/blog/improve-accessibility-score'\n   aria-label='Read more about improving your website's accessibility score'>\n  Read more\n</a>

\n\n

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

\n

<!-- Fails 2.4.9: image link has no accessible name; screen readers announce URL or nothing -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt=''>\n</a>

\n

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

\n

<!-- Passes 2.4.9: alt text gives the link a fully descriptive accessible name -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt='View Accsible pricing plans'>\n</a>\n\n<!-- Alternative using aria-label on the anchor -->\n<a href='https://accsible.com/pricing' aria-label='View Accsible pricing plans'>\n  <img src='/icons/pricing.svg' alt=''>\n  <!-- alt='' hides decorative image from AT; aria-label on <a> provides the name -->\n</a>

\n\n

عدة روابط متطابقة "Satın Al" (Buy Now) — غير صحيح

\n

<!-- Fails 2.4.9: three identical link labels pointing to different products -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise'>Satın Al</a>\n</div>

\n

عدة روابط متطابقة "Satın Al" (Buy Now) — صحيح

\n

<!-- Passes 2.4.9: each link has a unique, descriptive accessible name via aria-label -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic' aria-label='Temel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro' aria-label='Profesyonel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise' aria-label='Kurumsal Planı Satın Al'>Satın Al</a>\n</div>\n\n<!-- Alternative: use visually hidden text inside the anchor -->\n<a href='/plans/basic'>\n  Satın Al <span class='sr-only'>— Temel Plan</span>\n</a>

(تم اقتطاع المحتوى بسبب حد الرموز — يرجى إعادة محاولة هذه المقالة.)