WCAG 3.2.4: تحديد متسق

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

ينص معيار النجاح 3.2.4 من WCAG — التعريف المتسق (Consistent Identification) — على أن المكوّنات التي تؤدي نفس الوظيفة ضمن مجموعة من صفحات الويب يجب أن تُعرَّف بشكل متسق. يعني هذا أنه كلما نفّذ عنصر تفاعلي أو صورة نفس الوظيفة، يجب أن يحمل نفس الاسم أو التسمية المتاحة (accessible name/label) في كل مرة يظهر فيها عبر الموقع.

يشير مصطلح "التعريف" في هذا السياق إلى كيفية تقديم المكوّن لتقنيات المساعدة والمستخدمين. يشمل ذلك نص التسمية المرئية، وسمات aria-label أو aria-labelledby، ونص alt على الصورة، وسمَة title، أو الاسم المتاح الذي يحسبه متصفح الويب في شجرة إمكانية الوصول. إذا ظهر زر البحث في كل صفحة من صفحات الموقع، فيجب أن يُسمى دائمًا "Search" — لا أن يكون "Search" في الصفحة الرئيسية، و"Find" في صفحة قائمة المنتجات، و"Go" في صفحة إتمام الشراء.

ينطبق هذا المعيار على مجموعة من صفحات الويب، والتي تعرّفها WCAG بأنها مجموعة من الصفحات تشترك في هدف مشترك وتنتج عن نفس المؤلف. يشمل ذلك موقعًا كاملاً، أو تطبيق ويب، أو نموذجًا متعدد الخطوات يمتد عبر عدة عناوين URL. المكوّنات التي تتشابه بصريًا فقط ولكنها تؤدي وظائف مختلفة لا يُطلب منها مشاركة نفس الاسم — فالمتطلب مرتبط تحديدًا بالوظيفة المتطابقة.

ما الذي يُعد اجتيازًا: أيقونة تنقل تفتح قائمة همبرغر تحمل باستمرار التسمية "Open navigation menu" (أو ما يعادلها) عبر جميع الصفحات. أيقونة سلة التسوق تحمل دائمًا نص alt أو اسمًا متاحًا "Shopping cart". زر تسجيل الخروج يحمل دائمًا التسمية "Log out". الاختلاف في الصياغة لنفس الوظيفة يُعد إخفاقًا.

ما الذي يُعد إخفاقًا: زر إرسال يحمل التسمية "Submit" في نموذج التسجيل لكنه يحمل التسمية "Send" في نموذج الاتصال بينما يخدم كلا الزرين نفس الغرض الوظيفي المتمثل في إرسال البيانات التي أدخلها المستخدم. زر أيقونة يعرض عدسة مكبرة يحمل التسمية "Search" في معظم الصفحات ولكن "Ara" في صفحة فرعية مترجمة واحدة دون وجود استراتيجية لغوية متسقة.

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

لماذا يهم الأمر

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

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

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

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

سيناريو واقعي ملموس: تخيل منصة تجارة إلكترونية تركية تبيع الملابس. في صفحة شبكة المنتجات، يحتوي كل عنصر على زر بأيقونة قلب يحمل الاسم المتاح "Add to favourites". في صفحة تفاصيل المنتج، يحمل نفس رمز القلب الاسم المتاح "Kaydet" (بالتركية تعني "حفظ"). مستخدم قارئ الشاشة الذي تعلم تفعيل زر القلب بالاسم في صفحة الشبكة لن يتمكن الآن من العثور على عنصر التحكم المكافئ في صفحة التفاصيل دون استكشاف مرهق. قد يهجر الموقع تمامًا.

إضافة إلى إمكانية الوصول، تفيد التسمية المتسقة تحسين محركات البحث (SEO). تقوم محركات البحث بتحليل الأسماء المتاحة ونصوص الروابط لفهم محتوى الصفحة. تؤدي التسمية غير المتسقة للروابط المتطابقة وظيفيًا (مثل "Read more" و"Continue reading" و"Learn more" التي تشير جميعها إلى صفحات تفاصيل المقالات) إلى إضعاف إشارات الكلمات المفتاحية وتجعل من الصعب على برامج الزحف فهم بنية الموقع.

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

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

