متن جایگزین برای تصاویر

استفاده از ویژگی alt برای ارائه متن جایگزین برای تصاویر

Alice Boxhall

Dave Gash

Meggin Kearney

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

<article>
    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
    <img src="imgs/160204193356-01-cat-500.jpg">
</article>

مطالعه نشان می دهد که از هر 10 گربه 9 گربه به آرامی صاحبان خود را هنگام خواب قضاوت می کنند

در صفحه ما تصویری از یک گربه داریم که مقاله ای در مورد رفتار قضاوتی شناخته شده گربه ها را نشان می دهد. یک صفحه‌خوان این تصویر را با استفاده از نام واقعی آن، "/160204193356-01-cat-500.jpg" اعلام می‌کند. این دقیق است، اما اصلا مفید نیست.

می‌توانید از ویژگی alt برای ارائه متن مفید جایگزین این تصویر استفاده کنید - به عنوان مثال، "گربه‌ای که به طرز تهدیدآمیزی به فضا خیره شده است."

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

سپس صفحه‌خوان می‌تواند توضیح مختصری از تصویر (که در نوار سیاه VoiceOver دیده می‌شود) اعلام کند و کاربر می‌تواند انتخاب کند که آیا به مقاله منتقل شود یا خیر.

چند نظر در مورد alt :

• alt به شما امکان می دهد یک رشته ساده را تعیین کنید تا در هر زمانی که تصویر در دسترس نیست، استفاده شود، مانند زمانی که تصویر بارگیری نمی شود، یا توسط ربات خزنده وب به آن دسترسی پیدا می کند، یا توسط یک صفحه خوان با آن مواجه می شود.
• alt با title یا هر نوع عنوان متفاوت است، زیرا فقط در صورتی استفاده می شود که تصویر در دسترس نباشد.

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

یک تصویر نشان‌واره پیوندی را در سرصفحه یک صفحه مانند آنچه در بالا نشان داده شده است در نظر بگیرید. ما می‌توانیم تصویر را با دقت به عنوان "لوگوی Funion" توصیف کنیم.

<img class="logo" src="logo.jpg" alt="The Funion logo">

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

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

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

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

<img src="magnifying-glass.jpg" alt="">

به طور خلاصه، همه تصاویر باید دارای ویژگی alt باشند، اما لازم نیست همه آنها متن داشته باشند. تصاویر مهم باید متن جایگزین توصیفی داشته باشند که به طور مختصر تصویر را توصیف کند، در حالی که تصاویر تزئینی باید دارای ویژگی‌های alt خالی باشند - یعنی alt="" .