Глосарій веб-доступності

a11y

Accessibility (скорочення)

a11y — це скорочення слова accessibility (доступність), де 11 позначає кількість літер між a та y. Широко використовується у tech-спільноті як хештег #a11y та в назвах інструментів і конференцій.

ADA

Americans with Disabilities Act

ADA — федеральний закон США (1990), що забороняє дискримінацію людей з інвалідністю. Title II (державні установи) та Title III (приватний сектор) поширюються на веб-сайти. У квітні 2024 DOJ випустив фінальне правило з конкретними технічними стандартами (WCAG 2.1 AA) для державних сайтів з дедлайном квітень 2026.

Alt-текст

Alternative Text (альтернативний текст)

Alt-текст — текстовий опис зображення в атрибуті alt тегу '<img>'. Screen reader зачитує alt-текст незрячим користувачам. Декоративні зображення мають порожній alt (alt=""). Інформативні — стислий опис змісту (до 125 символів). Відсутній alt — одна з найпоширеніших помилок: 54.5% зображень не мають alt (WebAIM Million 2025).

ARIA

Accessible Rich Internet Applications

ARIA — специфікація W3C, що визначає набір HTML-атрибутів для покращення доступності динамічного веб-контенту. Включає ролі (role), стани (aria-expanded, aria-hidden) та властивості (aria-label, aria-describedby). Перше правило ARIA: якщо є нативний HTML-елемент з потрібною семантикою — використовуйте його замість ARIA.

Допоміжні технології

Assistive Technology (AT)

Допоміжні технології — пристрої та програми, що допомагають людям з інвалідністю користуватися комп'ютером та інтернетом. Screen reader (NVDA, JAWS, VoiceOver), програми збільшення екрану (ZoomText), альтернативні клавіатури, eye-tracking, перемикачі (switch devices).

Accessibility Overlay

Overlay (накладка доступності)

Overlay — JavaScript-віджет, що додає панель налаштувань поверх сайту (зміна шрифтів, контрасту, курсору). Не змінює реальний HTML-код сторінки. National Federation of the Blind та 700+ спеціалістів (overlayfactsheet.com) стверджують, що overlay не забезпечує реальну WCAG-відповідність. FTC оштрафувала AccessiBe на $1M у 2025.

Accessibility Statement

Заява про доступність

Accessibility Statement — публічний документ на сайті, що описує рівень доступності ресурсу, відомі обмеження, контактну інформацію для повідомлень про проблеми та заплановані покращення. Вимагається EAA в ЄС та рекомендується W3C WAI.

CLS

Cumulative Layout Shift

CLS — метрика Core Web Vitals від Google, що вимірює візуальну стабільність сторінки. Хороший показник: < 0.1. Елементи, що зсуваються після завантаження (зображення без розмірів, динамічний контент, шрифти без font-display: swap), збільшують CLS і погіршують SEO-ранжування.

Контраст кольорів

Color Contrast Ratio

Контраст кольорів — числове співвідношення яскравості тексту та фону. WCAG 2.1 Level AA вимагає мінімум 4.5:1 для звичайного тексту та 3:1 для великого тексту (>18pt або >14pt bold). Level AAA: 7:1 та 4.5:1. Низький контраст — найпоширеніша помилка: 81% сайтів мають цю проблему (WebAIM).

Когнітивна доступність

Cognitive Accessibility

Когнітивна доступність — дизайн для людей з когнітивними обмеженнями: дислексія, ADHD, аутизм, проблеми з пам'яттю. Включає: зрозумілу мову, послідовну навігацію, мінімум відволікань, достатній час для дій, чіткі інструкції. WCAG 2.2 додав критерії для цієї групи.

CAPTCHA

Completely Automated Public Turing test

CAPTCHA — тест для відрізнення людини від бота. Візуальні CAPTCHA (спотворений текст, вибір зображень) є бар'єром для незрячих та людей з когнітивними обмеженнями. WCAG вимагає альтернативний спосіб проходження. Рекомендовано: reCAPTCHA v3 (невидимий) або hCaptcha з audio-альтернативою.

ДСТУ EN 301 549

ДСТУ EN 301 549:2022

ДСТУ EN 301 549:2022 — український національний стандарт доступності ІКТ-продуктів, ідентичний європейському EN 301 549 v3.2.1. Включає вимоги до веб-сайтів (базується на WCAG 2.1 Level AA), мобільних застосунків, документів та самообслуговуючих терміналів. Обов'язковий для державних сайтів (КМУ №757).

Цифрова доступність

Digital Accessibility

Цифрова доступність — забезпечення можливості використання цифрових продуктів (сайтів, застосунків, документів, відео) для людей з інвалідністю. Ширше поняття ніж веб-доступність: включає мобільні застосунки, PDF-документи, електронні книги, відео з субтитрами.

DOM

Document Object Model

DOM — деревоподібна структура HTML-сторінки, яку браузер створює для відображення та маніпуляції контентом. Accessibility Tree — окрема версія DOM, яку screen reader використовує для озвучування сторінки. Правильний DOM = правильний Accessibility Tree.

EAA

European Accessibility Act

EAA (Директива ЄС 2019/882) — закон Євросоюзу, що вимагає доступність цифрових продуктів та послуг. Діє з 28 червня 2025 у всіх 27 країнах ЄС. Стосується e-commerce, банків, телеком, транспорту. Технічний стандарт: EN 301 549 (базується на WCAG 2.1 Level AA). Штрафи визначаються на національному рівні.

EN 301 549

Harmonised European Standard for ICT Accessibility

EN 301 549 — європейський стандарт доступності ІКТ-продуктів від ETSI/CEN/CENELEC. Версія 3.2.1 (2021) — гармонізований стандарт для EAA. Для веб: базується на WCAG 2.1 Level AA. Також покриває мобільні застосунки, документи, ПЗ, апаратне забезпечення та самообслуговуючі термінали.

E-E-A-T

Experience, Expertise, Authoritativeness, Trustworthiness

E-E-A-T — рамка Google для оцінки якості контенту. Experience: демонстрований досвід. Expertise: кваліфікація автора. Authoritativeness: авторитет домену. Trustworthiness: достовірність. Важливо для SEO та AI-цитування. Не є прямим фактором ранжування, але впливає через якість контенту.

Індикатор фокусу

Focus Indicator / Focus Ring

Індикатор фокусу — видимий контур навколо інтерактивного елементу (посилання, кнопки, поля), коли він отримує фокус клавіатури. WCAG 2.4.7 (AA) вимагає видимий фокус. WCAG 2.2 додав 2.4.11 (Focus Not Obscured) та 2.4.13 (Focus Appearance) з мінімальними вимогами до контрасту та розміру.

Пастка фокусу

Focus Trap / Keyboard Trap

Пастка фокусу — ситуація, коли користувач клавіатури не може вийти з елементу (модального вікна, віджету) за допомогою Tab або Escape. WCAG 2.1.2 (A) забороняє пастки фокусу. Виняток: модальні вікна МАЮТЬ тримати фокус всередині, але ПОВИННІ мати спосіб закриття (Escape).

Доступність форм

Form Accessibility