• اختبار يدوي مطلوب — الاتساق عبر الصفحات: يقوم axe-core بتقييم صفحة واحدة بمعزل عن غيرها. لا توجد لديه آلية لمقارنة الاسم المتاح لزر "Search" في الصفحة الرئيسية مع زر "Find" في صفحة المنتج، لأنه لا يحتفظ بجرد عبر الصفحات لأسماء المكوّنات. يجب على المختبر البشري حصر العناصر الوظيفية المتكررة والتحقق من أن تسميتها موحدة عبر جميع الصفحات التي تظهر فيها.
• اختبار يدوي مطلوب — اتساق نص alt للأيقونات والصور: يمكن للأدوات الآلية اكتشاف نص alt المفقود (عبر قاعدة image-alt) لكنها لا تستطيع تحديد ما إذا كانت صورتان تؤديان نفس الغرض تحملان نفس نص alt عبر صفحات مختلفة. على سبيل المثال، قد تحتوي أيقونة طابعة في صفحة الإيصالات ونفس أيقونة الطابعة في صفحة الفاتورة على نص alt في كلتا الحالتين — ولكن إذا كان أحدهما يقرأ "Print" والآخر "Print this page"، فيجب على الإنسان أن يحكم ما إذا كان هذا يشكل عدم اتساق بموجب 3.2.4.
• اختبار يدوي مطلوب — اتساق تسميات ARIA: يتحقق axe-core من وجود تسميات ARIA وأنها غير فارغة، لكنه لا يراجع ما إذا كانت قيم aria-label لنفس نوع المكوّن متسقة عبر مجموعة الصفحات بالكامل. يجب على المختبر فحص شجرة إمكانية الوصول في عدة صفحات ومقارنة الأسماء لعناصر التحكم المتطابقة وظيفيًا.
• اختبار يدوي مطلوب — تسميات حقول النماذج: تتحقق القواعد الآلية مثل label من أن الحقول مرتبطة بتسميات، لكنها لا تتحقق مما إذا كان حقل "Username" في صفحة تسجيل الدخول يحمل أيضًا التسمية "Username" (بدلاً من "Email" أو "User ID") في صفحة استعادة الحساب عندما تقبل كلا الحالتين نفس نوع الإدخال وتؤديان نفس الدور الوظيفي.

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

1. فحص آلي مبدئي: شغّل axe DevTools أو Lighthouse على كل صفحة لاكتشاف أي انتهاكات ذات صلة مثل الأسماء المتاحة المفقودة (image-alt وbutton-name وlink-name). عالج هذه أولاً — لا يمكنك تقييم اتساق التسمية إذا كانت الأسماء غائبة. دوّن الأسماء المتاحة التي تم الإبلاغ عنها للمكوّنات المتكررة عبر نتائج الفحص.
2. إنشاء جرد للمكوّنات: قم يدويًا بإدراج جميع المكوّنات الوظيفية التي تتكرر عبر الصفحات — قوائم التنقل، حقول البحث، أزرار الإرسال، أزرار الأيقونات، روابط مسار التنقل (breadcrumbs)، روابط وسائل التواصل الاجتماعي، أزرار الطباعة/المشاركة، وعناصر التحكم في الترقيم (pagination). سجّل الاسم المتاح لكل حالة باستخدام لوحة Accessibility في متصفحك (Chrome DevTools > Elements > Accessibility، أو Firefox Accessibility Inspector).
3. مقارنة الأسماء عبر الصفحات: لكل نوع مكوّن في الجرد، تحقق من أن كل حالة تحمل نفس الاسم المتاح. علّم أي اختلاف. أولِ اهتمامًا خاصًا للمكوّنات التي تظهر في رؤوس الصفحات وتذييلها وأشرطةها الجانبية، إذ من المرجح أن تكون هذه المكوّنات ذات تسميات غير متسقة عبر القوالب.
4. اختبار قارئ الشاشة باستخدام NVDA + Firefox: انتقل إلى الصفحة الرئيسية، ثم استخدم قائمة العناصر في NVDA (Insert + F7) لفتح قائمة الأزرار والروابط. دوّن أسماء عناصر التحكم المتكررة. ثم انتقل إلى ثلاث أو أربع صفحات ممثلة أخرى وكرر العملية. استمع لأي اختلاف في الأسماء لعناصر التحكم المتطابقة وظيفيًا.
5. اختبار قارئ الشاشة باستخدام VoiceOver + Safari (macOS/iOS): استخدم Rotor (‏VO + U) لإظهار قائمة الأزرار أو الروابط في كل صفحة. قارن أسماء العناصر المتكررة. على iOS، مرّر عبر العناصر التفاعلية في الصفحات المكافئة ولاحظ أي اختلافات في التسمية.
6. اختبار قارئ الشاشة باستخدام JAWS + Chrome: استخدم المؤشر الافتراضي في JAWS وقائمة حقول النماذج (Insert + F5) والروابط (Insert + F7) عبر عدة صفحات. تأكد من أن عناصر التحكم المتطابقة تشترك في أسماء متطابقة في جميع أنحاء الموقع.
7. اختبار التحكم الصوتي: باستخدام Windows Voice Access أو Dragon NaturallySpeaking، انطق اسم عنصر تحكم متكرر في صفحة واحدة (مثل "Click Search"). انتقل إلى صفحة أخرى وانطق نفس الأمر. إذا فشل، فهذا يعني أن الأسماء غير متسقة من منظور وظيفي.

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

