WCAG 2.5.3: التسمية في الاسم

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

\n

تنطبق WCAG 2.5.3 — Label in Name — على أي مكوّن في واجهة المستخدم يحتوي على تسمية نصية مرئية. يتطلب هذا المعيار أن يكون الاسم المتاح لهذا المكوّن مطابقًا تمامًا للنص الظاهر في التسمية المرئية أو على الأقل يحتوي النص الظاهر كتسلسل فرعي. هذا يمنع حدوث حالة يرى فيها المستخدم تسمية على الشاشة بينما تتعرّف تقنياته المساندة أو برامج التعرف على الكلام على اسم مختلف تمامًا في الخلفية.

\n

الاسم المتاح هو الاسم الذي يُعرَض في شجرة إمكانية الوصول ويُستخدم من قِبل برامج قراءة الشاشة، وبرامج التحكم الصوتي، وغيرها من التقنيات المساندة. يمكن أن يأتي من مصادر متعددة، بما في ذلك محتوى النص المرئي للعنصر، أو خاصية aria-label، أو مرجع aria-labelledby، أو خاصية title، أو عنصر <label> مرتبط. عندما يقوم المطوّر بتجاوز الاسم المتاح بشيء لا يتضمن النص الظاهر في التسمية المرئية، يحدث عدم تطابق ويفشل المعيار.

\n

تشمل العناصر المتأثرة أي مكوّن تفاعلي يعرض نصًا ولديه أيضًا اسم متاح: الأزرار، الروابط، حقول النماذج ذات التسميات المرئية، عناصر القوائم، الألسنة (tabs)، مربعات الاختيار، أزرار الاختيار (radio buttons)، وودجات ARIA المخصصة. العناصر غير التفاعلية مثل الفقرات أو العناوين لا يشملها هذا المعيار.

\n

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

\n

ما الذي يُعتبَر فشلًا: يكون الاسم المتاح مختلفًا تمامًا عن التسمية المرئية، أو يحذف جزءًا ذا معنى من التسمية المرئية. زر يظهر بصريًا بالنص "Buy Now" ولكن لديه aria-label='Purchase item' يفشل هذا المعيار. وبالمثل، رابط يعرض النص "Contact Us" ولكنه ملفوف في عنصر يحتوي على aria-label='Reach our team' يفشل أيضًا.

\n

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

\n\n

لماذا يهم ذلك

\n

يحمي هذا المعيار بالدرجة الأولى المستخدمين الذين يعتمدون على برامج التعرف على الكلام مثل Dragon NaturallySpeaking (الآن Dragon Professional)، وWindows Speech Recognition، وVoice Control من Apple. يتنقل هؤلاء المستخدمون ويفعّلون عناصر الواجهة من خلال نطق التسمية التي يرونها على الشاشة. عندما لا يتطابق الاسم المتاح مع التسمية المرئية، لا يستطيع البرنامج العثور على العنصر المستهدف عندما ينطق المستخدم اسمه، مما يجعل التحكم غير قابل للوصول فعليًا دون استخدام الفأرة أو لوحة المفاتيح. بالنسبة للمستخدمين ذوي الإعاقات الحركية — بما في ذلك من يعانون من إصابات الإجهاد المتكرر، أو الحثل العضلي، أو الشلل الدماغي، أو إصابات الحبل الشوكي — يكون الإدخال الصوتي غالبًا هو وسيلتهم الأساسية أو الوحيدة لاستخدام الحاسوب. عدم التطابق في زر واحد يمكن أن يحجب الوصول إلى سير عمل كامل.

\n

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

\n

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

\n

سيناريو واقعي ملموس: تخيّل صفحة إتمام شراء في موقع تجارة إلكترونية تحتوي على زر يعرض بصريًا النص "Place Order". يضيف مطوّر aria-label='Submit purchase form' لتوفير اسم يراه أكثر وصفًا. يقول أحد العملاء الذي يستخدم Dragon NaturallySpeaking: "Click Place Order" — يقوم Dragon بمسح شجرة إمكانية الوصول، ولا يجد أي عنصر اسمه "Place Order"، ولا يمكنه تفعيل الزر. لا يستطيع العميل إكمال عملية الشراء دون التحويل إلى استخدام الفأرة، وهو ما قد لا يكون قادرًا عليه. فيتخلى عن المعاملة. هذا ليس حالة حافة افتراضية؛ بل هو نمط فشل شائع يُكتشَف في عمليات التدقيق الآلي عبر مواقع التجزئة والمواقع المصرفية.

\n

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

\n\n

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

\n

