Доступність «кастомних html-контролів для незрячих користувачів

Мета даного поста, з одного боку, продемонструвати наскільки незрячим користувачам складно, а часом і зовсім неможливо працювати з html контролами, не реалізують вимоги доступності, а з іншого — показати, що реалізувати ці вимоги зовсім не важко.

Тут, на Хабре, вже були статті описують способи досягнення доступності сайту, проте, в них питання доступності не нативних html-елементів управління, порушувалися найбільш загальним чином, тоді як я впевнений в тому, що це головний чинник впливає на web accessibility.

Під кастомних або не нативними html контролами тут розуміються елементи управління представленими не, приміром, стандартними тегами типу:

<button>натисни мене</button>

А просто блочними елементами з відповідним візуальним оформленням і обробниками подій типу:

<div class="button" onclick"...">натисни мене</div>

Хочу зауважити, що дана стаття не претендує на вичерпне керівництво по доступності, вона покликана лише дати загальне розуміння і донести важливість слідування рекомендаціям wai-aria при використанні власних елементів управління.

За допомогою одного з api доступності підтримуються браузером, IAccessible2, windows automation та ін. допоміжні технології, в даному випадку скринридер, отримує всю необхідну інформацію про елементи управління в оброблюваному документі, але тільки в тому випадку, коли вона є.

Це справедливо для нативних елементів типу:

<button>натисни мене</button>

Або

<input type="checkbox">відзнач мене</input>

Вони за замовчуванням підтримують всі необхідні ролі, властивості, клавіші управління і реалізують відповідну логіку.

Однак якщо елемент керування представлений звичайним дивом, з відповідним візуальним оформленням, то для скринридера, а значить і для користувача, це просто дів і нічого більше.

Наприклад, ось що скринридер повідомить незрячому користувачеві якщо зустріне стандартний checkbox: «відзнач мене check box not checked», тобто повідомить тип елемента і його стан, а якщо зустрінеться таке:

<div class=" checkbox on _settings_access " id=" settings_a11y" onclick="checkbox(this); Settings.accessCheck(isChecked(this));">Спеціальні можливості</div>

(реальний фрагмент верстки знаходиться на сторінці налаштувань vk.com) то скринридер озвучить це так: «Спеціальні можливості clickable» (тобто ніякої інформації). Незрячий користувач не зможе не тільки визначити стан елемента, але і його тип. У деяких випадках цей елемент буде активуватися вкрай не стабільно, а так як користувач його поточний стан дізнатися не може, то використання цієї опції стає дуже утруднено.

Ось до чого призводить не дотримання вимог доступності. А між тим дотримати ці вимоги дуже просто. Приміром, в даному конкретному випадку досить просто зробити наступне — це присвоїти атрибуту role відповідне значення;

<div class=" checkbox on _settings_access " id=" settings_a11y" onclick="checkbox(this); Settings.accessCheck(isChecked(this));" role="checkbox">Спеціальні можливості</div>

І ось вже скринридер розпізнає елемент як checkbox;

Обробити не тільки подія onclick, але і onkeydown, щоб дозволити користувачам налаштовувати checkbox допомогою клавіші space"

<div onkeydown"toggleCheckbox(evend)">спеціальні можливості</div>

Function toggleCheckbox(evend) {
If (event.keyCode === 32){
...
}
}

Додати в обробний подія js код логіку зміни властивості aria-checked. Щось на зразок такого:

var state = node.getAttribute('aria-checked').toLowerCase()
if (state === 'true') {
node.setAttribute( 
}
else {
node.setAttribute('aria-checked', 'true')'aria-checked', 'false')
}

І все. Невелика правка у верстці, кілька рядків коду і елемент стає повністю доступною. Звичайно, для інших елементів може бути трохи більше коду, наприклад, radiobutton, т. к. доведеться прописувати трохи більше логіки і обробляти більше клавіш, але в підсумку все одно це досить просто.

На сторінку: WAI-ARIA Authoring Practices Представлена велика кількість прикладів реалізації тих чи інших елементів управління.

Резюме
Найбільші проблеми для незрячих користувачів приносить недоступність різних елементів управління. Коли це можливо, слід використовувати спеціалізовані html теги, вони доступні поумолчанию і максимум, що потрібно так це встановити aria-label; Однак якщо це не можливо, то варто відвідати WAI-ARIA Authoring Practices І переглянути яким чином рекомендується реалізувати той чи інший віджет.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.