تصاویر قابل دسترس ممکن است در نگاه اول یک موضوع سریع به نظر برسند - شما مقداری "متن جایگزین" به یک تصویر اضافه میکنید و کار تمام است. اما، این موضوع ظریفتر از آن چیزی است که برخی افراد فکر میکنند. در این بخش، موارد زیر را بررسی خواهیم کرد:
- چگونه کد را بهروزرسانی کنیم تا تصاویر قابل دسترسی شوند.
- چه اطلاعاتی باید با کاربران به اشتراک گذاشته شود و کجا باید به اشتراک گذاشته شود.
- راههای اضافی برای بهبود تصاویر شما برای حمایت از افراد دارای معلولیت.
هدف و زمینه تصویر
قبل از اینکه حتی یک خط کد بنویسید، در مورد هدف تصویر نقطهای، محل قرارگیری آن و نحوه استفاده از آن فکر کنید. پرسیدن این سؤالات از خودتان میتواند به شما کمک کند تا تعیین کنید که چگونه میتوانید اطلاعات را به بهترین شکل به شخصی که از فناوری کمکی (AT) مانند صفحهخوان استفاده میکند، منتقل کنید.
ممکن است از خود بپرسید:
- آیا تصویر برای درک زمینهی ویژگی یا صفحه ضروری است؟
- تصویر سعی در انتقال چه نوع اطلاعاتی دارد؟
- تصویر ساده است یا پیچیده؟
- آیا تصویر احساسات را برمیانگیزد یا کاربر را به اقدام وادار میکند؟
- یا اینکه تصویر فقط یک "جذابیت بصری" است و هیچ هدف واقعی ندارد؟
یک فلوچارت بصری، مانند درخت تصمیمگیری تصویر ، میتواند به شما کمک کند تا تصمیم بگیرید تصویر شما به کدام دسته تعلق دارد.
سعی کنید تصاویر سایت یا برنامه وب خود را با استفاده از افزونه مرورگر یا روشهای دیگر پنهان کنید. سپس از خود بپرسید: "آیا محتوای باقی مانده را میفهمم؟" اگر پاسخ مثبت است، به احتمال زیاد یک تصویر تزئینی است. اگر نه، تصویر به نوعی آموزنده است و از نظر زمینهای ضروری است. پس از تعیین هدف تصویر، میتوانید دقیقترین روش برای کدگذاری آن را تعیین کنید.
تصاویر تزئینی
یک تصویر تزئینی، عنصری بصری است که زمینه یا اطلاعات اضافی اضافه نمیکند تا کاربر بتواند زمینه را بهتر درک کند. تصاویر تزئینی، مکمل هستند و ممکن است به جای محتوا، سبک ارائه دهند.
اگر تصمیم بگیرید که یک تصویر تزئینی است، باید از طریق برنامهنویسی از ATها پنهان شود. وقتی شما تصویری را برای پنهان شدن برنامهریزی میکنید، به AT سیگنال میدهید که تصویر برای درک محتوا، زمینه یا عملکرد صفحه لازم نیست. روشهای زیادی برای پنهان کردن تصاویر وجود دارد، از جمله استفاده از یک متن خالی یا تهی جایگزین، اعمال ARIA یا اضافه کردن تصویر به عنوان پسزمینه CSS. در اینجا چند مثال از نحوه پنهان کردن یک تصویر تزئینی از کاربران آورده شده است.
alt خالی یا تهی
یک ویژگی متن جایگزین خالی یا تهی با یک ویژگی متن جایگزین مفقود متفاوت است. اگر ویژگی متن جایگزین مفقود باشد، AT ممکن است نام فایل یا محتوای اطراف آن را بخواند تا اطلاعات بیشتری در مورد تصویر به کاربر ارائه دهد.
نقش روی presentation یا none تنظیم شده است
نقشی که روی presentation یا none تنظیم شده باشد، معنای یک عنصر را از نمایش در درخت دسترسیپذیری حذف میکند. در همین حال، aria-hidden= "true" کل عنصر - و تمام فرزندانش - را از API دسترسیپذیری حذف میکند.
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
aria-hidden با احتیاط استفاده کنید زیرا ممکن است عناصری را که نمیخواهید پنهان شوند، پنهان کند.
تصاویر در CSS
وقتی با CSS تصویر پسزمینه اضافه میکنید، نرمافزار صفحهخوان نمیتواند فایل تصویر را تشخیص دهد. قبل از اعمال این روش، مطمئن شوید که میخواهید تصویر پنهان باشد.
تصاویر آموزنده
یک تصویر آموزنده، تصویری است که یک مفهوم، ایده یا احساس را منتقل میکند. تصاویر آموزنده شامل عکسهایی از اشیاء دنیای واقعی، آیکونهای ضروری، نقاشیهای ساده و تصاویر متن هستند.
اگر تصویر شما آموزنده است، باید متن جایگزین برنامهریزیشدهای را که هدف تصویر را توصیف میکند، در آن قرار دهید. توضیحات جایگزین تصویر - که اغلب به اختصار "متن جایگزین" نامیده میشود - به کاربران AT زمینه بیشتری در مورد تصویر میدهد و به آنها کمک میکند تا پیام یا هدف تصویر را بهتر درک کنند.
شما میتوانید با اضافه کردن ویژگی alt ، توضیحات جایگزین را به عناصر <img> اضافه کنید. این موضوع در مورد همه انواع فایلها، از جمله JPG، PNG یا SVG صدق میکند.
<img src=".../Ladybug_Swarm.jpg"
alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
با این حال، وقتی از عناصر <svg> به صورت درونخطی استفاده میکنید، باید به دسترسیپذیری توجه بیشتری داشته باشید. SVGها از نظر معنایی کدگذاری شدهاند، بنابراین AT به طور پیشفرض از آنها عبور میکند.
اگر SVG یک تصویر تزئینی باشد، مشکلی نیست—AT آن را نادیده میگیرد. اما اگر SVG شما یک تصویر آموزنده است، ARIA role="img" را به عنصر اضافه کنید تا AT آن را به عنوان یک تصویر تشخیص دهد.
دوم، عناصر <svg> از ویژگی alt استفاده نمیکنند، بنابراین باید از روشهای کدنویسی متفاوتی برای اضافه کردن توضیحات جایگزین به تصاویر آموزنده خود استفاده کنید.
<svg role="img">
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
تصاویر کاربردی
یک تصویر کاربردی به یک عمل متصل است. نمونهای از یک تصویر کاربردی، لوگویی است که به صفحه اصلی لینک میشود، یک ذرهبین که به عنوان دکمه جستجو استفاده میشود، یا یک آیکون رسانه اجتماعی که شما را به یک وبسایت یا برنامه دیگر هدایت میکند.
مانند تصاویر آموزنده، تصاویر کاربردی نیز باید شامل یک توضیح جایگزین باشند تا همه کاربران را از هدف خود آگاه کنند. برخلاف یک تصویر آموزنده، هر تصویر کاربردی باید عملکرد تصویر را توصیف کند - نه جنبههای بصری آن را.
در مثال لوگو، تصویر هم آموزنده و هم کاربردی است، زیرا هم تصویری است که اطلاعات را منتقل میکند و هم به عنوان یک لینک عمل میکند. در مواردی مانند این، میتوانید توضیحات جایگزین را به هر عنصر اضافه کنید - اما این یک الزام نیست.
یکی از راههای اضافه کردن توضیحات جایگزین به تصاویر، از طریق متن پنهان بصری است. وقتی از این روش استفاده میکنید، متن توسط صفحهخوانها خوانده میشود زیرا در DOM قرار دارد، اما با کمک CSS سفارشی از نظر بصری پنهان میشود.
از قطعه کد میتوانید ببینید که «به صفحه اصلی بروید» عنوان بستهبندی است و متن جایگزین تصویر «کفشدوزکهای دوستداشتنی برای چمن شما» است. وقتی با یک صفحهخوان به کد لوگو گوش میدهید، هم تصویر و هم عمل منتقل شده در یک تصویر را میشنوید.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
تصاویر پیچیده
یک تصویر پیچیده اغلب به توضیحات بیشتری نسبت به یک تصویر تزئینی، اطلاعاتی یا کاربردی نیاز دارد. برای انتقال کامل پیام، به توضیحات جایگزین کوتاه و بلند نیاز دارد. تصاویر پیچیده شامل اینفوگرافیکها، نقشهها، نمودارها/گرافها و تصاویر پیچیده هستند.
همانند سایر انواع تصویر، روشهای مختلفی وجود دارد که میتوانید برای اضافه کردن توضیحات جایگزین به تصاویر پیچیده خود استفاده کنید.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
یک راه برای افزودن توضیحات بیشتر به یک تصویر، لینک دادن به یک منبع یا ارائه لینک پرش به توضیحات طولانیتر در صفحه بعدی است. این روش نه تنها برای کاربران AT انتخاب خوبی است، بلکه به افراد دارای معلولیت - مانند معلولیتهای شناختی، یادگیری و خواندن - نیز کمک میکند که ممکن است از داشتن این اطلاعات اضافی تصویر که به راحتی روی صفحه نمایش در دسترس است به جای اینکه در کد پنهان شود، بهرهمند شوند.
روش دیگری که میتوانید استفاده کنید، اضافه کردن ویژگی aria-describedby به عنصر <img> است. میتوانید به صورت برنامهنویسی، تصویر را به یک شناسه حاوی توضیحات طولانیتر پیوند دهید. این روش ارتباط قوی بین تصویر و توضیحات کامل ایجاد میکند. توضیحات تکمیلی میتواند روی صفحه نمایش داده شود یا از نظر بصری پنهان باشد - اما برای پشتیبانی از افراد بیشتر، آن را در معرض دید نگه دارید.
یک راه دیگر برای گروهبندی توضیحات کوتاه جایگزین با توضیحات طولانیتر، استفاده از عناصر <figure> و <figcaption> است. این عناصر مشابه aria-describedby عمل میکنند، به این صورت که عناصر را از نظر معنایی گروهبندی میکنند و ارتباط قویتری بین تصویر و توضیحات آن ایجاد میکنند.
اضافه کردن ARIA role="group" سازگاری با مرورگرهای وب قدیمیتر که از معنای عنصر <figure> پشتیبانی نمیکنند را تضمین میکند.
بهترین شیوههای متن جایگزین
البته، قرار دادن متن جایگزین کافی نیست. متن باید معنادار نیز باشد. برای مثال، اگر تصویر شما درباره دستهای از کفشدوزکها باشد که برگهای بوته گل رز ارزشمند شما را میجوند، اما متن جایگزین شما «حشرات» باشد، آیا این متن پیام و هدف کامل تصویر را منتقل میکند؟ قطعاً نه.
توضیحات جایگزین باید تا حد امکان اطلاعات بصری مرتبط را در بر داشته باشند و مختصر باشند. اگرچه محدودیتی برای تعداد کاراکترهایی که یک صفحهخوان میتواند بخواند وجود ندارد، اما معمولاً توصیه میشود متن جایگزین خود را به ۱۵۰ کاراکتر یا کمتر محدود کنید تا از خستگی خواننده جلوگیری شود. اگر نیاز به اضافه کردن زمینه اضافی به تصویر دارید، میتوانید از یکی از الگوهای پیچیده تصویر استفاده کنید، متن زیرنویس اضافه کنید یا تصویر را در متن اصلی بیشتر توصیف کنید.
برخی از بهترین شیوههای متن جایگزین اضافی عبارتند از:
- از استفاده از کلماتی مانند «تصویر» یا «عکس» در توضیحات خودداری کنید، زیرا صفحهخوان این نوع فایلها را برای شما شناسایی میکند.
- هنگام نامگذاری تصاویر خود، تا حد امکان دقیق و منسجم باشید. نام تصاویر زمانی که متن جایگزین وجود ندارد یا نادیده گرفته میشود، جایگزین مناسبی است.
- از استفاده از کاراکترهای غیر از حروف الفبا (مثلاً #، 9، &) خودداری کنید و در نام تصاویر یا متن جایگزین، به جای زیرخط، از خط فاصله بین کلمات استفاده کنید.
- هر زمان که ممکن است از علائم نگارشی مناسب استفاده کنید. بدون آن، توضیحات تصویر مانند یک جمله طولانی، بیپایان و طولانی به نظر میرسد.
- متن جایگزین را مانند یک انسان بنویسید، نه یک ربات. انباشتن کلمات کلیدی به نفع هیچکس نیست—افرادی که از صفحهخوانها استفاده میکنند، آزرده خاطر خواهند شد و الگوریتمهای موتور جستجو شما را جریمه خواهند کرد.