\n
• label-content-name-mismatch: هذه هي القاعدة الآلية الأساسية المرتبطة بـ WCAG 2.5.3. تتحقق القاعدة من العناصر التفاعلية — مثل الأزرار، والروابط، وأدوار ARIA مثل role='button'، وrole='link'، وrole='menuitem'، وrole='tab' — التي لديها كل من تسمية نصية مرئية واسم متاح. تُعلِم عن أي عنصر لا يحتوي اسمه المتاح على النص المرئي كتسلسل فرعي (بغض النظر عن حالة الأحرف). تستهدف القاعدة تحديدًا العناصر التي يتم فيها تجاوز الاسم المتاح بواسطة aria-label أو aria-labelledby بطريقة تختلف عن النص الظاهر على الشاشة. يبلّغ axe عن هذه الحالات كانتهاكات ذات مستوى تأثير "serious" لأنها تمنع مباشرة مستخدمي الإدخال الصوتي من تفعيل عناصر التحكم.
\n
• قيود الاكتشاف الآلي: يمكن للأدوات الآلية مثل axe-core اكتشاف حالات عدم التطابق بشكل موثوق عندما يُعرَض النص المرئي كعُقد نصية عادية داخل العنصر ويأتي الاسم المتاح من خاصية ثابتة مثل aria-label أو aria-labelledby. ومع ذلك، يلزم الاختبار اليدوي عندما: (1) يتم عرض النص المرئي من خلال عناصر CSS الوهمية ::before أو ::after، إذ قد تُدرَج أو لا تُدرَج في شجرة إمكانية الوصول اعتمادًا على المتصفح وإصدار التقنية المساندة؛ (2) يتم إدراج التسمية ديناميكيًا عبر JavaScript بعد تحميل الصفحة؛ (3) يتضمن النص المرئي أيقونات أو نصًا قائمًا على الصور حيث يجب استنتاج المكوّن النصي؛ (4) يتضمن الاسم المتاح المحسوب للعنصر سلاسل aria-labelledby معقدة تجمع عدة عناصر. في هذه الحالات، يجب على مختبِر بشري يستخدم قارئ شاشة التحقق مما يتم الإعلان عنه فعليًا مقابل ما هو مرئي.
\n

\n\n

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

\n

\n
1. فحص آلي باستخدام axe DevTools أو Lighthouse: ثبّت إضافة المتصفح axe DevTools (Chrome أو Firefox) أو شغّل تدقيق إمكانية الوصول في Lighthouse ضمن Chrome DevTools. شغّل الفحص على الصفحة بعد عرضها بالكامل — تأكد من أن المحتوى الديناميكي والنوافذ المنبثقة والقوائم الموسّعة مفتوحة إذا كانت تحتوي على عناصر تفاعلية. في لوحة نتائج axe، رشّح حسب معرّف القاعدة label-content-name-mismatch. سيعرض كل عنصر مُعلَّم اسمه المتاح المحسوب إلى جانب النص المرئي، مما يجعل عدم التطابق واضحًا فورًا. دوّن محدِّد العنصر وافحص DOM لتحديد مصدر تجاوز الاسم المتاح. سيعرض Lighthouse حالات الفشل نفسها ضمن فئة "Accessibility" مع إشارة إلى WCAG 2.5.3.
\n
2. فحص يدوي باستخدام أدوات تطوير المتصفح: افتح لوحة إمكانية الوصول في المتصفح (Chrome DevTools → Elements → علامة التبويب Accessibility، أو Firefox DevTools → علامة التبويب Accessibility). اختر كل عنصر تفاعلي يحتوي على نص مرئي. تحقّق من قسم "Computed Properties" لحقل Name الخاص بالعنصر. قارن هذه القيمة مع التسمية المرئية. إذا لم يحتوي الاسم المحسوب على النص الظاهر في التسمية المرئية كتسلسل فرعي، يفشل العنصر معيار 2.5.3.
\n
3. اختبار قارئ الشاشة باستخدام NVDA + Firefox: افتح Firefox مع تشغيل NVDA. تنقّل إلى كل عنصر تفاعلي باستخدام مفتاح Tab. استمع لما يعلنه NVDA كاسم للعنصر. لاحِظ أي اختلاف بين الاسم المُعلَن والنص المعروض على الشاشة. استخدم قائمة العناصر في NVDA (Insert+F7) لاستعراض جميع الروابط والأزرار ومقارنة الأسماء المُعلَنة بالتسميات المرئية بشكل مجمّع.
\n
4. اختبار قارئ الشاشة باستخدام JAWS + Chrome: افتح Chrome مع تشغيل JAWS. تنقّل عبر جميع عناصر التحكم التفاعلية باستخدام Tab. سيعلن JAWS الاسم المتاح متبوعًا بالدور. عندما لا يتضمن الاسم المُعلَن النص المرئي، سجّل العنصر. بالإضافة إلى ذلك، استخدم "Browse Mode" في JAWS والمستعرض الافتراضي لرؤية الاسم المتاح المحسوب لكل عنصر تحكم.
\n
5. اختبار قارئ الشاشة باستخدام VoiceOver + Safari (macOS/iOS): فعّل VoiceOver (Command+F5 على macOS). استخدم Tab أو VO+السهم الأيمن للتنقل بين العناصر التفاعلية. يعلن VoiceOver الاسم المتاح لكل عنصر تحكم. على iOS، اسحب بإصبع واحد إلى اليمين للتنقل بين العناصر والاستماع إلى أي اختلافات بين الأسماء والتسميات المرئية.
\n
6. اختبار التعرف على الكلام باستخدام Voice Control (macOS/iOS) أو Dragon: فعّل Voice Control في macOS (System Settings → Accessibility → Voice Control). قل "Show names" لعرض التسميات لجميع العناصر التفاعلية. تحقّق من أن التسميات التي يعرضها Voice Control تطابق النص المرئي على الشاشة. حاول تفعيل عناصر التحكم من خلال نطق النص الظاهر في التسمية — أي عنصر تحكم لا يستجيب لاسمه المرئي يُعتبَر فشلًا في 2.5.3. كرر ذلك باستخدام Dragon NaturallySpeaking على Windows إن أمكن، باستخدام الأمر "Click [label]".
\n

