انتخاب متن مناسب:
تصور کنید که صفحه وب را با صدای بلند از طریق تلفن برای کسی می‌خوانید که نیاز به درک صفحه دارد. این باید به شما کمک کند که تصمیم بگیرید (در صورت وجود) اطلاعات یا عملکردی که تصاویر دارند. اگر به نظر می رسد که ارزش اطلاعاتی ندارند و پیوند یا دکمه نیستند، احتمالاً می توان آنها را تزئینی دانست .
اولویت بندی اطلاعات در متن جایگزین:
هدف قرار دادن مهمترین اطلاعات در آغاز.
طول متن جایگزین:
متن altباید مختصرترین توصیف ممکن از هدف تصویر باشد. اگر چیزی بیش از یک عبارت یا جمله کوتاه مورد نیاز است، بهتر است از یکی از روش های توصیف طولانی که در تصاویر پیچیده بحث شده است استفاده کنید .
طراحی پاسخگو:
آیکون‌های دارای برچسب متنی معمولاً وقتی در صفحه‌های کوچک‌تر مشاهده می‌شوند، برچسب‌های متنی را حذف می‌کنند. اطمینان حاصل کنید که نمادها در آن اندازه قابل خواندن، بدون متن قابل درک هستند و دارای توضیحات متنی هستند.
نقطه گذاری در altصفات:
همانند هر متنی، استفاده از علائم نگارشی در متن جایگزین، درک اطلاعات را آسان‌تر می‌کند. altبه ویژه، به یاد داشته باشید که وقتی هیچ کاراکتر فاصله ای بین تصویر و متن مجاور وجود ندارد، کاراکترهای فاصله را به متن اضافه کنید ، تا هنگام خواندن کلمات توسط صفحه خوان، کلماتی با هم اجرا نشوند.
اگر از متن خالی (خالی) جایگزین ( alt=””) برای مخفی کردن تصاویر تزئینی استفاده می کنید، مطمئن شوید که هیچ کاراکتر فاصله ای بین نقل قول ها وجود ندارد. اگر یک شخصیت فضایی وجود داشته باشد، ممکن است تصویر به طور موثر از فناوری های کمکی پنهان نشود. به عنوان مثال، برخی از صفحه‌خوان‌ها همچنان وجود یک تصویر را اعلام می‌کنند اگر یک کاراکتر فاصله بین نقل‌قول‌ها قرار داده شود.
اطلاعات اضافی در متن جایگزین:
معمولاً نیازی به اضافه کردن کلماتی مانند «تصویر»، «آیکون» یا «تصویر» در متن جایگزین نیست. افرادی که می توانند ببینند از قبل این را می دانند و صفحه خوان ها حضور یک تصویر را اعلام می کنند. در برخی شرایط، تشخیص تمایز بین نقاشی‌ها، عکس‌ها یا تصاویر و غیره ممکن است مهم باشد، اما بهتر است از استفاده عمومی‌تر از اصطلاحات خودداری کنید.
گرافیک SVG:
گرافیک SVG را می توان در srcویژگی یک <img>عنصر مانند سایر فرمت های تصویر (PNG، JPEG، GIF) ارجاع داد. در این صورت می توان از نمونه های این آموزش با SVG نیز استفاده کرد.
از آنجایی که تصاویر SVG از برچسب هایی مانند HTML تشکیل شده اند، کد آنها می تواند مستقیماً در HTML5 نیز استفاده شود. در این حالت می توانید یک متن جایگزین در یک <title>عنصر در تصویر SVG ارائه دهید. برای بهبود پشتیبانی دسترسی، آن عنوان باید از یک aria-labelledbyویژگی عنصر ارجاع داده شود <svg>، به عنوان مثال:
<svg aria-labelledby=”svgtitle1″> <title id=”svgtitle1″>Settings</title> [other svg code] </svg>
لوگوها:
تصاویر لوگو با متن از برخی از الزامات دسترسی مستثنی هستند. به عنوان مثال، حداقل نیاز کنتراست وجود ندارد.
مثال 1: تصویر مورد استفاده به عنوان بخشی از طراحی صفحه
این تصویر به عنوان حاشیه در طراحی صفحه استفاده می شود و صرفاً جنبه تزئینی دارد.
خوانندگان صفحه همچنین استفاده از WAI-ARIA را برای پنهان کردن عناصر با استفاده از role="presentation". با این حال، در حال حاضر، این ویژگی به اندازه استفاده از altویژگی null پشتیبانی نمی شود.
مثال 2: تصویر تزئینی به عنوان بخشی از پیوند متنی
این تصویر از یک لامپ کروکوس برای سهولت شناسایی پیوند و افزایش ناحیه قابل کلیک استفاده می شود اما به اطلاعاتی که قبلاً در متن پیوند مجاور (از همان لنگر) ارائه شده است اضافه نمی کند. در این حالت از یک altمقدار null (خالی) برای تصویر استفاده کنید.
مثال 3: تصویر با متن مجاور جایگزین
این تصویر از یک سگ در حال خواب به اندازه کافی توسط متن مجاور توضیح داده شده است. نیازی به تکرار این اطلاعات نیست و altمی توان از مقدار null (خالی) برای این تصویر استفاده کرد.
مثال 4: تصویر مورد استفاده برای محیط (چشم شیرین)
این تصویر فقط برای افزودن محیط یا علاقه بصری به صفحه استفاده می شود.
تصاویر باید متنی جایگزین داشته باشند که اطلاعات یا عملکرد ارائه شده توسط آنها را توصیف کند. این تضمین می کند که تصاویر می توانند توسط افراد دارای معلولیت های مختلف استفاده شوند . این آموزش نحوه ارائه متن های جایگزین مناسب بر اساس هدف تصویر را نشان می دهد:
تصاویر آموزنده : تصاویری که مفاهیم و اطلاعات را به صورت گرافیکی نشان می دهند، معمولاً تصاویر، عکس ها و تصاویر. متن جایگزین باید حداقل یک توضیح کوتاه باشد که اطلاعات ضروری ارائه شده توسط تصویر را منتقل کند.
تصاویر تزئینیalt=”” : زمانی که تنها هدف یک تصویر اضافه کردن تزئینات بصری به صفحه است، به جای انتقال اطلاعاتی که برای درک صفحه مهم هستند،یک متن خالی ( ) ارائه دهید
تصاویر کاربردی : متن جایگزین تصویری که به عنوان پیوند یا دکمه استفاده می‌شود، باید عملکرد پیوند یا دکمه را به جای تصویر بصری توصیف کند. نمونه هایی از این تصاویر یک نماد چاپگر برای نشان دادن عملکرد چاپ یا یک دکمه برای ارسال فرم است.
تصاویر متن : گاهی اوقات متن قابل خواندن در یک تصویر ارائه می شود. اگر تصویر لوگو نیست، از متن در تصاویر خودداری کنید. با این حال، اگر از تصاویر متن استفاده می شود، متن جایگزین باید حاوی همان کلماتی باشد که در تصویر وجود دارد.
تصاویر پیچیده مانند نمودارها و نمودارها: برای انتقال داده یا اطلاعات دقیق، معادل متن کامل داده یا اطلاعات ارائه شده در تصویر را به عنوان جایگزین متن ارائه دهید.
گروه‌های تصاویر : اگر چندین تصویر یک تکه اطلاعات را منتقل می‌کنند، متن جایگزین برای یک تصویر باید اطلاعات کل گروه را منتقل کند.
نقشه‌های تصویری : متن جایگزین برای تصویری که دارای چندین ناحیه قابل کلیک است، باید یک زمینه کلی برای مجموعه پیوندها فراهم کند. همچنین، هر ناحیه قابل کلیک جداگانه باید متن جایگزینی داشته باشد که هدف یا مقصد پیوند را توصیف کند.
برای یک نمای کلی درباره تصمیم گیری در مورد اینکه یک تصویر خاص در کدام دسته قرار می گیرد، به altدرخت تصمیم مراجعه کنید . متن جایگزین باید توسط نویسنده، بسته به کاربرد، زمینه و محتوای یک تصویر تعیین شود. به عنوان مثال، نوع و ظاهر دقیق یک پرنده در یک تصویر ممکن است کمتر مرتبط باشد و فقط به طور خلاصه در یک وب سایت در مورد پارک ها توضیح داده شود، اما ممکن است در یک وب سایت به طور خاص در مورد پرندگان مناسب باشد.
چرا این مهم است؟
تصاویر و گرافیک ها محتوا را برای بسیاری از افراد و به ویژه برای افرادی که دارای ناتوانی های شناختی و یادگیری هستند، دلپذیرتر و آسان تر می کند. آنها به عنوان نشانه هایی عمل می کنند که توسط افراد دارای اختلالات بینایی، از جمله افراد کم بینا، برای جهت دهی خود در محتوا استفاده می شود.
با این حال، تصاویر به طور گسترده در وب سایت ها مورد استفاده قرار می گیرند و در صورت عدم دسترسی می توانند موانع بزرگی ایجاد کنند. تصاویر در دسترس در بسیاری از موقعیت ها مفید هستند، مانند:
افرادی که از صفحه‌خوان استفاده می‌کنند: متن جایگزین را می‌توان با صدای بلند خواند یا به صورت خط بریل ارائه کرد
افرادی که از نرم‌افزار ورودی گفتار استفاده می‌کنند: کاربران می‌توانند با یک فرمان صوتی، فوکوس را روی یک دکمه یا تصویر مرتبط قرار دهند
افرادی که وب‌سایت‌های دارای گفتار را مرور می‌کنند: متن جایگزین را می‌توان با صدای بلند خواند
کاربران وب موبایل: تصاویر را می توان خاموش کرد، به خصوص برای رومینگ داده
بهینه سازی موتورهای جستجو: تصاویر توسط موتورهای جستجو نمایه می شوند
توجه داشته باشید
حذف تصاویر از وب سایت ها (به اصطلاح “نسخه های متنی”) آنها را برای این کاربران و موقعیت ها کمتر در دسترس و کاربردی می کند.
منابع WCAG مرتبط
این آموزش‌ها بهترین راهنمایی‌ها را در مورد پیاده‌سازی قابلیت دسترسی در موقعیت‌های مختلف ارائه می‌کنند. این صفحه معیارها و تکنیک های موفقیت WCAG زیر را از سطوح مختلف انطباق ترکیب می کند:
معیارهای موفقیت:
1.1.1 محتوای غیر متنی: تمام محتوای غیر متنی که به کاربر ارائه می‌شود دارای متن جایگزینی است که هدفی معادل را دنبال می‌کند، به استثنای موقعیت‌های فهرست شده[…]. (سطح A)
1.4.5 تصاویر متن: اگر فناوری های مورد استفاده بتوانند به ارائه بصری دست یابند، از متن برای انتقال اطلاعات به جای تصاویر متن استفاده می شود به جز [برای تصاویر قابل تنظیم و ضروری] (سطح AA)
1.4.9 تصاویر متن (بدون استثنا): تصاویر متن فقط برای تزئین خالص استفاده می شوند یا در مواردی که ارائه خاصی از متن برای اطلاعات منتقل شده ضروری است (سطح AAA)
درخت altتصمیم
در آموزش تصاویر
بررسی اجمالی
این درخت تصمیم نحوه استفاده از altویژگی عنصر را <img>در موقعیت های مختلف توضیح می دهد. برای برخی از انواع تصاویر، رویکردهای جایگزین وجود دارد، مانند استفاده از تصاویر پس زمینه CSS برای تصاویر تزئینی یا فونت های وب به جای تصاویر متن.
آیا تصویر حاوی متن است؟
آره:
… و متن نیز به عنوان متن واقعی در این نزدیکی وجود دارد.
از یک ویژگی خالی استفاده کنید alt. تصاویر تزئینی را ببینید .
… و متن فقط برای جلوه های بصری نشان داده می شود.
از یک ویژگی خالی استفاده کنید alt. تصاویر تزئینی را ببینید .
… و متن دارای یک عملکرد خاص است، به عنوان مثال یک نماد است.
از altویژگی برای برقراری ارتباط با عملکرد تصویر استفاده کنید. تصاویر کاربردی را ببینید .
… و متن در تصویر در غیر این صورت وجود ندارد.
از altویژگی برای درج متن تصویر استفاده کنید. تصاویر متن را ببینید .
خیر:
ادامه هید.
آیا تصویر در یک پیوند یا یک دکمه استفاده می‌شود، و اگر تصویر وجود نداشت، درک اینکه پیوند یا دکمه چه کار می‌کند سخت یا غیرممکن است؟
آره:
از altویژگی برای ارتباط با مقصد پیوند یا اقدام انجام شده استفاده کنید. تصاویر کاربردی را ببینید .
خیر:
ادامه هید.
آیا تصویر به صفحه یا زمینه فعلی کمک می کند؟
آره:
… و این یک گرافیک یا عکس ساده است.
از یک توضیح مختصر از تصویر به گونه ای استفاده کنید که آن معنی را در altویژگی منتقل کند. تصاویر آموزنده را ببینید .
… و این یک نمودار یا یک قطعه اطلاعات پیچیده است.
اطلاعات موجود در تصویر را در جای دیگری از صفحه درج کنید. تصاویر پیچیده را ببینید .
… و محتوایی را نشان می دهد که به متن واقعی نزدیک است.
از یک ویژگی خالی استفاده کنید alt. تصاویر کاربردی (زائد) را ببینید .
خیر:
ادامه هید.
آیا تصویر صرفاً تزئینی است یا برای کاربر در نظر گرفته نشده است؟
آره:
از یک ویژگی خالی استفاده کنید alt. تصاویر تزئینی را ببینید .
خیر:
ادامه هید.
آیا استفاده از تصویر در بالا ذکر نشده است یا مشخص نیست چه altمتنی باید ارائه شود؟
این درخت تصمیم همه موارد را پوشش نمی دهد . برای اطلاعات دقیق در مورد ارائه متن جایگزین به صفحه مفاهیم تصویر مراجعه کنید .