زر البحث بتسميات غير متسقة — غير صحيح

<!-- Homepage -->
<button type='submit' aria-label='Search'>
  <svg aria-hidden='true'>...</svg>
</button>

<!-- Product listing page -->
<button type='submit' aria-label='Find products'>
  <svg aria-hidden='true'>...</svg>
</button>

<!-- Blog page -->
<button type='submit' aria-label='Go'>
  <svg aria-hidden='true'>...</svg>
</button>

زر البحث بتسميات غير متسقة — صحيح

<!-- Homepage, product listing page, and blog page all use the same label -->
<!-- Consistent aria-label across all pages ensures assistive technologies
     always announce the same name for this functionally identical button -->
<button type='submit' aria-label='Search'>
  <svg aria-hidden='true'>...</svg>
</button>

صورة أيقونة تُستخدم لنفس الإجراء مع نصوص alt مختلفة — غير صحيح

<!-- Order history page -->
<a href='/print/order/123'>
  <img src='/icons/print.svg' alt='Print order' />
</a>

<!-- Invoice page -->
<a href='/print/invoice/456'>
  <img src='/icons/print.svg' alt='Print this document' />
</a>

<!-- Receipt page -->
<a href='/print/receipt/789'>
  <img src='/icons/print.svg' alt='Yazdir' />
</a>

صورة أيقونة تُستخدم لنفس الإجراء مع نصوص alt مختلفة — صحيح

<!-- All print links across the site share the same alt text.
     The destination URL differentiates which document is printed;
     the control's accessible name remains consistent. -->
<a href='/print/order/123'>
  <img src='/icons/print.svg' alt='Print' />
</a>

<a href='/print/invoice/456'>
  <img src='/icons/print.svg' alt='Print' />
</a>

<a href='/print/receipt/789'>
  <img src='/icons/print.svg' alt='Print' />
</a>

زر إغلاق التنقل بتسمية غير متسقة — غير صحيح

<!-- Mobile menu on homepage -->
<button aria-label='Close menu' aria-expanded='true' aria-controls='nav-menu'>
  <svg aria-hidden='true'>...</svg>
</button>

<!-- Mobile menu on product page (different developer implemented it) -->
<button aria-label='Dismiss navigation' aria-expanded='true' aria-controls='nav-menu'>
  <svg aria-hidden='true'>...</svg>
</button>

زر إغلاق التنقل بتسمية غير متسقة — صحيح

<!-- A shared component/template ensures the label is identical everywhere.
     Using a single reusable component or design token for the label
     eliminates the risk of developer-introduced inconsistencies. -->
<button aria-label='Close navigation menu' aria-expanded='true' aria-controls='nav-menu'>
  <svg aria-hidden='true'>...</svg>
</button>

روابط مشاركة اجتماعية بأسماء مختلفة — غير صحيح

<!-- Article page -->
<a href='https://twitter.com/intent/tweet?url=...' aria-label='Share on Twitter'>
  <svg aria-hidden='true'>...</svg>
</a>

<!-- Video page -->
<a href='https://twitter.com/intent/tweet?url=...' aria-label='Tweet this'>
  <svg aria-hidden='true'>...</svg>
</a>

