# تصاویر باید متن جایگزین داشته باشند

<https://www.fixreports.com/fa/issues/image-alt>

WCAG ⁨1.1.1 Non-text Content⁩ · سطح ⁨A⁩

تصاویر متن جایگزین ندارند، بنابراین کاربران صفحه‌خوان نمی‌دانند در آن‌ها چه چیزی نشان داده شده است.

## این قاعده چه چیزی را بررسی می‌کند
بررسی می‌کند که عناصر <img> متن جایگزین یا نقش none یا presentation داشته باشند.

## چرا اهمیت دارد
WCAG 1.1.1 برای تصاویر معنادار یک متن جایگزین الزامی می‌کند. بدون آن، کاربر صفحه‌خوان نمی‌تواند تشخیص دهد عکس کدام محصول را نشان می‌دهد.

## نحوه رفع
### در هر وب‌سایت
1. در CMS یا تمپلیت خود، برای متن جایگزین هر تصویر یک توضیح کوتاه و دقیق بنویسید.
2. آنچه را برای خریدار مهم است توصیف کنید: نام محصول، رنگ و زاویه نمایش (برای مثال «کیف دستی برزنتی زیتونی، نمای روبه‌رو»).
3. تصاویر تزئینی باید ویژگی alt خالی (⁨alt=""⁩) داشته باشند تا صفحه‌خوان‌ها از آن‌ها رد شوند.

### در Shopify
1. در پنل مدیریت Shopify، به Products > [محصول] > Media بروید، روی هر تصویر کلیک کنید و فیلد «Alt text» را پر کنید. برای تصاویر بخش‌ها، Online Store > Themes > Customize را باز کنید و متن جایگزین تصویر را در تنظیمات همان بخش وارد کنید.
2. آنچه را برای خریدار مهم است توصیف کنید: نام محصول، رنگ و زاویه نمایش (برای مثال «کیف دستی برزنتی زیتونی، نمای روبه‌رو»).
3. تصاویر تزئینی باید ویژگی alt خالی (⁨alt=""⁩) داشته باشند تا صفحه‌خوان‌ها از آن‌ها رد شوند.

### در WooCommerce و WordPress
1. در WordPress، به Media > Library (رسانه > کتابخانه) بروید، هر تصویر را انتخاب کنید و فیلد «Alternative Text» (متن جایگزین) را پر کنید. تصاویر گالری محصول هم از همین فیلد استفاده می‌کنند.
2. آنچه را برای خریدار مهم است توصیف کنید: نام محصول، رنگ و زاویه نمایش (برای مثال «کیف دستی برزنتی زیتونی، نمای روبه‌رو»).
3. تصاویر تزئینی باید ویژگی alt خالی (⁨alt=""⁩) داشته باشند تا صفحه‌خوان‌ها از آن‌ها رد شوند.

## نحوه بررسی اصلاح
- صفحات تحت تأثیر را دوباره اسکن کنید.
- با یک صفحه‌خوان (VoiceOver: کلیدهای Cmd+F5 در Mac) گوش دهید که تصاویر محصول چگونه اعلام می‌شوند.

## منابع
- مستندات قاعده axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- توضیح معیار WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content