متن جایگزین (Alt Text) یک توضیح مختصر و مفید برای عکس‌ها در وب‌سایت شماست که برای اهداف مختلفی از جمله دسترسی‌پذیری وب، سئو و تجربه کاربری بهتر استفاده می‌شود. نوشتن متن جایگزین مناسب، به موتورهای جستجو و کاربران (به‌ویژه افراد دارای معلولیت بینایی) کمک می‌کند تا محتوای تصویر را درک کنند. در اینجا 12 راهکار کلیدی برای نوشتن متن جایگزین موثر را بررسی می‌کنیم:

با عمل کردن به این موارد، می‌توانید متن جایگزین عکس‌های خود را بهینه کرده و وب‌سایت خود را برای همه کاربران در دسترس‌تر و جذاب‌تر کنید:

• ✔️

  عکس را دقیق توصیف کنید:

  متن جایگزین باید تصویر را به طور دقیق و مختصر توصیف کند. از کلمات واضح و مشخص استفاده کنید.
• ✔️

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

  سعی کنید متن جایگزین را زیر 125 کاراکتر نگه دارید تا برای Screen Readerها (صفحه خوان‌ها) قابل فهم باشد.
• ✔️

  از کلمات کلیدی استفاده کنید:

  اگر کلمه کلیدی مرتبطی با تصویر وجود دارد، به طور طبیعی در متن جایگزین بگنجانید.
• ✔️

  زمینه را در نظر بگیرید:

  متن جایگزین باید با زمینه صفحه مرتبط باشد. تصویر چه نقشی در محتوای صفحه دارد؟
• ✔️

  بی‌جهت کلمه “تصویر” را تکرار نکنید:

  Screen Readerها به طور خودکار متوجه می‌شوند که این یک تصویر است.
• ✔️

  برای تصاویر تزئینی، متن جایگزین خالی بگذارید:

  اگر تصویر صرفا جنبه تزئینی دارد و محتوای مهمی را منتقل نمی‌کند، از alt=”” استفاده کنید.
• ✔️

  برای دکمه‌های تصویری، عملکرد دکمه را توصیف کنید:

  اگر تصویر به عنوان دکمه عمل می‌کند، متن جایگزین باید عملکرد آن را توضیح دهد (مثلا “ارسال فرم”).
• ✔️

  از زبان طبیعی استفاده کنید:

  متن جایگزین باید به زبان ساده و روان نوشته شود.
• ✔️

  متن جایگزین را از دید کاربر بنویسید:

  تصور کنید کاربری که تصویر را نمی‌بیند، چگونه می‌تواند با خواندن متن جایگزین، محتوای آن را درک کند.
• ✔️

  از افعال قوی استفاده کنید:

  به جای “زنی که در حال فکر کردن است”، از “زنی در حال تفکر” استفاده کنید.
• ✔️

  در مورد اطلاعات کلیدی عکس توضیح دهید:

  اگر عکس حاوی اطلاعات مهمی مانند آمار، نام افراد یا مکان‌ها است، آنها را در متن جایگزین ذکر کنید.

با عمل کردن به این موارد ساده، می‌توانید تجربه کاربری وب‌سایت خود را بهتر کنید و رتبه سئوی خود را ارتقا دهید.

12 راهکار برای نوشتن متن جایگزین عکس عالی

1. تصویر را توصیف کنید: ساده و مشخص

متن جایگزین باید محتوای تصویر را به طور واضح و مختصر توصیف کند. تصور کنید در حال توضیح تصویر برای شخصی هستید که آن را نمی بیند. جزئیات کلیدی را بیان کنید و از اطلاعات غیر ضروری پرهیز نمایید.

مثال:

به جای “عکس زیبا” بنویسید “غروب آفتاب بر فراز دریا با رنگ‌های نارنجی و صورتی”

اشتباه رایج:

بهره‌گیری از عبارت های کلی و مبهم.

راه حل:

مشخص باشید. چه چیزی در تصویر وجود دارد؟

2. از کلمات کلیدی مرتبط استفاده کنید

اگر تصویر برای رتبه بندی در موتورهای جستجو مهم است، از کلمات کلیدی مرتبط در متن جایگزین استفاده کنید. این کار به موتورهای جستجو کمک می کند تا موضوع تصویر و ارتباط آن با محتوای صفحه را درک کنند.

مثال:

اگر تصویر یک سگ نژاد گلدن رتریور است، از عبارت “سگ گلدن رتریور” در متن جایگزین استفاده کنید.

اشتباه رایج:

پر کردن متن جایگزین با کلمات کلیدی نامرتبط.

راه حل:

کلمات کلیدی را به طور طبیعی در جمله به کار ببرید.

3. تصویر تزئینی؟ متن جایگزین خالی!

اگر تصویر فقط برای زیبایی صفحه قرار داده شده و محتوای خاصی را منتقل نمی کند، از یک متن جایگزین خالی استفاده کنید (alt=””). این به صفحه خوان ها اطلاع می دهد که تصویر مهم نیست و نیازی به خواندن توضیح آن نیست.

مثال:

یک بافت پس زمینه انتزاعی.

اشتباه رایج:

نوشتن متن جایگزین غیر ضروری برای تصاویر تزئینی.

راه حل:

اگر تصویر چیزی به محتوا اضافه نمی‌کند، متن جایگزین را خالی بگذارید.

