این قاعده چه چیزی را بررسی می‌کند
بررسی می‌کند که عناصر <img> متن جایگزین یا نقش none یا presentation داشته باشند.
چرا اهمیت دارد
WCAG 1.1.1 برای تصاویر معنادار یک متن جایگزین الزامی می‌کند. بدون آن، کاربر صفحه‌خوان نمی‌تواند تشخیص دهد عکس کدام محصول را نشان می‌دهد.
نحوه رفع
در هر وب‌سایت
- در CMS یا تمپلیت خود، برای متن جایگزین هر تصویر یک توضیح کوتاه و دقیق بنویسید.
- آنچه را برای خریدار مهم است توصیف کنید: نام محصول، رنگ و زاویه نمایش (برای مثال «کیف دستی برزنتی زیتونی، نمای روبه‌رو»).
- تصاویر تزئینی باید ویژگی alt خالی (alt="") داشته باشند تا صفحه‌خوان‌ها از آن‌ها رد شوند.
در Shopify
- در پنل مدیریت Shopify، به Products > [محصول] > Media بروید، روی هر تصویر کلیک کنید و فیلد «Alt text» را پر کنید. برای تصاویر بخش‌ها، Online Store > Themes > Customize را باز کنید و متن جایگزین تصویر را در تنظیمات همان بخش وارد کنید.
- آنچه را برای خریدار مهم است توصیف کنید: نام محصول، رنگ و زاویه نمایش (برای مثال «کیف دستی برزنتی زیتونی، نمای روبه‌رو»).
- تصاویر تزئینی باید ویژگی alt خالی (alt="") داشته باشند تا صفحه‌خوان‌ها از آن‌ها رد شوند.
در WooCommerce و WordPress
- در WordPress، به Media > Library (رسانه > کتابخانه) بروید، هر تصویر را انتخاب کنید و فیلد «Alternative Text» (متن جایگزین) را پر کنید. تصاویر گالری محصول هم از همین فیلد استفاده می‌کنند.
- آنچه را برای خریدار مهم است توصیف کنید: نام محصول، رنگ و زاویه نمایش (برای مثال «کیف دستی برزنتی زیتونی، نمای روبه‌رو»).
- تصاویر تزئینی باید ویژگی alt خالی (alt="") داشته باشند تا صفحه‌خوان‌ها از آن‌ها رد شوند.
نحوه بررسی اصلاح
- صفحات تحت تأثیر را دوباره اسکن کنید.
- با یک صفحه‌خوان (VoiceOver: کلیدهای Cmd+F5 در Mac) گوش دهید که تصاویر محصول چگونه اعلام می‌شوند.
FixReports چگونه آن را پیدا می‌کند
اسکن ما قاعده image-alt از axe-core را در یک مرورگر Chrome واقعی روی هر صفحه‌ای که تست می‌کند اجرا می‌کند و هر عنصر ردشده را همراه با صفحه، کد HTML آن و در صورت امکان یک اسکرین‌شات گزارش می‌دهد.
تست خودکار وجود همین مشکل مشخص را تأیید می‌کند. اما نمی‌تواند بگوید بقیه صفحه دسترس‌پذیر است یا نه: برخی موانع فقط وقتی آشکار می‌شوند که یک انسان صفحه را بررسی کند.