روابط مشاركة اجتماعية بأسماء مختلفة — صحيح

<!-- Both pages use the same accessible name for the functionally
     identical sharing action. The URL parameter carries the context;
     the control name stays uniform. -->
<a href='https://twitter.com/intent/tweet?url=...' aria-label='Share on Twitter'>
  <svg aria-hidden='true'>...</svg>
</a>

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

• استخدام قيم aria-label مختلفة في قوالب مختلفة لنفس المكوّن: عندما يبني مطورون مختلفون قوالب الصفحات بشكل مستقل دون مكتبة مكوّنات مشتركة، غالبًا ما تحصل أزرار الأيقونات مثل الإغلاق والبحث وسلة التسوق على تسميات ارتجالية. أنشئ رمزًا في نظام التصميم (design token) أو مكوّنًا مشتركًا لكل عنصر تفاعلي متكرر بحيث يُعرَّف الاسم المتاح مرة واحدة ويُعاد استخدامه في كل مكان.
• ترجمة الأسماء المتاحة بشكل غير متسق عبر الصفحات متعددة اللغات: قد يضع موقع ما تسمية صحيحة لزر البحث "Search" بالإنجليزية، لكنه يستخدم مكافئًا تركيًا غير متسق — أحيانًا "Ara" وأحيانًا "Arama Yap" — اعتمادًا على القالب الذي تمت ترجمته أولاً. حافظ على مفتاح ترجمة واحد لكل تسمية مكوّن وطبّقه في جميع ملفات اللغات.
• إضافة لواحق خاصة بالسياق لعناصر تحكم متطابقة في الأساس: تسمية الأزرار "Add to cart — Blue T-Shirt" و"Add to cart — Red Dress" إلخ عندما تكون الوظيفة الأساسية (الإضافة إلى السلة) هي نفسها لا يُعد إخفاقًا تلقائيًا في 3.2.4 — إذ تسمح WCAG بالتفريق — لكن القيام بذلك بشكل غير متسق (أحيانًا مع لاحقة وأحيانًا بدون) يسبب الارتباك. اختر نمطًا واحدًا وطبّقه بشكل موحد.
• الاعتماد على نص التسمية المرئية لتحقيق الاتساق بينما تختلف قيم aria-label التي تتجاوزها: عندما يُعرض زر بصريًا على أنه "Search" لكن يضيف أحد القوالب aria-label='Search the site' ولا يحتوي قالب آخر على aria-label (فيُستمد الاسم المتاح من النص المرئي فقط)، ستعلن قارئات الشاشة أسماء مختلفة رغم أن الزر يبدو متماثلًا. راجع حساب الاسم المتاح بالكامل، وليس التسمية المرئية فقط.
• السماح لمحرري نظام إدارة المحتوى (CMS) بتغيير نص الأزرار بحرية دون حوكمة لإمكانية الوصول: أنظمة إدارة المحتوى التي تعرض تسميات الأزرار كحقول قابلة للتحرير تتيح للمحررين إعادة تسمية "Submit" إلى "Send" أو "Gönder" بناءً على التفضيل الشخصي. قيّد تحرير التسميات لعناصر واجهة المستخدم الوظيفية أو أضف تحقّقًا ينبه المحررين عندما يختلف الاسم المقترح عن المعيار المعتمد.
• عدم مراجعة الويدجت أو المكوّنات المضمّنة من جهات خارجية: غالبًا ما تحتوي ويدجت الدردشة، ولافتات موافقة ملفات تعريف الارتباط، وإطارات الدفع المضمّنة من جهات خارجية على أزرار تحمل تسميات مختلفة عن اصطلاحات الموقع المضيف. راجع، وحيثما أمكن، اضبط الأسماء المتاحة للجهات الخارجية لتتوافق مع اصطلاحات التسمية لديك، أو وثّق الانحراف كاستثناء معروف.
• استخدام نص التلميح (title attribute) كاسم متاح وحيد في بعض الحالات ولكن aria-label في حالات أخرى: لا يُعلن عن سمة title بشكل موثوق من جميع تقنيات المساعدة وتُعتبر مصدرًا ضعيفًا للاسم المتاح. إذا استخدمت بعض حالات المكوّن المتكرر title واستخدمت حالات أخرى aria-label، فقد تختلف الأسماء المحسوبة بسبب اختلافات تعامل المتصفح وقارئ الشاشة.
• افتراض أن عناصر التحكم في الترقيم (pagination) مستثناة لأن أرقامها تختلف: يجب أن تطبق عناصر التحكم "Next page" و"Previous page"، حتى عندما تحمل رقم صفحة في التسمية (مثل "Go to page 3")، نمطًا متسقًا. خلط "Next" في بعض الصفحات مع "Next page" أو "İleri" في صفحات أخرى لنفس عنصر التحكم في الترقيم يُعد إخفاقًا في 3.2.4.
• عدم اختبار مكوّنات الرأس والتذييل في كل قالب صفحة مميز: غالبًا ما تحتوي المواقع على عدة قوالب للصفحات (الصفحة الرئيسية، صفحة الفئة، صفحة المقال، صفحة الدفع). قد تُعرض مكوّنات الرأس والتذييل بشكل مختلف قليلًا عبر القوالب. قد يفوّت المختبرون الذين يتحققون من قالب أو قالبين فقط حالات عدم الاتساق التي تُدخلها التعديلات الخاصة بالقالب.
• الخلط بين 3.2.4 و3.2.3 (التنقل المتسق): تعتقد الفرق أحيانًا أنه إذا كان ترتيب التنقل متسقًا (3.2.3)، فلا بد أن تكون التسمية كذلك — لكن هذين مطلبان منفصلان. يمكن أن يكون شريط التنقل في نفس الموقع في كل صفحة (امتثال 3.2.3) ومع ذلك يفشل 3.2.4 إذا كانت روابطه تحمل تسميات مختلفة عبر الصفحات. عالج كلا المعيارين صراحة في عملية ضمان الجودة (QA) لديك.

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

