برای اینکه یک صفحهخوان بتواند یک رابط کاربری گفتاری را به کاربر ارائه دهد، عناصر معنادار باید دارای برچسبهای مناسب یا جایگزینهای متنی باشند. یک برچسب یا متن جایگزین به یک عنصر نام قابل دسترسی می دهد که یکی از ویژگی های کلیدی برای بیان معنایی عنصر در درخت دسترسی است .
وقتی نام یک عنصر با نقش عنصر ترکیب میشود، به کاربر زمینه میدهد تا بتواند بفهمد با چه نوع عنصری تعامل دارد و چگونه در صفحه نمایش داده میشود. اگر نامی وجود نداشته باشد، صفحه خوان تنها نقش عنصر را اعلام می کند. تصور کنید سعی می کنید در یک صفحه پیمایش کنید و بدون هیچ زمینه اضافی، "دکمه"، "چک باکس"، "تصویر" را بشنوید. به همین دلیل است که برچسبگذاری و جایگزینهای متن برای یک تجربه خوب و در دسترس بسیار مهم هستند.
نام یک عنصر را بررسی کنید
بررسی نام قابل دسترسی یک عنصر با استفاده از ابزارهای توسعه دهنده 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
داخلی خود باشد، یک صفحهخوان معمولاً در مرز قاب متوقف میشود و نقش عنصر - "قاب" - و نام قابل دسترسی آن را که توسط ویژگی 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 زیر:
TODO: DevSite - ارزیابی فکر کنید و بررسی کنید