Rol, nom va qiymat

Nega

Yordamchi texnologiyalardan foydalanadigan insonlar foydalanuvchi interfeysi komponentlaridan foydalana olishi uchun bu komponentlar rol (role), nom (name) va ba’zan qiymatga (value) ega bo‘lishi kerak. Yordamchi texnologiyalarga ekran o‘quvchi dasturlar, switch qurilmalari va nutqni tanish dasturlari misol bo‘ladi.

Nima

Ikki holatda, xohlasak ham, o‘rnatilgan qulaylik imkoniyatlariga ega yaxshi HTML elementdan foydalana olmaymiz:

• Biz amalga oshirmoqchi bo‘lgan narsa uchun mahalliy (native) HTML elementi mavjud emas.
• Semantik jihatdan to‘g‘ri elementdan foydalanishimizga texnik cheklovlar to‘sqinlik qiladi.

Ikkala holatda ham maxsus boshqaruv elementi (custom control) yaratishimiz kerak. Muhim qulaylik tamoyillaridan biri: maxsus boshqaruv elementi rol, nom va ba’zan qiymatga ega bo‘lishi kerak.

Qanday

Maxsus komponentlarda rol, nom va qiymat borligini qanday ta’minlaymiz?

Rol

Oldingi Tugmalar va havolalar bo‘limida ochiladigan menyu tugmasi <button> sifatida kodlanishi kerakligini bilib oldik. Agar frameworkimiz bunga yo‘l qo‘ymasa-chi? Agar u bizni uning o‘rniga <a> ishlatishga majbur qilsa-chi? Agar biz foydalanayotgan kutubxonadagi navigatsiya komponenti <a> elementlaridan qurilgan bo‘lsa-chi? Unda rol qo‘shishimiz kerak.

Bu role="button" atributi yordamida amalga oshiriladi. Endi yordamchi texnologiyalar foydalanuvchilari maxsus boshqaruv elementi nima ekanini tushuna oladi. <button> elementida role="button" allaqachon o‘rnatilgan, shuning uchun <button role="button"> deb yozish ortiqcha.

Nom

Maxsus boshqaruv elementiga nom kerak. Bizning misolimizda nom — elementning mazmuni, ya’ni Company. Elementimizni <div role="button">Company</div> ko‘rinishida yozgan ekanmiz, yaxshi nomga egamiz. Bu qulaylik nomi (accessible name) deb ham ataladi. <div> elementimizning qulaylik nomi — Company. Yaxshi.

Bu juda oson edi. Quyidagi kirish (login) formasida bir nechta komponent bor – logotip, sarlavha, yorliq (label), ochiladigan ro‘yxat, kiritish maydoni va tugma.

Yorliq, ochiladigan ro‘yxat va kiritish maydonini yaqindan ko‘rib chiqamiz. Vizual jihatdan ochiladigan ro‘yxat va kiritish maydoni o‘rtasida aniq farq yo‘q. Ochiladigan ro‘yxat <select> bilan kodlangan, bu holat uchun bu to‘g‘ri element. Biroq uning nomi yo‘q:

<select name="countryCode">…</select>

Unda name atributi bor. Bu qulaylik nomi (accessible name) bilan bir xil narsa emas. Bu chalkashtiradi. What is an accessible name? maqolasida bu batafsilroq tushuntirilgan. name atributi kompyuterlar uchun. <form> ichida u ma’lumotlar yuborilganda identifikator sifatida ishlatiladi. Ushbu countryCode nomi foydalanuvchilarga hech qanday yordam bermaydi. Uni yordamchi texnologiyalar qabul qilmaydi.

Ushbu <select> elementiga qulaylik nomi berish uchun aria-label atributidan foydalanishimiz kerak. Odatda <select> komponentiga vizual yorliqni bog‘lagan bo‘lardik. Bu holatda esa ikkala komponent uchun faqat bitta vizual yorliq bor.

Mana qulaylik nomiga ega <select>:

Qiymat

Ba’zi komponentlar qiymat yoki holatga ega. Akkordeon ochiq yoki yopiq bo‘ladi. Bu ma’lumot yordamchi texnologiyalarga ham yetkazilishi kerak.

Akkordeon maxsus komponent hisoblanadi. Bu yerda ishlatish mumkin bo‘lgan standart HTML element yo‘q. Har bir akkordeon sarlavhasi <button> yoki role="button" bo‘lishi kerak:

<div role="button">When do I get charged for a ride?</div>

Yaxshi. U tugma roliga ega. Shuningdek, nomi ham bor — div’ning mazmuni. Bu tugmaga qiymat berish uchun yordamchi texnologiyalarga uning yopiq ekanini aytishimiz kerak. Bu aria-expanded="false" yordamida amalga oshiriladi:

<div role="button" aria-expanded="false">When do I get charged for a ride?</div>

Endi akkordeon sarlavhamiz rol, nom va qiymatga ega.