Быстрая проверка доступности
Большинство проблем с доступностью это мелочи, которых не хватает в HTML: картинка без описания или поле без названия. Эта проверка загружает страницу, находит их и говорит, какие элементы исправить.
У всего на странице должно быть имя
Когда вы смотрите на страницу, верстка многое сообщает без слов. Значок лупы рядом с полем означает «ищите здесь». Крупный жирный текст означает «начинается новый раздел». Ничего из этого не доходит до человека, который пользуется программой чтения с экрана, брайлевским дисплеем или голосовым управлением. Его программа не видит верстку. Она читает HTML и хочет знать о каждом элементе две вещи: что это и как оно называется.
<img> отвечает через атрибут alt, поле формы через свой <label>, раздел через заголовок. Когда ответа нет, программа говорит «изображение», «поле ввода» или «ссылка» и идет дальше, а это никому не помогает. Руководство по доступности веб-контента (WCAG) превращает эту идею в проверяемые правила, и значительную их часть может проверить программа.
Что проверяется и во что обходится каждая находка
Страница начинает со 100 баллов. Каждая находка отнимает часть баллов, а повторяющаяся проблема стоит дороже, до определенного предела.
| Находка | Снимается баллов |
|---|---|
Нет lang у <html> | 10 |
Масштабирование запрещено (user-scalable=no или maximum-scale меньше 2) | 10 |
Пустой или отсутствующий <title> | 6 |
Изображения без атрибута alt | 4 + 2 за каждое изображение, не больше 20 |
| Поля форм без подписи | 5 + 3 за каждое поле, не больше 20 |
| Ссылки или кнопки без имени | 4 + 2 за каждую, не больше 20 |
| Нет ни одного заголовка | 8 |
Нет <h1>; пропущенные уровни заголовков | 4; 2 + 1 за каждый пропуск, не больше 6 |
| Невнятный текст ссылок («нажмите здесь», «подробнее») | 2 + 1 за каждую ссылку, не больше 8 |
| Текст со встроенными стилями и контрастом ниже 4.5:1 | 3 + 2 за каждый, не больше 10 |
<iframe> без title | 2 + 1 за каждый, не больше 6 |
Повторяющиеся значения id | 1 + 1 за каждое, не больше 5 |
| Аудио или видео, которое запускается само со звуком | 4 |
Нет области <main>; tabindex больше 0 | по 3 |
Проверка пропускает элементы, скрытые через hidden, aria-hidden="true" или встроенный display:none, а также изображения с role="presentation".
Как читать оценку
Оставшиеся баллы превращаются в букву: A от 90, B от 80, C от 65, D от 50, F ниже. Красные находки это барьеры, из-за которых человек не может довести дело до конца. Оранжевые замедляют, но не останавливают. Под каждой находкой вы увидите до восьми затронутых элементов в виде тега с путем к файлу, именем поля, id или классом, чтобы их можно было найти в шаблонах.
Оценка A означает, что проверка не нашла ни одной из проблем, которые умеет обнаруживать. Автоматические тесты ловят примерно треть реальных проблем доступности. Точен ли ваш alt-текст, логичен ли порядок чтения, как ведет себя самодельное меню при работе с клавиатуры: об этом может судить только человек.
Исправления для самых частых находок
- Изображение без alt-текста
- Скажите то, что изображение сообщает зрячему читателю:
<img src="team.jpg" alt="Five engineers around a whiteboard">. Для декоративного элемента напишитеalt="". Пустое значение говорит вспомогательным программам пропустить изображение, и это не то же самое, что отсутствие атрибута. - Поле без подписи
<label for="email">Email</label> <input id="email" type="email">. Placeholder не считается: он исчезает при первом же нажатии клавиши.- Ссылка или кнопка только со значком
<button aria-label="Open menu">…</button>, или добавьтеaltизображению значка внутри нее.- Пропущенный уровень заголовка
- Выбирайте уровень по структуре (
h2для раздела,h3внутри него), а размер задавайте в CSS. - Запрет масштабирования
- Сократите тег viewport до
<meta name="viewport" content="width=device-width, initial-scale=1">.
Чего эта проверка не видит
Наш сервер читает полученный HTML и не выполняет JavaScript, поэтому все, что фреймворк добавляет после загрузки, остается непроверенным. Таблицы стилей он тоже не загружает. Поэтому контраст измеряется только там, где и цвет текста, и цвет фона записаны в атрибуте style. Все остальные цвета проверьте в калькуляторе контрастности. Чтобы разобрать одну страницу глубже, послушайте ее в предпросмотре программы чтения с экрана и пройдите по ее порядку табуляции.
Частые вопросы
Значит ли идеальная оценка, что мой сайт соответствует WCAG?
Нет. Это значит, что страница проходит проверки, которые программа может выполнить на исходном HTML. Соответствие WCAG 2.2 уровня AA требует еще ручного тестирования с клавиатурой и программой чтения с экрана на каждом шаблоне сайта.
Чем пустой alt отличается от отсутствующего?
alt="" намеренно сообщает, что изображение декоративное, и программы чтения с экрана молча его пропускают. Если атрибута alt нет вовсе, многие программы чтения с экрана зачитывают имя файла, что-то вроде «IMG подчеркивание 4521 точка jpg».
Почему placeholder не считается подписью?
Placeholder исчезает, как только посетитель начинает печатать, поэтому любой, кого отвлекли или кто пользуется экранной лупой, теряет из виду, что спрашивало поле. Некоторые программы чтения с экрана его к тому же не объявляют. Видимый <label> остается на месте и увеличивает область для щелчка.
Проверка не нашла проблем с контрастом. Значит, с цветами все в порядке?
Не обязательно. Проверка не читает цвета, заданные в таблицах стилей, только те, что указаны прямо в атрибутах style="…". Проверьте цвета основного текста и кнопок вручную в калькуляторе контрастности.
Моя страница сделана на React или Vue. Можно ли доверять результату?
Только если HTML рендерится на сервере. Если сервер отправляет почти пустой документ, а страницу строит браузер с помощью JavaScript, проверка видит пустой документ и сообщает мало или ничего.