قانون «تطابق برچسب و نام» مستلزم آن است که در جایی که یک جزء از صفحه دارای برچسب متنی (قابل مشاهده) است، نام آن جزء در کدنویسی (Accessible Name) نیزحاوی متن نمایش داده شده باشد.
توضیحات
برخی از کاربران، برای تشخیص اجزا یا کنترلها، به جای تکیه بر برچسبی که به شکل بصری نمایش داده میشود، بر نامی استناد میکنند که در فرایند کدنویسی (Accessible Name) برای آن جزء یا کنترل در نظر گرفته شده است. مطابقت میان نام یک کنترل و چیزی که نمایش داده میشود، بهویژه برای کاربرانی مفید است که از فناوریهای کمکی مثل صفحهخوانها استفاده میکنند.
برای کاربرانی که از ورودی گفتاری استفاده میکنند، عدم تطابق نام کنترل و برچسب، مشکلاتی را ایجاد میکند؛ چرا که این کاربران مجبور خواهند بود در هنگام تعامل با کنترلها، نامی غیر از آنچه که نمایش داده میشود را بهکار ببرند.
روش صحیح انطباق با شاخص موفقیت «تطابق برچسب و نام»
- اطمینان حاصل کنید که برچسبی که برای اجزا در نظر میگیرید، با نامی که در فرایند کدنویسی به آن اختصاص دادهاید، مطابقت کامل دارد.
موارد استثنا
- جایی که برای یک جزء، هیچ نام بصری وجود ندارد.
- در جایی که از متن، بهصورت نمادین استفاده شده، مثلاً استفاده از «ABC» برای نشان دادن غلطیاب املایی.
نکتهها
- برچسبها عبارتند از:
- متن در سمت چپ فهرستهای کشویی و ورودیهای متن
- متن در سمت راست چکباکسها و دکمههای رادیویی
- متن درون دکمهها و زبانهها (tabs)
- متن زیر آیکنهایی که بهجای دکمه استفاده میشوند
- نامهای بهکار رفته در فرایند کدنویسی شامل جایگزینهای متنی (aria-label ،(alt text و aria-labelledby است.
- در درج نام در فرایند کدنویسی (Accessible Name) میتوان از نامهای سادهشده استفاده کرد؛ به شرط آنکه اولین کلمه این نام، با برچسبی که در وبسایت برایش نمایش داده میشود، یکسان باشد؛ مثلاً وقتی در وبسایت، عبارت «جستجو در این صفحه» نمایش داده میشود، میتوان از کلمه «جستجو»، بهعنوان نام آن جزء یا کنترل، استفاده کرد.
- برای تشخیص اینکه از چه مقدار متن بهعنوان برچسب بصری استفاده کنید، فقط کافی است کمی کلاهتان را قاضی کنید؛ متنی که بلافاصله در مجاورت کنترل درج میشود، برای این منظور کفایت میکند.
بهتر است لینکهای زیر را ببینید:
- شرح شاخص موفقیت در کنسرسیوم وب: ↗Label in Name (2.5.3 – Level A) ↗
پدیدآورندگان:
مترجم: امید هاشمی
ویراستار فنی: آرتا مکبری
ویراستار فنی دوم: حسین شرفی