ویژگی alt و اهمیت آن

alt: شاید مهم‌ترین ویژگی‌ای که راحت فراموشش می‌کنیم

تو درس ۵-۱ یه معرفی کلی از alt داشتیم. اما این ویژگی اونقدر مهمه که یه درس کامل و مستقل می‌طلبه. تو این درس عمیق‌تر می‌ریم و می‌بینیم چطور یه alt خوب بنویسیم، چه زمانی باید خالی باشه، و چرا این یه ویژگی صرفاً فرمالیته نیست.

سه نوع تصویر از نظر نقش محتوایی

برای نوشتن alt درست، اول باید بفهمی تصویرت از نظر نقش محتوایی، جزو کدوم دسته‌ست:

۱. تصویر اطلاعاتی (Informative)

تصویری که خودش بخشی از محتوای اصلیه و اطلاعاتی رو منتقل می‌کنه:

<img src="chart-sales-2024.jpg" alt="نمودار میله‌ای فروش سال ۱۴۰۳ نشان‌دهنده رشد ۲۰ درصدی در فصل تابستان">

برای این نوع تصاویر، alt باید دقیقاً همون اطلاعاتی رو منتقل کنه که یه کاربر بینا از دیدن تصویر متوجه می‌شه.

۲. تصویر تزئینی (Decorative)

تصویری که صرفاً برای زیبایی بصریه و هیچ اطلاعات محتوایی اضافه‌ای نداره:

<img src="border-pattern.png" alt="">

همون‌طور که تو درس قبل گفتیم، برای این تصاویر alt باید خالی بمونه (نه حذف بشه)، تا صفحه‌خوان کاملاً ازش رد بشه.

۳. تصویر عملکردی (Functional)

تصویری که داخل یه لینک یا دکمه قرار گرفته و کارکرد خاصی داره:

<a href="/cart">
  <img src="cart-icon.png" alt="مشاهده سبد خرید">
</a>

تو این حالت، alt نباید ظاهر تصویر رو توصیف کنه (مثلاً «آیکون سبد خرید طرح خطی»)، بلکه باید کاری رو توصیف کنه که کلیک روی اون لینک انجام می‌ده. صفحه‌خوان این متن رو می‌خونه تا کاربر بفهمه این لینک برای چیه، دقیقاً مثل یه کاربر بینا که آیکون رو می‌بینه و می‌فهمه یعنی «سبد خرید».

چطور یه alt خوب بنویسیم؟

چند قانون ساده برای نوشتن alt مؤثر:

• مشخص و دقیق باش: به‌جای «عکس»، بنویس «گربه‌ی خاکستری در حال بازی با گلوله‌ی نخ».
• کوتاه و مختصر باش: معمولاً چند کلمه تا یک جمله کافیه؛ نیازی به توضیح یه پاراگراف کامل نیست.
• از عبارت «تصویر از» یا «عکسی از» استفاده نکن: چون صفحه‌خوان خودش قبل از خوندن alt، اعلام می‌کنه که این یه تصویره؛ نوشتن «تصویر از گربه» تکراری و اضافیه.
• پر از کلمات کلیدی نکن: alt="فروش کفش، خرید کفش، کفش ارزان، کفش اسپرت" هم برای صفحه‌خوان بی‌معنیه، هم گوگل امروز این روش رو تشخیص می‌ده و ممکنه به ضرر سئوی سایت تموم بشه.

مقایسه‌ی alt ضعیف و قوی

وضعیت	مثال
ضعیف	alt="عکس1"
ضعیف	alt="تصویر"
قوی	alt="دو کوهنورد در حال صعود از قله‌ی برفی در غروب آفتاب"
ضعیف (پر از کلمه‌ی کلیدی)	alt="کفش، خرید کفش، کفش ارزان، بهترین کفش"
قوی	alt="کفش ورزشی مشکی مدل رانینگ با کفی طبی"

alt در تصاویری که متن دارن

<img src="discount-banner.jpg" alt="بنر تخفیف: تا پنجاه درصد تخفیف برای اعضای ویژه">

یه اشتباه رایج اینه که وقتی یه تصویر (مثل یه بنر تبلیغاتی) خودش متن داره، طراح از alt صرف‌نظر می‌کنه. اما اگه یه متن مهم داخل خود تصویر (نه به‌صورت متن واقعی HTML) نوشته شده باشه، صفحه‌خوان هیچ راهی برای خوندن اون متن نداره مگه اینکه دقیقاً همون متن رو داخل alt هم بنویسی.

