اعثر على الصور التي تحتاج إلى نظرة فاحصة
Alt Tag Checker
تدقيق سمات الصورة البديلة في HTML التي تم لصقها. افصل السمات المفقودة عن البدائل الفارغة عمدًا، وراجع كل مصدر صورة، وقم بتصدير النتائج التي توصلت إليها.
Image alt audit
Your image counts and alt text review will appear here.
Alt Tag Checker: ما يخبرك به الشيك الخاص بك
يساعدك مدقق الوسم البديل في العثور على عناصر الصورة التي تحتاج بدائلها إلى الاهتمام. في HTML، ALT هي سمة على صورة، وليست علامة منفصلة. السمة المفقودة والقيمة الفارغة والوصف المفيد هي ثلاث حالات مختلفة.
يقوم هذا التدقيق المحلي بفحص عناصر IMG في HTML التي تقوم بلصقها. لا يقوم بجلب الصفحة أو الحكم على الصورة بصريًا أو تنفيذ JavaScript أو تحميل الصور أو التصديق على إمكانية الوصول. إنه يحسب تكرارات الصور بدلاً من إلغاء تكرار الملفات، لأن الصورة نفسها يمكن أن تخدم أغراضًا مختلفة في سياقات مختلفة.
سمة مفقودة
يحتاج عنصر IMG بدون بديل إلى مراجعة. قد تعلن التكنولوجيا المساعدة عن اسم ملفها بدلاً من بديل مفيد. حدد ما إذا كانت الصورة تنقل المعلومات أو مزخرفة.
بديل فارغ
يمكن أن يكون alt="" صريحًا مناسبًا لصورة زخرفية. اتركه فارغًا عندما لا تضيف الصورة أي معلومات؛ أضف نصًا مفيدًا عندما ينقل شيئًا يحتاجه القارئ.
مسافة بيضاء فقط
يتم سرد المسافات داخل البديل بشكل منفصل. راجع الغرض من الصورة، ثم استخدم قيمة فارغة حقًا للزينة أو نصًا ذا معنى للحصول على معلومات.
النص موجود
القيمة غير الفارغة ليست بديلاً جيدًا تلقائيًا. تحقق من أنه يصف الغرض في السياق دون حشو الكلمات الرئيسية أو تكرار النص القريب أو الاعتماد على اسم الملف.
HOW IT WORKS
من شيك إلى خطوة تالية مفيدة
لصق المصدر أو تقديم HTML
انسخ HTML من مصدر صفحتك أو أدوات مطور المتصفح. لا يؤدي لصق عنوان ويب بمفرده إلى استرداد تلك الصفحة.
مراجعة كل فئة
ابدأ بالسمات المفقودة، ثم راجع البدائل الفارغة في السياق. قم بتصفية النتائج ومقارنة مصدر الصورة والنص البديل.
الإصلاح وإعادة الفحص
قم بتحديث القوالب أو حقول CMS، وقم بتصدير قائمة المراجعة، ثم قم بتدقيق HTML الجديد بعد النشر. اختبر الصفحة باستخدام التكنولوجيا المساعدة كجزء من مراجعة أوسع.
نفس السمة، ثلاثة قرارات مختلفة
صورة المنتج التثقيفي
<img src="mug.jpg" alt="Blue ceramic mug with a curved handle">صف المعلومات التي تساهم بها الصورة. يعطي هذا المثال للمتسوق تفاصيل مرئية ملموسة.
فاصل زخرفي
<img src="divider.svg" alt="">يمكن للبديل الفارغ أن يمنع الصورة الزخرفية من إضافة ضوضاء إلى تجربة القراءة.
جدول المقاسات مع عدم وجود بديل
<img src="size-guide.png">يحتاج البديل المفقود إلى مراجعة. قد يحتاج المخطط المعقد أيضًا إلى نص قريب أو جدول بيانات، بخلاف بديل قصير.
For contextual guidance, read the W3C image alt decision tree.