برای اینکه یک صفحهخوان بتواند یک رابط کاربری گفتاری را به کاربر ارائه دهد، عناصر معنادار باید دارای برچسبهای مناسب یا جایگزینهای متنی باشند. یک برچسب یا متن جایگزین به یک عنصر نام قابل دسترسی می دهد که یکی از ویژگی های کلیدی برای بیان معنایی عنصر در درخت دسترسی است .
وقتی نام یک عنصر با نقش عنصر ترکیب میشود، به کاربر زمینه میدهد تا بتواند بفهمد با چه نوع عنصری تعامل دارد و چگونه در صفحه نمایش داده میشود. اگر نامی وجود نداشته باشد، صفحه خوان تنها نقش عنصر را اعلام می کند. تصور کنید سعی می کنید در یک صفحه پیمایش کنید و بدون هیچ زمینه اضافی، "دکمه"، "چک باکس"، "تصویر" را بشنوید. به همین دلیل است که برچسبگذاری و جایگزینهای متن برای یک تجربه خوب و در دسترس بسیار مهم هستند.
نام یک عنصر را بررسی کنید
بررسی نام قابل دسترسی یک عنصر با استفاده از ابزارهای توسعه دهنده Chrome آسان است:
- روی یک عنصر کلیک راست کرده و Inspect را انتخاب کنید. با این کار پنل DevTools Elements باز می شود.
- در پنل Elements، به دنبال بخش Accessibility بگردید. ممکن است در پشت نماد
»
پنهان شده باشد. - در قسمت کشویی Computed Properties به دنبال ویژگی Name بگردید.
چه به یک img
با متن alt
یا یک input
با label
نگاه کنید، همه این سناریوها نتیجه یکسانی دارند: دادن نام قابل دسترسی به یک عنصر.
اسامی گمشده را بررسی کنید
روش های مختلفی برای افزودن نام قابل دسترسی به یک عنصر بسته به نوع آن وجود دارد. جدول زیر متداولترین انواع عناصر را فهرست میکند که به نامهای قابل دسترس و پیوندهایی به توضیحات برای نحوه افزودن آنها نیاز دارند.
نوع عنصر | نحوه اضافه کردن نام |
---|---|
سند HTML | اسناد و قاب ها را برچسب بزنید |
عناصر <frame> یا <iframe> | اسناد و قاب ها را برچسب بزنید |
عناصر تصویر | شامل متن جایگزین برای تصاویر و اشیا |
عناصر <input type="image"> | شامل متن جایگزین برای تصاویر و اشیاء |
عناصر <object> | شامل متن جایگزین برای تصاویر و اشیا |
دکمه ها | دکمه ها و پیوندها را برچسب بزنید |
پیوندها | دکمه ها و پیوندها را برچسب بزنید |
عناصر فرم | عناصر فرم را برچسب بزنید |
اسناد و قاب ها را برچسب بزنید
هر صفحه باید یک عنصر title
داشته باشد که به طور خلاصه توضیح دهد که صفحه در مورد چیست. عنصر title
به صفحه نام قابل دسترسی آن را می دهد. هنگامی که یک صفحه خوان وارد صفحه می شود، این اولین متنی است که اعلام می شود.
برای مثال، صفحه زیر عنوان «دستور پخت سریع نوار افرا مری» را دارد:
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
به طور مشابه، هر frame
یا عناصر iframe
باید دارای ویژگی های title
باشد:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
در حالی که محتوای iframe
ممکن است حاوی عنصر title
داخلی خود باشد، یک صفحهخوان معمولاً در مرز قاب توقف میکند و نقش عنصر - "frame" - و نام قابل دسترسی آن را که توسط ویژگی title
ارائه شده است، اعلام میکند. این به کاربر اجازه میدهد تصمیم بگیرد که آیا میخواهد وارد قاب شود یا آن را دور بزند.
شامل متن جایگزین برای تصاویر و اشیا
یک img
باید همیشه با یک ویژگی alt
همراه باشد تا نام قابل دسترسی به تصویر داده شود. اگر تصویر بارگیری نشود، متن alt
بهعنوان یک مکاننما استفاده میشود تا کاربران درک کنند که تصویر سعی دارد چه چیزی را منتقل کند.
نوشتن متن alt
خوب کمی هنر است، اما چند دستورالعمل وجود دارد که می توانید دنبال کنید:
- تعیین کنید که آیا تصویر محتوایی را ارائه می دهد که در غیر این صورت از خواندن متن اطراف به سختی به دست می آید.
- اگر چنین است، مطالب را تا حد امکان به طور خلاصه بیان کنید.
اگر تصویر به عنوان تزئین عمل می کند و محتوای مفیدی ارائه نمی دهد، می توانید یک ویژگی alt=""
خالی به آن بدهید تا آن را از درخت دسترسی حذف کنید.
تصاویر به عنوان لینک و ورودی
تصویری که در یک پیوند پیچیده شده است باید از ویژگی alt
img
برای توضیح اینکه کاربر در صورت کلیک بر روی پیوند به کجا می رود استفاده کند:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
به طور مشابه، اگر یک عنصر <input type="image">
برای ایجاد یک دکمه تصویر استفاده شود، باید حاوی متن alt
باشد که عملکردی را که هنگام کلیک کاربر روی دکمه انجام میشود، توصیف کند:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
اشیاء تعبیه شده
عناصر <object>
که معمولاً برای جاسازیهایی مانند Flash، PDF یا ActiveX استفاده میشوند، باید حاوی متن جایگزین نیز باشند. مشابه تصاویر، در صورتی که عنصر رندر نشود، این متن نمایش داده می شود. متن جایگزین در داخل عنصر object
به عنوان متن معمولی مانند "گزارش سالانه" در زیر می رود:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
دکمه ها و پیوندها را برچسب بزنید
دکمه ها و پیوندها اغلب برای تجربه یک سایت بسیار مهم هستند، و مهم است که هر دو نام های قابل دسترسی خوبی داشته باشند.
دکمه ها
یک عنصر button
همیشه سعی می کند نام قابل دسترس خود را با استفاده از محتوای متنی خود محاسبه کند. برای دکمه هایی که بخشی از یک form
نیستند، نوشتن یک عمل واضح به عنوان محتوای متن ممکن است تنها چیزی باشد که برای ایجاد یک نام قابل دسترس خوب نیاز دارید.
<button>Book Room</button>
یکی از استثناهای رایج برای این قانون، دکمههای آیکون است. یک دکمه نماد ممکن است از یک تصویر یا یک فونت نماد برای ارائه محتوای متنی برای دکمه استفاده کند. به عنوان مثال، دکمههای مورد استفاده در ویرایشگر What You See Is What You Get (WYSIWYG) برای قالببندی متن معمولاً فقط نمادهای گرافیکی هستند:
هنگام کار با دکمههای آیکون، میتوان با استفاده از ویژگی aria-label
یک نام قابل دسترسی واضح به آنها داد. aria-label
هر محتوای متنی را در داخل دکمه لغو میکند، و به شما امکان میدهد به وضوح عمل را برای هر کسی که از صفحهخوان استفاده میکند، توصیف کنید.
<button aria-label="Left align"></button>
پیوندها
مانند دکمه ها، لینک ها در درجه اول نام قابل دسترسی خود را از محتوای متن خود دریافت می کنند. یک ترفند خوب هنگام ایجاد پیوند این است که به جای کلمات پرکننده مانند "اینجا" یا "بیشتر بخوانید"، معنیدارترین متن را در خود پیوند قرار دهید.
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
این به ویژه برای صفحهخوانهایی که میانبرهایی را برای فهرست کردن همه پیوندهای صفحه ارائه میدهند مفید است. اگر پیوندها مملو از متن پرکننده تکراری باشند، این میانبرها بسیار کمتر مفید خواهند بود:
عناصر فرم را برچسب بزنید
دو روش برای مرتبط کردن یک برچسب با یک عنصر فرم مانند یک چک باکس وجود دارد. هر یک از این روش ها باعث می شود که متن برچسب نیز به هدف کلیک برای چک باکس تبدیل شود، که برای کاربران ماوس یا صفحه لمسی نیز مفید است. برای مرتبط کردن یک برچسب با یک عنصر، یکی از موارد زیر است:
- عنصر ورودی را در داخل یک عنصر برچسب قرار دهید
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- یا از برچسب
for
ویژگی استفاده کنید و بهid
عنصر مراجعه کنید
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
هنگامی که چک باکس به درستی برچسب گذاری شده باشد، صفحه خوان می تواند گزارش دهد که عنصر نقش چک باکس را دارد، در وضعیت علامت گذاری شده قرار دارد و به نام "دریافت پیشنهادهای تبلیغاتی؟" مانند مثال VoiceOver زیر: