متن جایگزین تصویر (ALT) چیست و چه کاربردی دارد؟
متن جایگزین تصویر، توصیف کوتاهی است که معنای یک تصویر را در صفحه منتقل می‌کند. این متن داخل ویژگی `alt` در کد تصویر قرار می‌گیرد. اگر تصویر دیده نشود، خواننده همچنان باید پیام اصلی آن را بفهمد. در این راهنما، کاربرد ALT و روش نوشتن آن را با مثال یاد می‌گیرید.
متن جایگزین تصویر دقیقاً چیست؟
ALT مخفف «alternative text» است. مرورگر معمولا آن را زیر تصویر نشان نمی‌دهد. بااین‌حال، صفحه‌خوان می‌تواند آن را برای فرد نابینا یا کم‌بینا بخواند. هنگام بارگذاری ناموفق تصویر نیز این متن ممکن است نمایش داده شود.
برای نمونه، کد زیر تصویر یک محصول را توصیف می‌کند:
`<img src="orange-mug.jpg" alt="ماگ سرامیکی نارنجی روی میز چوبی">`
این عبارت جای تصویر را در متن صفحه می‌گیرد. بنابراین، باید همان نکته‌ای را منتقل کند که تصویر برای مخاطب دارد.
راهنمای تصاویر W3C نیز بر توصیف «اطلاعات یا کارکرد» تصویر تاکید می‌کند.
متن جایگزین تصویر چه کاربردی دارد؟
- دسترس‌پذیری برای همه
مهم‌ترین کاربرد ALT، قابل‌فهم کردن محتوای تصویری برای افرادی است که آن را نمی‌بینند. برای مثال، تصویر محصول می‌تواند رنگ، جنس یا زاویه مهم آن را نشان دهد. یک متن دقیق، همان اطلاعات ضروری را در اختیار کاربر صفحه‌خوان می‌گذارد.
2. کمک به درک تصویر در جست‌وجو
موتور جست‌وجو از متن اطراف، نام فایل و ALT برای فهم موضوع تصویر کمک می‌گیرد. بااین‌حال، وجود ALT به‌تنهایی تضمین‌کننده رتبه یا نمایش تصویر نیست. راهنمای رسمی گوگل برای سئوی تصاویر توصیه می‌کند ALT مفید، مرتبط و بدون تکرار بی‌دلیل کلیدواژه باشد.
3. انتقال پیام هنگام دیده نشدن تصویر
ممکن است تصویر به‌دلیل اینترنت ضعیف یا خطای بارگذاری نمایش داده نشود. در این حالت، متن جایگزین به فهم محتوای صفحه کمک می‌کند. پس توصیفی بنویسید که بدون دیدن تصویر هم معنی داشته باشد.
برای هر نوع تصویر چه ALT بنویسیم؟
پیش از نوشتن، از خود بپرسید: «این تصویر در این صفحه چه کاری انجام می‌دهد؟» پاسخ، متن جایگزین مناسب را روشن می‌کند.
تصویر اطلاع‌رسان
برای عکس یا نمودار معنادار، پیام مهم را کوتاه بیان کنید. مثلا برای عکس محصول بنویسید: «ماگ سرامیکی نارنجی روی میز چوبی». اگر نمودار پیچیده است، خلاصه آن را در ALT بیاورید. سپس جزئیات بیشتر را در متن کنار نمودار توضیح دهید.
تصویر تزئینی
اگر تصویر فقط برای زیبایی است و چیزی به محتوا اضافه نمی‌کند، ALT آن باید خالی باشد: `alt=""`. این کار از خواندن توضیح بی‌فایده توسط صفحه‌خوان جلوگیری می‌کند. خالی بودن ALT با حذف کامل ویژگی `alt` فرق دارد.
تصویر دکمه یا پیوند
اگر تصویر قابل‌کلیک است، مقصد یا کار آن را توضیح دهید. برای آیکون تلفن، «تماس با پشتیبانی» مفیدتر از «تصویر گوشی» است. برای عکس لینک‌شده به پروفایل، می‌توان نوشت: «مشاهده پروفایل کاری سارا احمدی».
چطور متن جایگزین تصویر خوب بنویسیم؟
1. هدف تصویر را مشخص کنید. ببینید عکس چه اطلاعات تازه‌ای به همین صفحه اضافه می‌کند.
2. نکته مهم را اول بیاورید. از جزئیات بی‌اثر یا توصیف تمام رنگ‌ها دوری کنید.
3. کوتاه و دقیق بنویسید. معمولا یک عبارت یا جمله کوتاه کافی است.
4. کلیدواژه را فقط در صورت ارتباط بیاورید. تکرار مصنوعی «متن جایگزین تصویر» به خواننده کمکی نمی‌کند.
5. نتیجه را بدون تصویر بخوانید. اگر معنی جمله روشن نبود، متن را بازنویسی کنید.
برای مثال، «عکس ۱» هیچ اطلاعاتی نمی‌دهد. «ماگ سرامیکی نارنجی روی میز چوبی» موضوع تصویر را روشن می‌کند. همچنین لازم نیست جمله را با «عکسی از» شروع کنید.
تفاوت ALT با کپشن، عنوان و نام فایل چیست؟
ALT جایگزین معنایی تصویر است و برای دسترس‌پذیری نقش اصلی دارد. کپشن، متن قابل‌دیدن زیر تصویر است و می‌تواند زمینه بیشتری بدهد. نام فایل نیز نشانی فایل را توصیف می‌کند؛ برای نمونه `orange-ceramic-mug.png`.
این سه مورد می‌توانند مکمل هم باشند، اما جای یکدیگر را نمی‌گیرند. بنابراین، وجود کپشن به‌تنهایی دلیل حذف ALT نیست. اگر کپشن دقیقا همان پیام تصویر را در متن منتقل می‌کند، از تکرار آزاردهنده پرهیز کنید.
متن جایگزین در تصاویر معرفی حرفه‌ای چه اهمیتی دارد؟
در کارت ویزیت دیجیتال کارتینو، می‌توان اطلاعات تماس، شبکه‌های اجتماعی و نمونه‌کار را در یک صفحه معرفی کرد. همچنین، امکانات تازه پروفایل‌ساز کارتینو شامل المان‌های تصویری و گالری است. تصویر نمونه‌کار زمانی مفیدتر است که مخاطب بداند چه چیزی را نشان می‌دهد.
بااین‌حال، از وجود یک فیلد اختصاصی ALT در ویرایشگر پروفایل کارتینو ادعایی نمی‌کنیم. اگر تصویر را در وب‌سایت یا مجله منتشر می‌کنید، متن جایگزین خروجی را بررسی کنید. برای نمایش حرفه‌ای خود، صفحه اصلی کارتینو نیز مسیر آشنایی با محصولات را نشان می‌دهد.
اطلاعات تماس و راه‌های ارتباطی خود را در یک پروفایل دیجیتال جمع کنید و با یک QR Code اختصاصی، دسترسی به آن را برای مشتریان ساده‌تر کن
خطاهای رایج در نوشتن ALT
- پرکردن متن با کلمه کلیدی: ALT باید معنی تصویر را برساند، نه فهرست عبارت‌های جست‌وجو را.
- نوشتن متن عمومی: «تصویر زیبا» یا «عکس محصول» اطلاعات کافی نمی‌دهد.
- توصیف جزئیات نامربوط: رنگ پس‌زمینه همیشه برای فهم تصویر لازم نیست.
- حذف ALT از تصویر تزئینی: برای تصویر صرفا تزئینی، `alt=""` بگذارید.
- جایگزین کردن کپشن به‌جای ALT: کپشن و ALT هدف‌های متفاوتی دارند.
پرسش‌های پرتکرار
1. آیا همه تصاویر باید ALT داشته باشند؟
بله، هر عنصر تصویر باید ویژگی `alt` مناسب داشته باشد. تصویرهای معنادار توصیف می‌خواهند؛ تصویرهای صرفا تزئینی مقدار خالی می‌گیرند.
2. متن جایگزین چند کلمه باشد؟
عدد ثابتی برای همه تصویرها وجود ندارد. متن را تا جای ممکن کوتاه، اما کامل و وابسته به زمینه بنویسید. برای نمودار پیچیده، توضیح مفصل را نزدیک تصویر قرار دهید.
3. آیا کپشن همان ALT است؟
خیر. کپشن برای همه خوانندگان دیده می‌شود، اما ALT جایگزین معنای تصویر در کد صفحه است. گاهی متن آن‌ها نزدیک است، ولی کاربردشان یکی نیست.
4. آیا ALT روی سئوی تصویر اثر دارد؟
بله، به فهم موضوع تصویر کمک می‌کند. البته کیفیت صفحه، متن اطراف و عوامل دیگر هم مهم‌اند. پس ALT را برای کاربر بنویسید و از انباشت کلیدواژه پرهیز کنید.
5. جمع‌بندی
متن جایگزین تصویر، پیام یا کارکرد عکس را برای زمانی که دیده نمی‌شود منتقل می‌کند. ابتدا نقش تصویر را مشخص کنید؛ سپس توصیفی کوتاه و دقیق بنویسید. برای تصویر تزئینی، ALT خالی بگذارید. در پایان، متن را بدون دیدن تصویر بخوانید و مطمئن شوید پیام اصلی منتقل می‌شود.
