"ما اسم الملف الذي تريد أن يقرأه قارئ الشاشة بصوت عالٍ في أذنك 40 مرة يوميًا؟" إنه سؤال سخيف بعض الشيء، ولكن هذا بالضبط ما يحدث عندما يتم ترك صورة ذات معنى مع alt="image1.jpg" أو، الأسوأ من ذلك، عدم وجود نص بديل على الإطلاق. هذه المقالة عبارة عن دليل عملي لكتابة نص بديل يساعد بالفعل - ليس فقط حاضرًا، ولكنه جيد.
باختصار – ما يغطيه هذا الدليل
لماذا يعد النص البديل السيئ بنفس سوء النص البديل المفقود
بموجب WCAG 1.1.1، يجب أن يكون لكل المحتوى غير النصي بديل نصي - ولكن المتطلب الرسمي هو نصف القصة فقط. "image1.jpg" أو "image" أو "logo" تلبي المتطلبات تقنيًا (توجد سمة بديلة)، ولكنها لا تنقل أي معلومات حقيقية. مستخدم قارئ الشاشة الذي يسمع سلسلة من "صورة... صورة... image23.png" لا يقل إحباطه عن المستخدم المبصر الذي ينظر إلى سلسلة من الإطارات الفارغة.
كيفية كتابة نص بديل جيد
القاعدة التوجيهية: قم بوصف رسالة الصورة في السياق الذي تظهر فيه، وليس وصفًا حرفيًا لما تراه. يمكن إعطاء صورة لأشخاص حول طاولة في اجتماع فريق، مصاحبة لمقال حول التعاون، "فريق يعمل معًا حول طاولة" - وليس "صورة لأشخاص". بالنسبة للمخطط أو الرسم البياني، قم بوصف الخلاصة التي يقدمها المخطط: "المخطط الشريطي الذي يوضح زيادة بنسبة 40% في المبيعات في الربع الثالث" أفضل بكثير من "المخطط الشريطي".
- قصيرة وهادفة - عادةً ما تكون جملة أو جملتين كافية؛ ليست هناك حاجة لوصف كل التفاصيل المرئية.
- تخطي "صورة" أو "صورة" - يعلن قارئ الشاشة بالفعل أنها صورة، لذا ليست هناك حاجة لتكرارها.
- ضع في اعتبارك النص المحيط - يمكن أن تحتوي الصورة نفسها على نص بديل مختلف في سياقات مختلفة.
متى يتم ترك النص البديل فارغًا عمدًا
ليست كل صورة تحتاج إلى وصف. من الأفضل وضع علامة على الصور المزخرفة البحتة - الخطوط الفاصلة الرسومية، والرسوم التوضيحية الخلفية، والأيقونات التي تكرر النص المجاور فقطalt=""(نص بديل فارغ، غير مفقود) لذا يتخطى قارئ الشاشة هذه النصوص بالكامل. يعد الفرق بين "مفقود" و"فارغ عمدًا" أمرًا بالغ الأهمية: يبدو المفقود وكأنه خطأ أو يقرأ اسم الملف؛ فارغة عمدا ببساطة يتخطى ذلك بصمت.
💡 نصيحة عملية
اختبار سريع: إذا قمت بحذف الصورة من الصفحة بالكامل، فهل سيفقد المستخدم الذي لا يمكنه رؤيتها أي شيء؟ إذا لم يكن الأمر كذلك، فمن المحتمل أن يكون ديكورًا ومناسبًا لبديل فارغ.
ما يجب فعله بالمخططات والرسوم البيانية المعقدة
بالنسبة لمخطط بيانات معقد، أو جدول مقارنة مصور، أو مخطط معلوماتي يحتوي على عدة طبقات من المعلومات، لا يعد النص البديل القصير كافيًا - فهناك الكثير من المعلومات التي يجب نقلها. الحل: نص بديل قصير يصف الموضوع العام، بجانبه (في النص العادي المحيط بالصورة، وليس فقط في السمة البديلة) وصف أكثر تفصيلاً للبيانات المهمة، أو جدول بيانات مكافئ يمكن لقارئ الشاشة التنقل فيه.
هل أنت غير متأكد من النص البديل المفقود أو الذي به مشكلة على موقعك؟
تقوم أداتنا بالبحث عن الصور التي لا تحتوي على نص بديل عبر كل مستند على موقعك، ووضع علامة عليها حسب الأولوية.
اجعل الوصول إلى مستنداتك متاحًا مجانًا ←