WCAG 1.1.1: محتوى غير نصي

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

مبدأ النجاح 1.1.1 من WCAG الخاص بالمحتوى غير النصي هو متطلب من المستوى A ضمن مبدأ إمكانية الإدراك (Perceivable). وينص على أن كل محتوى غير نصي يُعرض للمستخدم يجب أن يكون له بديل نصي يؤدي الغرض المكافئ. ويُعرَّف "المحتوى غير النصي" بشكل واسع؛ فهو يشمل الصور النقطية (JPEG, PNG, GIF, WebP)، والرسومات المتجهية (SVG)، والأزرار وعناصر النماذج المعتمدة على الصور، وخرائط الصور، وعناصر canvas، والمقاطع الصوتية، والفيديو، والرسوم المتحركة، وCAPTCHAs، والزخارف الديكورية.

يمكن أن يأخذ البديل النصي عدة أشكال بحسب نوع العنصر: سمة alt على عنصر <img>، أو aria-label أو aria-labelledby على عنصر SVG أو عنصر يحمل دورًا (role)، أو عنصر title داخل <object>، أو <figcaption> مرتبط بعنصر figure. المطلب الأساسي هو أن ينقل النص البديل نفس المعلومات أو الوظيفة التي ينقلها المحتوى المرئي نفسه — وليس مجرد اسم ملف أو عنصرًا عامًا بلا معنى.

يحدد هذا المعيار عدة حالات خاصة تحدد شكل البديل النصي الملائم:

• عناصر التحكم والإدخال: إذا كان المحتوى غير النصي عنصر تحكم أو يقبل إدخال المستخدم (مثل زر صورة أو صورة تُستخدم كرابط)، فيجب أن يصف البديل النصي غرضه أو وظيفته، لا مجرد مظهره.
• الوسائط الزمنية: المحتوى الصوتي فقط أو المرئي فقط المستخدم كعرض مستقل يتطلب على الأقل تسمية وصفية تحدده؛ أما النصوص الكاملة والترجمات المصاحبة فتتناولها معايير لاحقة (1.2.x).
• الاختبارات والتجارب الحسية: إذا كان المحتوى اختبارًا أو تمرينًا لا يمكن تقديمه في شكل نص دون إبطال غرضه (مثل لغز بصري)، فإن البديل النصي يحتاج فقط إلى تحديد المحتوى غير النصي ووصفه.
• CAPTCHAs: يجب أن تصف البدائل النصية غرض الـ CAPTCHA، كما يجب توفير شكل بديل من CAPTCHA يستخدم نمطًا حسيًا مختلفًا.
• الزخرفة والتنسيق والمحتوى غير المرئي: إذا كانت الصورة زخرفية بحتة، أو مستخدمة للمسافات، أو غير معروضة للمستخدمين، فيجب تنفيذها بحيث يمكن تجاهلها من قبل تقنيات المساعدة — عادةً عبر سمة alt="" فارغة أو role="presentation".

يُعتبر النجاح محققًا عندما يكون لكل عنصر غير نصي ذي معنى بديل نصي برمجي يكافئ في نقل غرضه، أو يكون مُعلَّمًا صراحة كعنصر زخرفي بحيث يمكن لتقنيات المساعدة تخطيه. ويحدث الفشل عندما لا تحتوي الصورة على سمة alt على الإطلاق، أو عندما تكون قيمة alt هي اسم الملف (مثل alt="img_header_logo_v2.png")، أو عندما يُستخدم SVG كمحتوى ذي معنى دون أن يحتوي على عنصر <title> أو تسمية متاحة، أو عندما تحتوي صورة زخرفية بشكل خاطئ على نص بديل وصفي يضيف ضوضاء لمستخدمي قارئات الشاشة.

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

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

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

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

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

يطبق محرك إمكانية الوصول axe-core معيار WCAG 1.1.1 من خلال سبع قواعد آلية مميزة. فهم ما تتحقق منه كل قاعدة — وحدودها — أمر أساسي لاستراتيجية اختبار متكاملة.