وقتی تصویر خیلی پیچیده‌ست: استفاده از توضیح تکمیلی

برای تصاویر خیلی پیچیده مثل نمودارهای چندلایه یا اینفوگرافیک‌های بزرگ، گاهی یه alt کوتاه کافی نیست. تو این موارد، می‌شه یه توضیح کامل‌تر رو تو یه پاراگراف جدا (نزدیک تصویر) نوشت و alt رو به‌عنوان یه خلاصه‌ی کوتاه نگه داشت:

<img src="infographic.jpg" alt="اینفوگرافیک روند رشد جمعیت شهری از سال ۱۳۸۰ تا ۱۴۰۳">
<p>
  این اینفوگرافیک نشان می‌دهد که جمعیت شهری کشور طی این دوره تقریباً دو برابر شده،
  با بیشترین نرخ رشد در دهه‌ی ۱۳۹۰.
</p>

alt خالی، اما چرا نه حذف‌کردن کامل ویژگی؟

یه نکته‌ی فنی مهم اینه که alt="" و نبودِ کامل ویژگی alt، دو رفتار متفاوت دارن. وقتی alt رو کاملاً حذف می‌کنی، خیلی از صفحه‌خوان‌ها به‌جای نادیده‌گرفتن تصویر، اسم فایل رو با صدای بلند می‌خونن (مثلاً چیزی شبیه «آی‌ام‌جی، آندرلاین، بنر، دو، جی‌پی‌جی»)، که کاملاً بی‌فایده و آزاردهنده‌ست. اما alt="" صریحاً می‌گه «این تصویر رو کامل نادیده بگیر».

چند اشتباه رایج

• نوشتن alt برای تصاویر عملکردی (مثل آیکون داخل لینک) بر اساس ظاهر تصویر، به‌جای عملکرد واقعیش.
• حذف‌کردن کامل ویژگی alt به‌جای گذاشتن مقدار خالی برای تصاویر تزئینی.
• نادیده‌گرفتن متن داخل تصاویر بنری یا اینفوگرافیک هنگام نوشتن alt.
• پر کردن alt با کلمات کلیدی تکراری به‌جای یک توصیف طبیعی و دقیق.

بهترین روش‌ها

• قبل از نوشتن alt، مشخص کن تصویرت اطلاعاتی، تزئینی یا عملکردیه؛ چون نوع alt بسته به این تشخیص فرق می‌کنه.
• برای تصاویر عملکردی (داخل لینک یا دکمه)، همیشه عملکرد رو توصیف کن، نه ظاهر تصویر رو.
• برای تصاویر خیلی پیچیده، یه توضیح تکمیلی هم تو متن نزدیک تصویر بذار.

نکته‌ی سئو

گوگل از alt برای فهمیدن محتوای تصویر و نمایش آن در نتایج جستجوی تصویری استفاده می‌کند؛ اما استفاده‌ی غیرطبیعی و پر از کلمات کلیدی تکراری در alt می‌تواند به‌عنوان یک روش نامعتبر (Spam) شناسایی شود و به‌جای کمک، به رتبه‌بندی سایت آسیب بزند.

نکته‌ی دسترسی‌پذیری

تفاوت بین alt خالی و نبود کامل ویژگی alt، برای تجربه‌ی کاربران صفحه‌خوان بسیار مهم است؛ عدم رعایت این نکته می‌تواند باعث شنیدن اطلاعات بی‌فایده (مثل نام فایل) یا از دست‌دادن اطلاعات ضروری (برای تصاویر عملکردی) شود.

جمع‌بندی

ویژگی alt باید بسته به نوع تصویر (اطلاعاتی، تزئینی یا عملکردی) به‌شکل متفاوتی نوشته شود؛ برای تصاویر اطلاعاتی باید محتوای تصویر را توصیف کند، برای تصاویر تزئینی باید خالی باشد، و برای تصاویر عملکردی باید عملکرد لینک یا دکمه را بیان کند. نوشتن دقیق و طبیعی این ویژگی، نقش مستقیمی در دسترسی‌پذیری و سئوی سایت دارد.