4. محدودیت کاراکتر را رعایت کنید

اگرچه هیچ محدودیت رسمی برای طول متن جایگزین وجود ندارد، اما توصیه می شود آن را کوتاه و مختصر نگه دارید. معمولاً بین 125 تا 150 کاراکتر کافی است.

مثال:

متن جایگزین بلند باعث می شود که صفحه خوان ها با مشکل مواجه شوند.

اشتباه رایج:

نوشتن متن جایگزین بیش از حد طولانی.

راه حل:

روی مهمترین جنبه های تصویر تمرکز کنید.

5. متن جایگزین را به عنوان زیرنویس تکرار نکنید

متن جایگزین و زیرنویس تصویر اهداف متفاوتی دارند. متن جایگزین برای دسترسی پذیری و سئو استفاده می شود، در حالی که زیرنویس اطلاعات بیشتری در مورد تصویر ارائه می دهد. نیازی به تکرار اطلاعات بین این دو نیست.

مثال:

اگر زیرنویس تصویر توضیح کاملی ارائه می دهد، متن جایگزین می‌تواند خلاصه تر باشد.

اشتباه رایج:

کپی کردن متن زیرنویس در متن جایگزین.

راه حل:

هر دو را به طور مستقل و مکمل بنویسید.

6. زمینه را در نظر بگیرید

متن جایگزین باید با زمینه صفحه وب همخوانی داشته باشد. به این فکر کنید که تصویر چه نقشی در انتقال پیام کلی صفحه دارد و متن جایگزین را بر اساس آن تنظیم کنید.

مثال:

اگر صفحه در مورد آموزش سگ است، متن جایگزین باید به این موضوع مرتبط باشد.

اشتباه رایج:

نادیده گرفتن ارتباط تصویر با محتوای صفحه.

7. از “تصویر از. . . ” یا “عکس از. . . ” خودداری کنید

نیازی به شروع متن جایگزین با عباراتی مانند “تصویر از. . . ” یا “عکس از. . . ” نیست. صفحه خوان ها و موتورهای جستجو می دانند که این یک تصویر است.

مثال:

به جای “تصویر از یک گربه” بنویسید “گربه نشسته روی مبل”.

اشتباه رایج:

بهره‌گیری از عبارات غیر ضروری در ابتدای متن جایگزین.

راه حل:

مستقیماً به توصیف تصویر بپردازید.

8. برای دکمه ها و لینک ها متن جایگزین مناسب بنویسید

اگر تصویر به عنوان دکمه یا لینک استفاده می شود، متن جایگزین باید عملکرد آن را توصیف کند. به جای “لینک” یا “دکمه”، بنویسید “ارسال فرم”، “دانلود فایل” یا “مشاهده اطلاعات بیشتر”.

مثال:

یک آیکون سبد خرید که به صفحه پرداخت هدایت می شود باید متن جایگزین “رفتن به صفحه پرداخت” داشته باشد.

اشتباه رایج:

بهره‌گیری از متن جایگزین عمومی برای دکمه ها و لینک ها.

راه حل:

هدف دکمه یا لینک را به وضوح بیان کنید.

9. از اموجی ها در متن جایگزین استفاده نکنید (مگر در موارد خاص)

بهره‌گیری از اموجی ها در متن جایگزین معمولاً توصیه نمی شود، زیرا ممکن است توسط صفحه خوان ها به درستی تفسیر نشوند. مگر اینکه اموجی بخشی جدایی ناپذیر از محتوای تصویر باشد.

مثال:

اگر تصویر یک قلب است، می توان از اموجی قلب استفاده کرد، اما در سایر موارد بهتر است از توصیف متنی استفاده کنید.

اشتباه رایج:

استفاده بیش از حد از اموجی ها در متن جایگزین.

راه حل:

فقط در صورت لزوم و برای انتقال معنای دقیق از اموجی استفاده کنید.

10. در صورت لزوم به متن طولانی تر متوسل شوید

گاهی اوقات، توصیف دقیق یک تصویر پیچیده نیاز به متن جایگزین طولانی تری دارد. در این موارد، می‌توانید از ویژگی aria-describedby برای پیوند دادن تصویر به یک توصیف طولانی تر در صفحه استفاده کنید.

مثال:

یک نمودار پیچیده که نیاز به توضیح دقیق دارد.

اشتباه رایج:

تلاش برای فشرده کردن اطلاعات زیاد در یک متن جایگزین کوتاه.

راه حل:

از aria-describedby برای ارائه توضیحات کامل تر در صورت نیاز استفاده کنید.

11. متن جایگزین را تست کنید

مثال:

از یک صفحه خوان مانند NVDA یا VoiceOver استفاده کنید.

اشتباه رایج:

عدم آزمایش متن جایگزین برای اطمینان از صحت آن.

راه حل:

همیشه متن جایگزین را تست کنید تا از کیفیت آن مطمئن شوید.

12. به طور مداوم متن جایگزین را بررسی و به‌روزرسانی کنید

مثال:

اگر محصولی در تصویر تغییر کرده است، متن جایگزین را به روز کنید.

اشتباه رایج:

رها کردن متن جایگزین قدیمی و نامربوط.

راه حل:

به طور منظم متن جایگزین را بررسی و در صورت لزوم به‌روزرسانی کنید.