• image-alt: يتحقق من أن كل عنصر <img> يحتوي على سمة alt (التي يمكن أن تكون فارغة للصور الزخرفية) أو اسم متاح يُوفر عبر aria-label أو aria-labelledby أو title. ويُعلِم عن الصور التي لا تحتوي على سمة alt على الإطلاق، لأن المتصفح في هذه الحالة يعرض مسار الملف كاسم متاح.
• input-image-alt: يتحقق من أن عناصر <input type="image"> تحتوي على سمة alt غير فارغة. تعمل مدخلات الصور كأزرار إرسال ويجب أن تنقل وظيفتها، لا مجرد مظهرها المرئي. إن غياب أو فراغ سمة alt في مدخل صورة يجعل الزر غير قابل للاستخدام فعليًا مع قارئ الشاشة.
• area-alt: يتحقق من أن كل عنصر <area> داخل خريطة صورة يحتوي على بديل نصي غير فارغ عبر alt أو aria-label أو aria-labelledby. تُعد خرائط الصور نمطًا قديمًا لا يزال يُستخدم في بعض تطبيقات المؤسسات وبوابات القطاع العام، ويجب أن يصف كل موضع نشط (hotspot) وجهة الرابط أو وظيفته بشكل مستقل.
• object-alt: يتحقق من أن عناصر <object> لها اسم متاح. يُستخدم عنصر <object> تاريخيًا لتضمين محتوى Flash أو ملفات PDF أو وسائط أخرى؛ وبدون تسمية، لا تملك قارئات الشاشة طريقة للتعرف على المحتوى المضمَّن.
• svg-img-alt: يتحقق من أن عناصر <svg> المضمنة (inline) ذات role="img" لها اسم متاح، يُوفر عادةً عبر عنصر <title> فرعي (مع aria-labelledby مطابق) أو سمة aria-label على جذر SVG. تستخدم واجهات المستخدم الحديثة SVG على نطاق واسع للأيقونات والرسوم التوضيحية؛ تلتقط هذه القاعدة عناصر SVG غير المعنونة التي تحمل معنى.
• role-img-alt: يتحقق من أن أي عنصر يحمل role="img" — والذي يمكن تطبيقه على عناصر غير SVG مثل <div> أو <span> المستخدمة كحاويات للصور — له اسم متاح. هذا النمط شائع في أنظمة الأيقونات المخصصة وتنفيذات الصور الخلفية عبر CSS حيث لا يُستخدم عنصر صورة أصلي.
• image-redundant-alt: يُعلِم عن الحالات التي يكرر فيها نص alt لصورة نصًا مرئيًا مجاورًا، عادةً عندما تظهر صورة داخل رابط إلى جانب تسمية نصية. وعلى الرغم من أن هذا ليس فشلًا صارمًا، فإن النص البديل المكرر يجعل قارئات الشاشة تعلن نفس المعلومات مرتين، مما يضعف تجربة الاستماع. تتطلب هذه القاعدة حكمًا بشريًا للحل بشكل صحيح لأن الشخص وحده يمكنه تحديد ما إذا كان التكرار زائدًا بالفعل أم مقصودًا لإضافة معنى.

من المهم ملاحظة أن الأدوات الآلية بما فيها axe-core لا يمكنها تقييم جودة النص البديل — بل وجوده وبنيته الأساسية فقط. قد تنجح قاعدة ما لصورة ذات alt="photo" أو alt="decorative border" رغم أن أياً منهما ليس ذا معنى. لذلك يلزم دائمًا إجراء مراجعة يدوية إلى جانب الفحص الآلي للتأكد من أن النص البديل يصف بدقة محتوى كل صورة وغرضها.

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