\n\n

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

\n\n

زر مع aria-label يتجاوز القيمة — غير صحيح

\n

<!-- FAIL: aria-label completely replaces the visible text \"Search\"\n     with \"Execute query\", breaking speech input -->\n<button aria-label='Execute query'>\n  Search\n</button>

\n\n

زر مع aria-label يتجاوز القيمة — صحيح

\n

<!-- PASS: Remove the mismatched aria-label entirely.\n     The button's visible text \"Search\" becomes its accessible name automatically.\n     Speech users can say \"Click Search\" to activate it. -->\n<button>\n  Search\n</button>\n\n<!-- PASS (alternative): If additional context is needed,\n     ensure the accessible name CONTAINS the visible text. -->\n<button aria-label='Search products'>\n  Search\n</button>

\n\n

رابط مع aria-labelledby يشير إلى نص غير ذي صلة — غير صحيح

\n

<!-- FAIL: aria-labelledby references a heading \"Our Services\"\n     but the link visually reads \"Learn more\",\n     so the accessible name is \"Our Services\" rather than \"Learn more\" -->\n<h2 id='services-heading'>Our Services</h2>\n<p>\n  <a href='/services' aria-labelledby='services-heading'>Learn more</a>\n</p>

\n\n

رابط مع aria-labelledby يشير إلى نص غير ذي صلة — صحيح

\n

<!-- PASS: Use aria-labelledby to concatenate the link's own text with the heading.\n     The accessible name becomes \"Learn more Our Services\",\n     which contains the visible label \"Learn more\". -->\n<h2 id='services-heading'>Our Services</h2>\n<p>\n  <a href='/services' id='learn-link' aria-labelledby='learn-link services-heading'>\n    Learn more\n  </a>\n</p>\n\n<!-- PASS (alternative): Make the visible link text self-descriptive\n     so no override is needed. -->\n<a href='/services'>Learn more about our services</a>

\n\n

زر أيقونة حيث aria-label يتعارض مع النص المرئي — غير صحيح

\n

<!-- FAIL: The button shows a cart icon AND the text \"Cart\".\n     The aria-label 'View shopping basket' does not contain \"Cart\",\n     so speech users saying \"Click Cart\" get no response. -->\n<button aria-label='View shopping basket'>\n  <svg aria-hidden='true'><!-- cart icon --></svg>\n  Cart\n</button>

\n\n

زر أيقونة حيث aria-label يتعارض مع النص المرئي — صحيح

\n

<!-- PASS: The aria-label contains the visible text \"Cart\" as a substring.\n     Speech users can say \"Click Cart\" or \"Click View Cart\" and both work. -->\n<button aria-label='View Cart'>\n  <svg aria-hidden='true'><!-- cart icon --></svg>\n  Cart\n</button>\n\n<!-- PASS (preferred): Remove aria-label and hide the icon from the tree.\n     The button's text content \"Cart\" becomes the accessible name directly. -->\n<button>\n  <svg aria-hidden='true' focusable='false'><!-- cart icon --></svg>\n  Cart\n</button>

\n\n

حقل نموذج بتسمية مرئية ولكن aria-label غير متطابق — غير صحيح

\n\n

(Content truncated due to token limit — please retry this article.)