تضع التعميم الرئاسي التركي 2025/10، المنشور في الجريدة الرسمية رقم 32933 بتاريخ 21 يونيو 2025، متطلبات ملزمة لإمكانية الوصول لمجموعة واسعة من الخدمات الرقمية العامة والخاصة. يفرض التعميم الالتزام بالمعايير الدولية المعترف بها لإمكانية الوصول — بما يتماشى عمليًا مع WCAG 2.2 المستوى AA — ويربط هذا الالتزام بشعار إمكانية الوصول (Erişilebilirlik Logosu) الصادر عن وزارة الأسرة والخدمات الاجتماعية (Aile ve Sosyal Hizmetler Bakanlığı).

يُعد معيار WCAG 3.2.4 للتعريف المتسق معيارًا من المستوى AA، ما يعني أنه متطلب إلزامي — وليس توصية استشارية — للمنظمات التي تسعى للحصول على Erişilebilirlik Logosu أو الاحتفاظ به. سيؤدي عدم تطبيق التعريف المتسق عبر الخدمة الرقمية إلى منع تحقيق الامتثال الكامل للمستوى AA، وبالتالي الأهلية للحصول على الشعار.

يغطي التعميم صراحة الأنواع التالية من الكيانات، والتي يجب على جميعها معالجة معيار WCAG 3.2.4 في واجهات الويب والهواتف المحمولة الخاصة بها: المؤسسات والهيئات الحكومية؛ البنوك ومقدمو الخدمات المالية؛ المستشفيات والمنصات الصحية؛ مشغلو الاتصالات الذين لديهم 200,000 مشترك أو أكثر؛ منصات التجارة الإلكترونية؛ وكالات السفر وخدمات الحجز؛ شركات النقل الخاصة؛ والمدارس الخاصة المرخصة من وزارة التربية الوطنية (Milli Eğitim Bakanlığı).

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

يجب على المنظمات التركية التي تسعى للحصول على Erişilebilirlik Logosu دمج فحوصات معيار WCAG 3.2.4 في حوكمة نظام التصميم، وتدفقات عمل إدارة المحتوى، وخطوط أنابيب ضمان الجودة (QA). على وجه التحديد، يجب أن يكون لكل مكوّن لواجهة مستخدم قابل لإعادة الاستخدام اسم متاح محدد كثابت غير قابل للتحرير على مستوى نظام التصميم، مع إدارة مفاتيح الترجمة مركزيًا لضمان بقاء النسخة التركية وأي نسخ لغوية أخرى متسقة عبر جميع الصفحات والقوالب التي يظهر فيها المكوّن.