1. فحص آلي باستخدام axe DevTools أو Lighthouse: ثبّت إضافة المتصفح axe DevTools (متاحة لـ Chrome وFirefox). افتح الصفحة قيد الاختبار، فعّل الإضافة، وأجرِ تحليلًا كاملًا للصفحة. رشّح النتائج حسب معرفات القواعد المذكورة أعلاه: image-alt وinput-image-alt وarea-alt وobject-alt وsvg-img-alt وrole-img-alt وimage-redundant-alt. لكل عنصر مُعلَم، تُبرز الأداة العقدة المخالفة في DOM وتشرح الانتهاك. يعرض Lighthouse (المضمن في Chrome DevTools ضمن تدقيق Accessibility) أيضًا انتهاكات image-alt مع تفاصيل على مستوى العنصر. سجّل جميع الانتهاكات مع محددات عناصرها والسياق المحيط بها لتسليمها للمطورين.
2. فحص يدوي لـ DOM: افتح لوحة Elements في أدوات تطوير المتصفح وابحث عن جميع وسوم <img> و<input type="image"> و<area> و<object> و<svg>. تحقق لكل منها من وجود سمة alt مناسبة أو تسمية ARIA وأن قيمتها ذات معنى في السياق. أولِ اهتمامًا خاصًا للصور التي تُحمَّل ديناميكيًا عبر أطر JavaScript مثل React أو Vue، والتي قد لا تظهر في لقطة HTML ثابتة.
3. اختبار قارئ الشاشة باستخدام NVDA وFirefox: شغّل NVDA (مجاني، لنظام Windows) وافتح الصفحة في Firefox. تنقل باستخدام مفتاح G للقفز بين الرسومات. يعلن NVDA الاسم المتاح لكل صورة؛ استمع لإعلانات مسارات الملفات أو "image" أو الإعلانات الفارغة — وكلها تشير إلى فشل. بالنسبة لأزرار الصور والروابط، استخدم مفتاح Tab للوصول إلى كل عنصر تحكم وتحقق من أن التسمية المنطوقة تنقل الإجراء الذي ينفذه عنصر التحكم.
4. اختبار قارئ الشاشة باستخدام VoiceOver وSafari (macOS/iOS): فعّل VoiceOver (Command+F5 على macOS). استخدم VO+Right Arrow للتحرك عبر المحتوى عنصرًا تلو الآخر، أو افتح Item Chooser (VO+U) واختر Images من rotor لرؤية قائمة بجميع الصور وتسمياتها دفعة واحدة. على iOS، اسحب إلى اليمين عبر الصفحة واستمع إلى كيفية الإعلان عن كل صورة.
5. اختبار قارئ الشاشة باستخدام JAWS وChrome: في JAWS، اضغط G للتنقل حسب الرسومات. يجب أن تنتج كل صورة وصفًا واضحًا ذا معنى. استخدم العارض الافتراضي في JAWS (Insert+F1) لرؤية الاسم المتاح المحسوب والدور لأي عنصر محل تساؤل.
6. التحقق من معالجة الصور الزخرفية: بالنسبة للصور التي تعتقد أنها زخرفية، تأكد من أن لديها alt="" ولا تحتوي على سمة title أو تسمية ARIA قد تعيد عرضها. باستخدام قارئ شاشة، تنقل إلى تلك العناصر وتأكد من أنه يتم تخطيها تمامًا في ترتيب القراءة.

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

صورة معلوماتية بدون alt — غير صحيح

<!-- Image conveys product information but has no alt attribute -->
<img src='jacket-navy-front.jpg'>

صورة معلوماتية بدون alt — صحيح

<!-- alt text describes the visual content and its purpose in context -->
<img src='jacket-navy-front.jpg' alt='Navy blue wool jacket, front view, with double-breasted buttons'>

صورة زخرفية مُعنونة بشكل غير صحيح — غير صحيح

<!-- Decorative divider image exposes a descriptive alt that adds noise -->
<img src='divider-ornament.png' alt='Decorative ornamental divider with scrollwork pattern'>

صورة زخرفية مخفية بشكل صحيح عن تقنيات المساعدة — صحيح

<!-- Empty alt tells screen readers to skip this image entirely -->
<img src='divider-ornament.png' alt=''>

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

<!-- SVG used as a meaningful icon has role="img" but no label -->
<svg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

أيقونة SVG ذات اسم متاح — صحيح

<!-- title element provides the accessible name; aria-labelledby associates it -->
<svg role='img' aria-labelledby='icon-account-title' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <title id='icon-account-title'>My Account</title>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

زر إدخال صورة بدون alt — غير صحيح

<!-- Image submit button has no alt; screen reader announces only "image" -->
<input type='image' src='btn-search.png'>

زر إدخال صورة مع alt وصفي — صحيح

<!-- alt describes the button's function, not its appearance -->
<input type='image' src='btn-search.png' alt='Search'>

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

