هل تحتاج الصور الزخرفية إلى نص بديل؟

لا - وإعطاؤها نصًا بديلاً وصفيًا خطأ في الواقع. ينبغي أن تحصل الصورة الزخرفية البحتة (زخرفة خلفية، رسم فاصل) على alt="" (سمة فارغة لكنها موجودة) بحيث تتخطاها قارئات الشاشة بصمت بدلاً من قراءة وصف لا معنى له بصوت عالٍ.

كم عدد الصور المفقودة النص البديل التي تُبلغ عنها Scanverra لكل فحص؟

حتى 10 صور لكل فحص - يُبلَّغ عن كل واحدة مع مصدر الصورة حتى تجدها بسرعة. إذا كانت صفحتك تحتوي على أكثر من 10 صور مفقودة، فإن إصلاح الدفعة الأولى وإعادة الفحص سيكشف الباقي.

هل يؤثر النص البديل فعليًا على SEO، أم أنه مجرد أمر متعلق بإمكانية الوصول؟

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

ماذا ينبغي أن أكتب لأيقونة وظيفية بحتة، مثل زر بحث بشكل عدسة مكبّرة؟

صف الإجراء، لا الأيقونة - alt="بحث" أو aria-label="بحث"، لا alt="أيقونة عدسة مكبّرة". إذا كانت الأيقونة بجانب نص مرئي يقول "بحث" بالفعل، فاجعل الأيقونة زخرفية بدلاً من ذلك حتى لا يتم إعلانها مرتين.

هل تختلف سمة alt المفقودة عن سمة فارغة؟

نعم، والفرق مهم. تُعامل سمة alt المفقودة (لا سمة على الإطلاق) كخطأ - وغالبًا ما تلجأ قارئات الشاشة إلى قراءة اسم الملف. أما alt="" الفارغة صراحةً فهي إشارة صالحة ومقصودة بأن الصورة زخرفية.

كيفية إصلاح النص البديل المفقود في الصور

النص البديل هو البديل النصي المرفق بوسم <img> - وهو ما يُعلنه قارئ الشاشة بدلاً من الصورة، وما تستخدمه محركات البحث لفهم ما تُظهره الصورة فعليًا. الصورة التي لا تحتوي على أي سمة alt على الإطلاق تُعد إخفاقًا في إمكانية الوصول وفرصة ضائعة لتحسين محركات البحث (SEO) في آنٍ واحد.

لماذا يُفقد النص البديل

نادرًا ما يكون فقدان النص البديل متعمدًا. الأسباب المعتادة هي:

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

كيفية تحديد كل حالة مفقودة

هذا أحد الفحوصات القليلة التي تُقيّمها Scanverra بشكل مباشر بدلاً من مجرد عرضها. أثناء فحص اختبار المتصفح، تُشغّل Scanverra Array.from(document.querySelectorAll("img")).filter((img) => !img.alt) على صفحتك المعروضة فعليًا، وتُبلغ عن كل تطابق كمشكلة منفصلة بعنوان "سمة alt مفقودة"، مع سرد أول 10 حالات كحد أقصى لكل فحص إلى جانب مصدر الصورة حتى تجدها بسرعة. كما يساهم فحص Lighthouse حقيقي منفصل لـ image-alt في درجة إمكانية الوصول لديك - بحيث تظهر مشكلة النص البديل المفقود في موضعين، لا في تخمين واحد.

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

1. اكتب وصفًا حقيقيًا للصور ذات المغزى

صف ما تنقله الصورة في سياقها، لا ما هي عليه حرفيًا - تجنّب عبارتي "صورة لـ" أو "لقطة لـ"، لأن قارئ الشاشة يعلن أنها صورة أصلًا:

صف المحتوى، لا الملفtypescript

1<img
2  src="/keyboard-side-profile.webp"
3  alt="Mechanical keyboard with low-profile keys and RGB backlighting"
4  width={480}
5  height={320}
6/>

2. اجعل الصور الزخرفية البحتة فارغة، لا مفقودة

النص البديل الفارغ يُخبر قارئ الشاشة بتخطيها، لا بتخمينهاtypescript

1<img src="/divider-flourish.svg" alt="" role="presentation" />

3. امنح الأيقونات الوظيفية اسمًا يمكن الوصول إليه يصف الإجراء الذي تؤديه

صف إجراء الزر، لا شكل الأيقونةtypescript

1<button aria-label="Search">
2  <SearchIcon aria-hidden="true" />
3</button>

4. لا تحشُ النص البديل بالكلمات المفتاحية

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

كيف تكتشف Scanverra مشاكل النص البديل

يفحص اختبار المتصفح في Scanverra فعليًا كل عنصر <img> معروض على الصفحة، ويحتسب نتائج النص البديل المفقود كمشاكل حقيقية في إمكانية الوصول، بحد أقصى أول 10 حالات لكل فحص - وهذا ليس حقلاً للعرض فقط، بل يُحتسب ضمن درجتك.