English for Accessibility Engineers: WCAG, ARIA, and a11y Vocabulary (англійською)
Вивчіть основний словник з доступності — рівні WCAG, принципи POUR, ролі і стани ARIA, керування фокусом, зчитування з екрану, контраст кольорів і мову аудиту a11y.
Доступність більше не є обов’язковою. Юридичні вимоги, принципи інклюзивного дизайну і зростання обізнаності означають, що кожна інженерна команда потребує принаймні однієї людини, яка вільно розмовляє мовою a11y. Цей посібник містить словник, який використовуватиметься під час аудиту доступності, перегляду коду і обговорення командою — від рівнів WCAG до атрибутів ARIA і тестування програм для читання з екрану.
Доступність vs. Використання
Доступність (a11y)
Доступність (часто скорочується до a11y — “11” представляє одинадцять букв між “a” і “y”) є практикою створення цифрових продуктів, які можуть використовуватися людьми з обмеженими можливостями. Це включає в себе зорові, слухові, моторні і когнітивні порушення.
«Компонент проходить тестування на користувацьку здатність, але він не відповідає вимогам доступності — користувач з екранним читачем не може пересуватися по нетиповому спадному меню взагалі»
Абревіатура a11y використовується в письмі і коді, але скажіть «доступність» в розмові.
Доступність для користувачів
** Корисні можливості ** — це спрощення чогось для пересічного користувача. ** Доступність ** — це спрощення роботи для користувачів з обмеженими можливостями. Продукт може бути дуже корисним для зрячих користувачів, але абсолютно недоступним для сліпих користувачів.
«Відвантаження файлів за допомогою перетягування і скидання є чудовим UX, але це не доступно — користувачам, які користуються тільки клавіатурою, і користувачам з екранними читачами потрібен альтернативний метод вводу»
WCAG і рівень відповідності
WCAG (Web Content Accessibility Guidelines) — рекомендації з доступності веб-контенту
WCAG — це міжнародний стандарт доступності веб- сайтів, опублікований консорціумом W3C. Поточний варіант — WCAG 2.2. Він визначає критерії успіху, організовані на три рівні.
Рівні WCAG: A, AA, AAA
- ** Рівень A ** — мінімум. Якщо ці критерії не буде виконано, вміст буде недоступним для деяких користувачів.
- ** Рівень AA ** — ціль для більшості організацій. Вимагає закон Великої Британії (Акт про рівність) і багато міжнародних правил. Включає контраст кольорів, зміну розміру тексту, навігацію за допомогою клавіатури тощо.
- ** Рівень AAA ** — найвищий рівень. Не потрібне для всіх сайтів — деякі критерії неможливо задовольнити для всіх типів вмісту.
«Наша мета — WCAG 2.2 AA — це те, що вимагають правила доступності в державному секторі. AAA є амбіційним для критичних потоків»
За принципами
WCAG організовано навколо чотирьох основних принципів, які можна підсумувати як ** POUR **:
Perceivable
Вміст і компоненти інтерфейсу користувача повинні бути ** сприйнятливі ** - доступні принаймні одному з відчуттів користувача. Це означає надання текстових альтернатив для зображень, підписів для відео, а не покладатися лише на колір для передачі інформації.
«Стан помилки використовує тільки червоний колір — це не сприймається для дальтоністів. Додати іконку або текстову позначку»
Operable
Всі функції повинні бути операбельними за допомогою однієї клавіатури, і користувачі повинні мати достатньо часу для виконання завдань.
“Модальне закривається після 30 секунд — це не працює для користувачів, яким потрібно більше часу для читання. Додати спосіб продовження сеансу»
Understandable
Вміст і інтерфейс користувача повинні бути ** зрозумілими ** — текст має бути читабельним, поведінка повинна бути передбачуваною, а форми повинні допомагати користувачам уникнути і виправити помилки.
«Повідомлення про помилку просто каже «Неправильний вхід» — це не зрозуміло. Скажіть користувачеві, який саме формат очікується.»
Robust
Вміст має бути достатньо надійним, щоб працювати з поточним і майбутніми допоміжними технологіями. Це означає написання коректного HTML і правильну роботу з семантичними елементами і ARIA.
ARIA
ARIA (Accessible Rich Internet Applications) — стандарт доступності багатих інтернет-застосунків
** ARIA ** — це набір атрибутів HTML, які повідомляють про роль, стан і властивості елементів інтерфейсу користувача допоміжним технологіям, коли семантики оригінального HTML недостатньо.
«Ми побудували нетиповий combobox в JavaScript — він не має рідного HTML еквіваленту, тому нам потрібні атрибути ARIA, щоб зробити його зрозумілим для екранних читачів»
Перше правило ARIA: не використовуйте ARIA, якщо нативний елемент HTML вже виконує цю роботу.
Рольова гра
Роль ARIA повідомляє допоміжним технологіям, який тип елемента це. Приклад: role="dialog", role="alert", role="tablist".
Модальний div потребує
role='dialog'іaria-modal='true', тому читач екрану оголосить його як діалогове вікно, коли воно відкриється
Власники землі
** Властивості ARIA ** описують характеристики елемента, які не змінюються часто. Приклади: aria-label (надає доступну назву), aria-describedby (посилання на опис), aria-required.
Додати
aria-label='Close modal'до кнопки X — інакше читач екрану просто каже «button» без контексту
Ареал — США
** ARIA states ** описують динамічні умови, які змінюються залежно від взаємодії користувача. Приклади: aria-expanded, aria-checked, aria-disabled, aria-selected.
«Коли панель акордеону відкриється, перемкніться
aria-expandedзfalseнаtrue— читач екрана оголосить користувачеві «розширено»
Доступна назва
** Назва доступності ** — це текст, який допоміжна технологія оголосить для елемента. Він походить від: видимого тексту, aria-label, aria-labelledby, або атрибуту alt для зображень.
«Та кнопка не має доступної назви — немає видимого тексту, немає
aria-labelі немаєtitle. Екранний читач не каже нічого корисного»
Концентрація уваги
Концентрація уваги
** Керування фокусом ** означає програмне керування тим, який елемент має фокус клавіатури, особливо, коли вміст змінюється динамічно — відкривається модальний елемент, завантажується новий вміст або показується помилка.
“Коли модальний елемент відкривається, пересунути фокус на перший інтерактивний елемент всередині нього. Коли він закривається, поверніть фокус на кнопку, яка його відкрила»
Навігація за допомогою клавіатури
** Навігація за допомогою клавіатури ** означає, що всі інтерактивні елементи можна відкрити і активувати лише за допомогою клавіатури — зазвичай, за допомогою клавіш Tab, Shift+Tab, Enter, Space і клавіш зі стрілками.
«Я можу натиснути Tab на кнопку меню, але не можу відкрити спадне меню з Enter або Space — це помилка навігації клавіатури.»
Спік Лінк
Посилання на ** пропуск ** — це візуально приховано розташоване у верхній частині сторінки посилання, яке користувачі клавіатури можуть активувати, щоб пропустити повторювані навігації і перейти безпосередньо до головного вмісту.
Додати посилання на пропуск — користувачам клавіатури не потрібно переходити по 40 елементам навігації на кожній завантаженій сторінці
Фокусна пастка
** пастка фокусування ** зберігає фокус клавіатури у певному контейнері — зазвичай, у модальному діалоговому вікні — щоб користувачі не могли випадково перейти за допомогою клавіші Tab до вмісту, що знаходиться за цим контейнером.
“Модаль потребує фокус-пастки. Зараз ви можете вибратися з нього на сторінку за ним — це порушує очікувану поведінку для користувачів клавіатури і екранних читачів»
Тестування зчитувача екрану
Сумісність з читанням з екрану
Основними програмами для читання з екрану є NVDA (Windows, безкоштовний), JAWS (Windows, комерційний) і VoiceOver (macOS/iOS, вбудований). Тестування на декількох читачах важливе, тому що вони інтерпретують ARIA по-різному.
«Це працює в VoiceOver, але JAWS читає мітки форми в неправильному порядку. Завжди тестуйте з принаймні двома програмами для читання з екрану»
Життя регіону
ARIA live region ( aria-live ) - це область сторінки, яка динамічно оновлюється. Програма для читання з екрану автоматично оголосить про оновлення без переходу користувача до них.
“Сповіщення про тост візуально видиме, але ніколи не повідомляється користувачам програм для читання з екрану. Захоплення села 1802 року»
Колір і візуальна доступність
Співвідношення контрасту кольорів
** Співвідношення контрасту кольорів ** вимірює різницю яскравості між текстом і його тлом. WCAG AA вимагає 4.5:1 для звичайного тексту і 3:1 для великого тексту.
«Сірий текст-замінник має співвідношення 2.8:1 на білому тлі — він не відповідає WCAG AA. Затемніть його принаймні до 4.5:1»
Семантичний HTML
Семантичний HTML
** Семантичний HTML ** означає використання елементів, що мають значення — <nav>, <main>, <button>, <label>, <h1> – <h6> — замість <div> і <span> для всього. Семантичні елементи надають допоміжним технологіям необхідну інформацію безкоштовно.
Замініть
<div class='button'>на дійсний елемент<button>— ви отримаєте фокус клавіатури, активацію Enter/Проміжок, і правильну роль ARIA без написання жодного додаткового рядка коду
Поширені фрази доступності
| Phrase | Meaning |
|---|---|
| ”It fails 1.4.3” | It does not meet WCAG 2.x success criterion 1.4.3 (colour contrast) |
| “This is keyboard inaccessible” | Users cannot reach or activate this without a mouse |
| ”The accessible name is missing” | The screen reader has nothing useful to announce |
| ”We need to audit this component” | Review it against WCAG criteria and screen reader behaviour |
| ”That’s redundant ARIA” | You’re re-declaring what a native HTML element already says |
| ”Focus doesn’t return” | After closing a modal, keyboard focus goes to the wrong place |
| ”Mark it as decorative” | alt="" on images that add no information |