‏دسترس‌پذیری تصاویر فقط نوشتن alt نیست

به گفتهٔ نویسنده، وقتی صحبت از دسترس‌پذیری تصاویر می‌شه، همه فوری یاد متن جایگزین (alt text) می‌افتن؛ ولی دسترس‌پذیری واقعی خیلی فراتر از نوشتن یه توصیف و چسبوندنش به تصویره.

اولین اصل اینه که هر عنصر img باید صفت alt داشته باشه. این فقط یه توصیهٔ خوب نیست، خود مشخصات HTML الزامش کرده. حالا اینکه این صفت چه مقداری بگیره بحث بعدیه — ولی خود صفت همیشه باید حاضر باشه:

<img src="image.jpg" alt="متنی که تصویر رو توصیف می‌کنه">
<img src="image.jpg" alt="">

هر دو نمونهٔ بالا معتبرن. برای تصمیم‌گیری دربارهٔ مقدار alt، نویسنده یه سؤال ساده پیشنهاد می‌ده: اگه این تصویر ناپدید بشه، کاربر اطلاعاتی رو از دست می‌ده؟ اگه جواب نه باشه، تصویر احتمالاً یه عنصر تزئینیه (بافت پس‌زمینه، خط جداکننده و…) و باید alt خالی داشته باشه تا screen reader ازش رد بشه. اگه جواب بله باشه، تصویر بخشی از محتواست و به متن جایگزین نیاز داره — این همون چیزیه که معیار WCAG 1.1.1 هم می‌خواد. یه قاعدهٔ سرانگشتی هم اینه که تا جای ممکن تصویرهای تزئینی رو با CSS بذارین تا اصلاً وارد ساختار سند نشن.

آیکون‌ها یه حالت خاصن. معمولاً نقش تزئینی دارن و متن کنارشون معنی رو می‌رسونه، پس نیازی به اعلام‌شدن ندارن. ولی وقتی یه آیکون بدون متن قابل‌دیدن به‌کار می‌ره — مثل آیکون ذره‌بین برای جست‌وجو — دیگه صرفاً تزئین نیست و داره اطلاعات می‌رسونه. نویسنده پیشنهاد می‌کنه خود آیکون رو با aria-hidden="true" یا role="presentation" از فناوری کمکی پنهان کنیم و در عوض خود دکمه یا لینک دربرگیرنده، نام دسترس‌پذیر رو فراهم کنه.

مهم‌ترین نکته اینه که یه alt خوب به بافت وابسته‌ست. یه عکس از سگ ممکنه تو یه مقاله دربارهٔ نژاد لابرادور، به‌جای «یه توله‌سگ بامزه»، بهتره «یه توله‌لابرادور شاد در حال دویدن» توصیف بشه، چون هدف رسوندن همون معناییه که کاربر بینا از تصویر می‌گیره، نه توصیف پیکسل‌ها.

نویسنده در آخر می‌گه ابزارهای تست خودکار خیلی خوب وجود یا نبود alt رو تشخیص می‌دن، ولی نمی‌تونن قضاوت کنن که اون متن واقعاً مفید و مرتبط با محتواست یا نه. مثلاً alt="Dog" از نظر ابزار معتبره ولی معنای واقعی رو نمی‌رسونه. بهترین رویکرد ترکیب تست خودکار، کمک‌گرفتن از هوش مصنوعی برای پیشنهاد توصیف، و قضاوت نهایی انسانیه.

نکات کلیدی:

• طبق مشخصات HTML، هر img باید صفت alt داشته باشه، حالا خالی یا پر.
• معیار تصمیم: اگه تصویر حذف بشه و کاربر اطلاعاتی از دست بده، اطلاعاتی ـه؛ وگرنه تزئینیه و alt خالی می‌خواد.
• آیکون بدون متن قابل‌دیدن، اطلاعات می‌رسونه و باید نام دسترس‌پذیرش از دکمه/لینک تأمین بشه.
• متن جایگزین خوب به بافت اطراف وابسته‌ست و ابزار خودکار مفید بودنش رو تشخیص نمی‌ده.