تگ Alt چیست؟
در تمام تصاویر به کار رفته در یک وب سایت، تگ Alt توصیف کننده موضوعی است که از تصویر استنباط می شود. این تگ می تواند به عنوان متنی جایگزین برای تصاویر به هنگام خطا در بارگذاری نیز مورد استفاده قرار گیرد تا کاربران در صورت عدم نمایش تصویر، از مفهوم و عملکرد آن باخبر شوند.
علاوه بر این، مرورگرها قابلیتی دارند که معمولاً افراد نابینا یا دارای اختلال بینایی برای شنیدن مطالب آنلاین از آن استفاده می کنند. خواندن این تگ ها توسط مرورگر، انتقال مفهوم و محتوای تصاویر را برای این افراد امکان پذیر می‌کند.
کد زیر نمونه یک تگ تصویر HTML کامل است:
<img title=”“image” src=”“image.jpg”” alt=”“image” />
همانطور که مشاهده می‌کنید در کد بالا ۳ قسمت وجود دارد که در زیر کاربرد هر کدام را بررسی می‌کنیم:
۱٫ img src: این بخش، مرتبط با آدرس تصویر است. برای آنکه تصویری را در محتوای سایت خود قرار دهید، باید آدرس تصویر در محلی که ذخیره شده است را در این قسمت قرار دهید.
۲٫ Alt: این بخش مرتبط با تگ Alt است. در بین علامت نقل قول، باید تگ Alt مورد نظر خود را قرار دهید.
۳٫ Title: این بخش در حقیقت عنوان تصویر شماست. در این بخش باید برای تصویر خود عنوان مناسب قرار دهید.
ویژگی های عنوان و Alt در یک تصویر، گرچه از لحاظ تکنیکی واقعاً تگ محسوب نمی شوند، اما با نام تگ عنوان و تگ Alt شناخته می‌شوند. تگ Alt مفهوم و کاربرد تصویر را توصیف می‌کند. بنابراین، اگر شما از یک تصویر به عنوان یک دکمه برای خرید کالای X استفاده کرده‌اید، تگ Alt آن باید چیزی شبیه به دکمه خرید کالای X باشد.
هنگامی که نشانگر موس را روی تصاویر نگه می دارید، تگ عنوان ظاهر می‌شود. این تگ در حقیقت می‌تواند یک راهنمای ساده درباره عکس یا یک پیشنهاد جذاب برای تشویق کاربران به کلیک بر روی عکس باشد. بنابراین، در مورد مثال تصویر دکمه خرید کالا، تگ عنوان می‌تواند یک ابزار فراخوان برای عمل (یا اصطلاحاً Call-to-Action) مانند خرید کالای X تنها با ۲۰ هزار تومان باشد.
به طور معمول، تصاویر وب سایت برای بهتر دیده شدن توسط موتورهای جستجو به تگ Alt نیاز دارند. معمولاً تصاویری که به منظور طراحی و تزئین وب سایت استفاده می شوند، باید در بین کدهای CSS قرار گیرند نه در میان کدهای HTML. با این وجود اگر امکان این تغییر وجود ندارد، می توانید تگ Alt را خالی بگذارید تا مرورگرها و موتورهای جستجو از خواندن آنها صرف نظر کنند.
کاربرد متن جایگزین تصاویر (تگ Alt):
- اولین هدف و کاربرد تگ Alt تصاویر، افزودن یک متن به تصاویر در وب سایت می باشد. با تعریف Alt attribute به تگ <img> یکی از قوانین در دسترس بودن (Accessibility) وب سایت را اجرا کرده ایم. به عنوان مثال هنگامی که یک کاربر توسط دستگاه های صفحه خوان (Screen Reader) یک صفحه وب را مورد پیمایش قرار می دهد، این متن جایگزین برای تصاویر خوانده می شوند.
- در مواقعی که تصاویر به هر دلیلی لود نشوند (می تواند بدلیل کندی سرعت اینترنت باشد و یا مشکل داشتن آدرس تصویر و…)، تگ Alt بجای تصاویر به کاربر نمایش داده خواهند شد.
- تگ Alt تصاویر به خزنده های موتور جستجو کمک می کند تا مفهوم و توضیح تصاویر را راحت تر index کنند.