• استخدام اسم الملف كنص بديل: كتابة alt="hero_banner_v3_final.jpg" تعرض مسار الملف لقارئات الشاشة دون أي محتوى ذي معنى. اكتب دائمًا نصًا بديلًا يصف ما تُظهره الصورة أو الغرض الذي تؤديه.
• تعيين نص alt إلى "image" أو "photo": القيم العامة مثل alt="image" أو alt="photo" تجتاز الفحوصات الآلية لأنها غير فارغة، لكنها لا تنقل أي معلومات. تعلن قارئات الشاشة بالفعل دور العنصر كـ "image"، لذا فإن تكرار هذه الكلمة يهدر وقت المستخدم.
• نسيان alt في الصور المحقونة ديناميكيًا: قد تفتقر الصور المُدخلة في DOM عبر JavaScript (مثل شريط عرض المنتجات المبني بـ React) إلى سمات alt في HTML الأولي. تأكد من أن مكوّن JavaScript يُنشئ سمة alt في نفس الوقت الذي يُنشئ فيه src.
• تطبيق role="presentation" على صور ذات معنى: استخدام role="presentation" أو role="none" على الصور التي تحمل محتوى يزيلها بالكامل من شجرة إمكانية الوصول. هذا مناسب فقط للصور الزخرفية البحتة؛ استخدامه على الصور المعلوماتية يؤدي إلى فقدان كامل للمحتوى بالنسبة لمستخدمي قارئات الشاشة.
• إهمال سمة alt تمامًا في صور الخلفية عبر CSS باستخدام role="img": عندما يُنسَّق عنصر <div> بصورة خلفية ويُعطى role="img"، ينسى المطورون أحيانًا إضافة aria-label. بدون تسمية، يكون العنصر موجودًا في شجرة إمكانية الوصول كصورة بلا اسم — وهو سيئ بقدر غياب alt.
• كتابة نص بديل يصف المظهر بدل المعنى: بالنسبة لمخطط، فإن كتابة alt="A blue bar chart" تصف النمط البصري لا البيانات. يجب أن ينقل النص البديل الفكرة الأساسية، مثل alt="Bar chart showing Q3 revenue grew 18% year-over-year".
• نص بديل مكرر عبر عدة صور في مجموعة: عندما يعرض إدراج منتج ست صور مصغرة لنفس العنصر، فإن تعيين نفس النص البديل لها جميعًا (مثل alt="Running shoe") يفشل في التمييز بينها. يجب أن تصف كل صورة في مجموعة محتواها أو زاويتها الفريدة.
• غياب alt على عناصر <area> في خرائط الصور: غالبًا ما يضيف المطورون نصًا بديلًا إلى عنصر <img> الأب عند استخدام خرائط الصور، لكنهم ينسون أن كل موضع نشط <area> يحتاج أيضًا إلى سمة alt خاصة به تصف وجهة الرابط المحددة تلك.
• استخدام نص تلميح tooltip كبديل عن نص alt: تُنتج سمة title تلميحًا بصريًا ويقرأها بعض قارئات الشاشة، لكن دعم المتصفحات لها غير متسق ولا تُعرض في جميع سياقات إمكانية الوصول. يجب أن تُكمِل سمة alt المناسبة لا أن تحل محلها.
• الفشل في اختبار أيقونات SVG المُقدَّمة عبر sprite sheets أو عناصر <use>: قد لا تعرض Sprites SVG المشار إليها عبر <use href="#icon-id"> عناصر <title> الداخلية لجميع قارئات الشاشة بسبب حدود shadow DOM. اختبر دائمًا الأيقونات المعتمدة على sprites باستخدام قارئات شاشة حقيقية وأضف aria-label إلى عنصر <svg> الخارجي عند الحاجة.

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

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

تشمل الكيانات المشمولة: جميع المؤسسات والهيئات الحكومية، والبنوك والمؤسسات المالية، والمستشفيات ومقدمي الرعاية الصحية، وشركات الاتصالات التي لديها 200,000 مشترك أو أكثر، ومنصات التجارة الإلكترونية، ووكالات السفر، وشركات النقل الخاصة، والمدارس الخاصة المرخصة من قبل وزارة التربية الوطنية (MoNE). بالنسبة للمؤسسات العامة، يجب تحقيق الامتثال خلال عام واحد من تاريخ سريان التعميم. وتُمنح الكيانات في القطاع الخاص فترة تنفيذ مدتها عامان.

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

يُعرِّض عدم الامتثال لمتطلبات المستوى A بموجب التعميم الكيانات المشمولة للتدقيق التنظيمي والعقوبات المحتملة. وبما أن WCAG 1.1.1 هو أحد أكثر المعايير انتهاكًا وأسهلها اختبارًا — إذ يمكن اكتشافه عبر الأدوات الآلية وجولات بسيطة باستخدام قارئات الشاشة — فمن المرجح أن يظهر بشكل بارز في عمليات تدقيق الامتثال. يجب على المؤسسات الخاضعة للتعميم التعامل مع معالجة جميع انتهاكات نصوص alt للصور كعنصر عمل فوري وعالي الأولوية، لا كتحسين مؤجل. يمكن لنظام تراكب إمكانية الوصول (accessibility overlay SDK) مثل Accsible أن يساعد في كشف ومعالجة جزء من البدائل النصية المفقودة في الوقت الفعلي، لكن المعالجة الكاملة على مستوى كود المصدر تظل المسار الأكثر متانة واستدامة نحو الامتثال.