برچسب ها و جایگزین های متن

راب دادسون

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

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

نام یک عنصر را بررسی کنید

بررسی نام قابل دسترسی یک عنصر با استفاده از ابزارهای توسعه دهنده Chrome آسان است:

  1. روی یک عنصر کلیک راست کرده و Inspect را انتخاب کنید. با این کار پنل DevTools Elements باز می شود.
  2. در پنل Elements، به دنبال بخش Accessibility بگردید. ممکن است در پشت نماد » پنهان شده باشد.
  3. در قسمت کشویی Computed Properties به دنبال ویژگی Name بگردید.
صفحه دسترس‌پذیری DevTools که نام محاسبه‌شده یک دکمه را نشان می‌دهد.

چه به یک 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 خوب کمی هنر است، اما چند دستورالعمل وجود دارد که می توانید دنبال کنید:

  1. تعیین کنید که آیا تصویر محتوایی را ارائه می دهد که در غیر این صورت از خواندن متن اطراف به سختی به دست می آید.
  2. اگر چنین است، مطالب را تا حد امکان به طور خلاصه بیان کنید.

اگر تصویر به عنوان تزئین عمل می کند و محتوای مفیدی ارائه نمی دهد، می توانید یک ویژگی 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>.

این به ویژه برای صفحه‌خوان‌هایی که میانبرهایی برای فهرست کردن همه پیوندهای صفحه ارائه می‌دهند مفید است. اگر پیوندها مملو از متن پرکننده تکراری باشند، این میانبرها بسیار کمتر مفید خواهند بود:

منوی پیوندهای VoiceOver با کلمه "اینجا" پر شده است.
مثالی از VoiceOver، یک صفحه‌خوان برای macOS، که منوی پیمایش بر اساس پیوندها را نشان می‌دهد.

عناصر فرم را برچسب بزنید

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

  • عنصر ورودی را در داخل یک عنصر برچسب قرار دهید 
<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 زیر:

خروجی متن VoiceOver که "پیشنهادهای تبلیغاتی را دریافت می کنید؟"

TODO: DevSite - ارزیابی فکر کنید و بررسی کنید