Доступність форм — забезпечення можливості заповнення форм людьми з інвалідністю. Кожне поле потребує label (програмно пов'язаний через for/id або aria-label). Помилки повинні бути чітко описані та пов'язані з полем. Обов'язкові поля позначені не тільки кольором. Форма має працювати з клавіатури.

Ієрархія заголовків

Heading Hierarchy

Ієрархія заголовків — логічна структура h1-h6 на сторінці. Один h1 на сторінку (заголовок). h2 — основні секції. h3 — підсекції. Не пропускати рівні (h1→h3 без h2 — помилка). Screen reader використовує заголовки для навігації. 42.7% сторінок мають пропущені рівні заголовків (WebAIM).

Високий контраст

High Contrast Mode

Високий контраст — режим відображення зі збільшеним контрастом між текстом та фоном. Windows High Contrast Mode (forced-colors) змінює кольори системи. Сайт має коректно працювати в цьому режимі. CSS media query: @media (forced-colors: active).

Клавіатурна навігація

Keyboard Navigation

Клавіатурна навігація — можливість повного керування сайтом без миші, тільки клавіатурою. Tab — перехід між елементами, Enter — активація, Escape — закриття, стрілки — навігація в меню/слайдерах. WCAG 2.1.1 (A) вимагає доступність всього функціоналу з клавіатури.

Landmark

ARIA Landmark / HTML Landmark

Landmark — семантична область сторінки, що допомагає screen reader навігації. HTML5 елементи: '<header>', '<nav>', '<main>', '<aside>', '<footer>'. ARIA ролі: role="banner", role="navigation", role="main", role="complementary", role="contentinfo". Використовуйте HTML5 елементи, а не ARIA ролі де можливо.

Live Region

ARIA Live Region

Live Region — область сторінки, зміни в якій автоматично озвучуються screen reader. aria-live="polite" — озвучити коли зручно. aria-live="assertive" — озвучити негайно (для помилок, алертів). role="status" та role="alert" — вбудовані live regions.

Overlay

Accessibility Overlay Widget

Overlay — JavaScript-віджет доступності, що накладає зміни поверх сторінки без модифікації реального HTML. Продукти: AccessiBe, UserWay, EqualWeb. Критика: overlayfactsheet.com (700+ підписантів), NFB statement, FTC штраф AccessiBe $1M. Альтернатива: DNS-proxy підхід (InclusiveWeb) — реальне виправлення HTML до доставки відвідувачу.

POUR

Perceivable, Operable, Understandable, Robust

POUR — чотири принципи WCAG. Perceivable (Сприйнятливий): контент доступний для всіх органів чуття. Operable (Керований): інтерфейс працює різними способами. Understandable (Зрозумілий): контент і навігація зрозумілі. Robust (Надійний): працює з різними технологіями, включаючи допоміжні.

Role (ARIA)

ARIA Role

ARIA Role — атрибут, що визначає семантичну роль елемента для допоміжних технологій. Типи: widget roles (button, checkbox, tab), document roles (article, heading), landmark roles (navigation, main), live region roles (alert, status). HTML5 елементи мають вбудовані ролі: '<button>' = role="button".

Screen Reader

Екранний зчитувач

Screen Reader — програма, що озвучує вміст екрану для незрячих та слабозорих користувачів. Популярні: NVDA (Windows, безкоштовний), JAWS (Windows, комерційний), VoiceOver (macOS/iOS, вбудований), TalkBack (Android, вбудований). 53.7% користувачів screen reader використовують NVDA (WebAIM Survey 2024).

Section 508

Section 508 of the Rehabilitation Act

Section 508 — закон США, що вимагає доступність ІКТ від федеральних агентств. Оновлений у 2017 році з прив'язкою до WCAG 2.0 Level AA. Стосується веб-сайтів, документів, ПЗ та апаратного забезпечення, що розробляється або закуповується федеральним урядом.

Семантичний HTML

Semantic HTML

Семантичний HTML — використання HTML-елементів за їх призначенням: '<button>' для кнопок (не '<div onclick>'), '<nav>' для навігації, '<h1>'-'<h6>' для заголовків, '<table>' для табличних даних. Screen reader розуміє семантику нативних елементів. Div soup (все на div) — найпоширеніша архітектурна помилка доступності.

Shadow DOM

Shadow DOM — технологія Web Components, що ізолює DOM та стилі віджету від основної сторінки. Панель доступності InclusiveWeb використовує Shadow DOM: стилі панелі не конфліктують зі стилями сайту, і навпаки. Це гарантує коректну роботу віджету на будь-якому сайті.

Skip Link

Посилання пропуску навігації

Skip Link — приховане посилання на початку сторінки, що з'являється при натисканні Tab і дозволяє перейти одразу до основного контенту, пропустивши навігацію. WCAG 2.4.1 (A) вимагає механізм пропуску повторюваних блоків. Реалізація: '<a href="#main" class="skip-link">'.

Tab Order

Порядок табуляції

Tab Order — послідовність, в якій елементи отримують фокус при натисканні Tab. Повинен відповідати візуальному порядку контенту (зліва направо, зверху вниз). WCAG 2.4.3 (A). tabindex="0" — додає в природний порядок. tabindex="-1" — фокусується програмно. tabindex > 0 — антипатерн, уникайте.

Текстові альтернативи

Text Alternatives

Текстові альтернативи — текстовий еквівалент нетекстового контенту. WCAG 1.1.1 (A) вимагає альтернативи для: зображень (alt), відео (субтитри, аудіоопис), аудіо (транскрипція), іконок (aria-label), CAPTCHA (audio альтернатива). Найпоширеніша категорія помилок доступності.

WAI

Web Accessibility Initiative

WAI — ініціатива W3C (World Wide Web Consortium), що розробляє стандарти та рекомендації з веб-доступності. Основні продукти WAI: WCAG (стандарт контенту), ARIA (стандарт інтерактивності), ATAG (стандарт для інструментів розробки), UAAG (стандарт для браузерів).

WAVE

Web Accessibility Evaluation Tool

WAVE — безкоштовний інструмент перевірки доступності від WebAIM. Доступний як веб-сервіс (wave.webaim.org), розширення Chrome/Firefox та API. Показує помилки, попередження та структурні елементи прямо на сторінці. Не замінює повний аудит: автоматичні інструменти знаходять лише 30-57% проблем.

WCAG

Web Content Accessibility Guidelines

WCAG — міжнародний стандарт доступності веб-контенту від W3C. Визначає технічні критерії для доступності сайтів людьми з інвалідністю. Поточні версії: WCAG 2.1 (2018, 78 критеріїв) та WCAG 2.2 (2023, 87 критеріїв). Рівні: A, AA (рекомендований), AAA. Базис для EAA, ADA, ДСТУ EN 301 549.

WCAG 2.1

Web Content Accessibility Guidelines 2.1

WCAG 2.1 (червень 2018) — розширення WCAG 2.0 з 17 новими критеріями для мобільної доступності, слабозорих та когнітивних обмежень. 78 критеріїв успіху. Базовий стандарт для EN 301 549 та EAA. Все ще найбільш поширений вимога в законодавстві (ADA, ДСТУ).

WCAG 2.2

Web Content Accessibility Guidelines 2.2

WCAG 2.2 (жовтень 2023) — останнє оновлення стандарту. 87 критеріїв (+9 нових, -1 видалений). Нові критерії: Focus Not Obscured, Focus Appearance, Dragging Movements, Target Size Minimum, Accessible Authentication, Consistent Help, Redundant Entry. Рекомендований стандарт для нових проєктів.

Рівні WCAG

WCAG Conformance Levels (A, AA, AAA)

WCAG визначає три рівні: Level A (30 критеріїв у 2.2) — мінімальна доступність, без цього сайт практично непридатний. Level AA (24 критерії) — рекомендований стандарт, вимагається EAA, ADA, ДСТУ. Level AAA (33 критерії) — максимальна доступність, рідко вимагається повністю.

Веб-доступність

Web Accessibility

Веб-доступність — практика створення веб-сайтів, що можуть використовуватися всіма людьми, незалежно від інвалідності, віку чи технологій. Включає: сумісність зі screen reader, клавіатурну навігацію, достатній контраст, субтитри для відео, зрозумілу структуру. 96.3% сайтів мають помилки доступності (WebAIM Million 2025).