Клавиатура и брайлевский дисплей. Иллюстративная сцена.

РУКОВОДСТВО / ПРОТОКОЛ

Аудит доступности пользовательского пути

Доступность оценивают на протяжении всей задачи: найти, понять, выполнить и исправить ошибку.

Прямой ответ

Как провести полезный аудит доступности?

Выберите типовые пути и критические состояния. Совместите проверку кода, навигацию с клавиатуры и испытания со вспомогательными технологиями. Для каждого дефекта укажите заблокированную задачу, критерий WCAG, доказательство и повторную проверку.

01 / Метод проверки

Метод проверки

01

Выбрать сценарии

Включите вход, навигацию, форму, подтверждение и ошибку. Проверьте мобильный экран и сильное увеличение.

02

Пройти с клавиатуры

Оцените порядок и видимость фокуса, элементы управления, меню, диалоги и выход из компонентов.

03

Проверить смысл

Проверьте заголовки, доступные имена, подписи, альтернативы изображений, структуру, контраст и сообщения об ошибках с диктором.

04

Исправить и повторить

Расставьте приоритеты по задаче и тяжести, исправьте общий компонент и повторите испытания на связанных страницах.

НА ПРАКТИКЕ

Проверяйте путь, а не только скриншот

Читаемый экран может блокировать действие. Проверьте цель целиком: найти раздел, использовать элемент, понять результат и вернуться. Сохраните первое препятствие и его эффект.

Что проверить в первую очередь?

Выберите наблюдаемую ситуацию. Каждый вариант описывает первую проверку, нужные доказательства и её ограничения.

С мышью работает, с клавиатурой нет

Первая проверка
Повторите задачу с Tab, Shift+Tab, Enter и ожидаемыми клавишами компонента. Проследите вход фокуса, активный элемент и выход из меню или диалога.
Что сохранить
Шаг, клавиша, активный элемент, открытое или закрытое состояние и точка блокировки либо непонимания.
Ограничение
Логичный порядок фокуса не подтверждает всю доступность. Проверьте также имена элементов, объявляемые состояния и чтение контента.
Читать связанное руководство

Дополнительные материалы

Перед публикацией
СитуацияЧего избегатьПолезное исправление
НавигацияТестировать только мышью.Пройти клавиатурой с видимым фокусом.
ФормаПолагаться на временный текст поля.Оставить видимую подпись и связать ошибку с полем.
Динамический результатМенять число без контекста.Показать результат, единицу и суть изменения.

  1. Найти

    Описывает ли заголовок нужную задачу?

  2. Действовать

    Доступен и понятен ли элемент?

  3. Понять

    Ясны ли результат и следующий шаг?

Итоговая проверка

Повторите путь с Tab, Shift+Tab и Enter, затем при масштабе 200 %. Убедитесь, что закреплённая шапка не скрывает полностью элемент в фокусе. Откройте и закройте меню клавиатурой, вызовите ошибку формы и проверьте возможность её исправить. Запишите страницу, действие и препятствие; эти проверки не являются сертификацией WCAG.

Документальные источники

Дата обращения .

Практикум чтения данных

Проверить полный цикл модального диалога

Вымышленный DEMO-A23 проверяет открытие, отключённое действие, фон и закрытие диалога просмотра.

Вымышленные данные и записи для обучения: результаты не получены запросами к действующим сервисам.

Подтвердить выбор после чтения

В диалоге есть заголовок, флажок «прочитано», изначально отключённое Подтвердить и Отмена. Кнопка открытия остаётся после закрытия.

  1. Открыть клавиатурой

    Наблюдение примера
    Фокус на заголовке для чтения
    Что установлено
    Задача начинается внутри, не за диалогом.
    Следующее действие
    Проверить объявленное имя и чтение инструкции.

  2. Пройти начальное состояние

    Наблюдение примера
    Tab достигает флажка и Отмены; Подтвердить отключено
    Что установлено
    Недоступное действие не должно выполняться.
    Следующее действие
    Отметить клавиатурой, проверить Подтвердить и повторить путь.

  3. Проверить фон

    Наблюдение примера
    Страница видна, но неактивна
    Что установлено
    Фон не получает действие или фокус при модальности.
    Следующее действие
    Проверить Tab/Shift+Tab и цель позади; затемнения недостаточно.

  4. Закрыть без подтверждения

    Наблюдение примера
    Escape закрывает и возвращает фокус к открытию
    Что установлено
    Человек продолжает исходную задачу.
    Следующее действие
    Повторить также Отмену и новое открытие.

Проверить цикл фокуса в модальном диалоге

При открытии фокус попадает на заголовок. Tab переводит его к флажку; Подтвердить недоступно до отметки. Фоновая команда должна оставаться неактивной при открытом диалоге. Escape или Отмена возвращает фокус к кнопке открытия.

Интерактивная демонстрация недоступна в этой конфигурации; подробный пример остаётся доступен для чтения.

Демонстрация готова: данные не передаются.

Проверка в демонстрации

Этот диалог не выполняет операций. Прочтите инструкцию и отметьте флажок для активации подтверждения либо вернитесь через Отмена или Escape.

Пример использует встроенный модальный диалог. Он иллюстрирует задачу, но не проверяет доступность вашего сайта. Флажок не означает разрешение и не защищает сервер.

Достаточно ли aria-modal для приёмки?

Раскройте каждый вариант и сравните разбор. Дополнительные проверки могут оставаться необходимыми.

Да, атрибут обеспечивает всё поведение.

Нет: проверяют действия и цикл фокуса.

Да, если фон тёмный.

Нет: вид не доказывает неактивность фона.

Нет; пройти цикл с отмеченным и снятым флажком.

Подходит. Сохранить дефекты и условия; один компонент не сертифицирует сайт.

Запись клавиатурной задачи

Случай: DEMO-A23
Открытие: фокус на заголовке
Начало: флажок снят; Подтвердить отключено
Путь: флажок, Отмена; возврат внутри
После отметки: Подтвердить доступно
Фон: действий и выхода фокуса не ожидается
Escape: закрытие и возврат к открытию

Хранить клавиши, состояния, объявленное имя и фокус до/после закрытия. Повторить с реально включёнными в охват вспомогательными технологиями.

Документация правил отдельно от вымышленных примеров

02 / Сохраняемые доказательства

Сохраняемые доказательства

Сценарий и среда

URL, устройство, браузер, вспомогательная технология, масштаб и действие.

Воспроизведение

Шаги, снимок или фрагмент DOM, фактический и ожидаемый результат.

Критерий и ущерб

Критерий WCAG, затронутые задачи и обоснованная тяжесть.

Повторная проверка

Исправление, версия, дата и результат с клавиатурой и диктором.

Сравнить другие ситуации и упражнения

КОНТРОЛЬНАЯ ТОЧКА

Прежде чем делать вывод

Типичная ошибка трактовки и проверка, которая помогает её избежать.

Поспешный вывод

Высокая автоматическая оценка не гарантирует удобство: понимание, фокус и озвучивание ошибок требуют проверки человеком.

Решающая проверка

Выполнить ключевые задачи с клавиатуры и средствами доступности, записать блокирующий этап и связать исправление с проверяемым критерием.

ПОСЛЕ ПРОВЕРКИ

Решение по результату

01

Меню видно, но с клавиатуры оно недоступно

Не утверждайте сценарий, исправьте общий компонент и проверьте открытие, переходы и закрытие на всех страницах.

02

Автоматическая проверка успешна, но инструкция непонятна

Сохраните результат, опишите провал задачи и перепишите инструкцию перед повторным испытанием.

Решение и возможность пересмотра

Решение и возможность пересмотра

Что позволяет решить проверка и какие сведения сохранять для пересмотра.

Достаточные данные

Пройдите важные задачи, ошибки и динамические состояния с клавиатуры; запишите URL, элемент, вспомогательную технологию и ожидаемый результат. Балла недостаточно.

Следующее решение

Сначала устраните блокировки пути. Исправьте общий компонент и повторите задачу на мобильных и затронутых языковых версиях.

Подробные случаи проверки

Типовые ситуации для подготовки проверки. Они не описывают выполненные проекты или реальные наблюдения.

Визуально понятная таблица теряет заголовки

Что изучить

Проверьте связи ячеек с заголовками, последовательное чтение и навигацию клавиатурой. Правильный внешний вид не доказывает, что каждое значение понятно при другом способе чтения.

Решение и действие

Исправьте структуру и подписи, затем повторите конкретную задачу поиска значения. Разделяйте результат автоматического анализатора и фактически пройденный сценарий.

Что сохранить

Сохраните таблицу, затронутые ячейки, способ чтения и последовательность действий для получения значения.

Фокус скрывается под закреплённой панелью

Что изучить

Пройдите по ссылкам, откройте и закройте меню, измените размер окна. Проверьте положение фокуса, видимость выбранного элемента и возврат к кнопке, открывшей меню.

Решение и действие

Настройте расположение, прокрутку или восстановление фокуса. Повторите весь сценарий, включая ошибку формы, а не только первое нажатие Tab.

Что сохранить

Запишите размер окна, использованные клавиши, компонент и положение фокуса до и после исправления.

Фокус теряется после действия

Что изучить

Пройти фильтр, меню и форму клавиатурой, проверить фокус после изменения состояния.

Решение и действие

Обеспечить доступ к следующему шагу и понятность результата.

Что сохранить

Клавиатурная последовательность, состояние, фокус и исправление.

Проверка перед решением

Эти вопросы дополняют метод. Они помогают установить подтверждённое, сохранив оговорки в записи.

Задача с клавиатуры

Можно ли завершить задачу клавиатурой без ловушек, с видимым фокусом и без элементов, закрытых фиксированной областью? Сохраните путь и браузер проверки.

Посмотреть разбор решения

Вымышленный пример: статус относится только к указанному критерию и охвату.

Вымышленное наблюдение
Кнопка получает фокус с клавиатуры, но полностью скрыта фиксированной шапкой.
Заявленное состояние
Наблюдаемое расхождение
Решение и следующая проверка
Исправить положение или прокрутку и повторить весь путь. Фокуса в DOM недостаточно.

Понятные ошибки

Имеют ли поля явные имена и объясняют ли ошибки способ продолжения? Дополните автоматические тесты масштабированием и экранным диктором на выбранных путях.

Посмотреть разбор решения

Вымышленный пример: статус относится только к указанному критерию и охвату.

Вымышленное наблюдение
Неверное поле краснеет; сообщение не называет поле и не объясняет исправление.
Заявленное состояние
Наблюдаемое расхождение
Решение и следующая проверка
Добавить текстовую ошибку со связью с полем, проверить исправление клавиатурой и скринридером.

Чтение при увеличении

Сохраняют ли подписи, таблицы и действия пригодность при увеличении? Проверьте связь заголовков с ячейками, а не только отсутствие переполнения.

Изученная документация : W3C · WCAG 2.2 ·

Посмотреть разбор решения

Вымышленный пример: статус относится только к указанному критерию и охвату.

Вымышленное наблюдение
В увеличенной тестовой таблице значения связаны с заголовками строк и столбцов; область доступна с клавиатуры.
Заявленное состояние
Подтверждено в этих рамках
Решение и следующая проверка
Сохранить браузер, масштаб и таблицу. Успех не оценивает остальные таблицы или весь сайт.
Документировать проверку

ИНСТРУМЕНТЫ / РЕЕСТРЫ

Какие сведения сохранить

Повторите задачу с клавиатурой и вспомогательной технологией. Укажите элемент, критерий и препятствие; один автоматический инструмент не устанавливает соответствие.

  • Дата просмотра и часовой пояс
  • Точный URL
  • Задача / этап пути
  • Устройство / браузер
  • Критерий приёмки
  • Наблюдаемый результат
  • Решение / следующий шаг
  • Ответственный за проверку
  • Следующая проверка
Заполненный вымышленный фрагмент

03 / FAQ

Частые вопросы

Достаточно ли автоматической проверки?

Нет. Она находит часть ошибок кода, но не всегда оценивает логику и завершение задачи.

Что проверять сначала?

Общие компоненты и ключевые пути: навигацию, поиск, запрос или контакт.

Проверять ли каждый язык?

Да, ключевые экраны: язык, подписи, ошибки и порядок чтения могут различаться.

Когда закрывать дефект?

Когда исходный сценарий работает с нужными способами доступа без новых поломок.

Можно ли блокировать автоматический интерфейс без ошибок?

Да да. Автоматические проверки обнаруживают некоторые дефекты, но выполнение взаимодействий остается необходимой для наблюдения за препятствиями для навигации, понимания или подтверждения.

04 / Официальные источники

Официальные источники

05 / Читать далее

Читать далее

Компьютер и контрольный лист. Иллюстративная сцена.

Сквозной аудит веб-формы

Читать протокол Компьютер и оборудование диагностики сети. Иллюстративная сцена.

Измерение реальной производительности сайта

Читать протокол Многоязычная клавиатура на исследовательском столе. Иллюстративная сцена.

Аудит многоязычного сайта

Читать протокол Оценка ответов ассистентов и ссылок на двух экранах.

Руководства · IA & Search

Читать протокол

Описать задачу

Контакт

От потребности к конкретной задаче

Несколько работ по этой теме. Каждая сумма относится к указанному базовому объёму; смета уточняет приоритеты и пересекающиеся задачи.

Диагностика доступности

Клавиатура, формы, контраст и чтение; план исправлений.

Шаблоны : 3 · 6 ч

От 480 € без НДС / 576 € с НДС

Подготовка и критерии приёмки
Что подготовить
Типовые страницы и компоненты, пользовательские задачи и выбранные критерии проверки.
Предлагаемый порядок
Определить задачи, выявить препятствия и повторить те же проверки после изменений.
Согласуемый результат
Воспроизводимые наблюдения, проверенные критерии и пределы диагностики без подразумеваемой сертификации.
Проверка этой услуги
Повторить согласованные проверки клавиатурой и описать элементы, критерии и ограничения.
Границы задачи
Выборка страниц или задач не даёт выводов обо всех сценариях сайта.

Подробнее о методе

Ориентировочный объём, уточняемый в смете.

Запросить смету →

Мобильные и адаптивные исправления

Переполнение, компоненты и сенсорное взаимодействие.

Шаблоны : 3 · 4 ч

От 320 € без НДС / 384 € с НДС

Подготовка и критерии приёмки
Что подготовить
Проблемные компоненты, целевые ширины, длинные тексты и используемые языки.
Предлагаемый порядок
Определить задачи, выявить препятствия и повторить те же проверки после изменений.
Согласуемый результат
Исправления вёрстки, масштабирования и взаимодействий для согласованных размеров.
Проверка этой услуги
Проверить выбранные ширины, длинные тексты и отсутствие переполнения на согласованных страницах.
Границы задачи
Выборка страниц или задач не даёт выводов обо всех сценариях сайта.

Подробнее о методе

Ориентировочный объём, уточняемый в смете.

Запросить смету →

Призывы к действию и формы

Предложение, подписи, ошибки и подтверждение.

Пользовательские пути : 1 · 4 ч

От 320 € без НДС / 384 € с НДС

Подготовка и критерии приёмки
Что подготовить
Целевое действие, текущие поля, частые ошибки и правило квалификации обращений.
Предлагаемый порядок
Определить задачи, выявить препятствия и повторить те же проверки после изменений.
Согласуемый результат
Переработанные подписи, ошибки и подтверждение со сценарием проверки.
Проверка этой услуги
Проверить корректное обращение и ошибку, затем отображаемые инструкции и подтверждение.
Границы задачи
Выборка страниц или задач не даёт выводов обо всех сценариях сайта.

Подробнее о методе

Ориентировочный объём, уточняемый в смете.

Запросить смету →
Все тарифы и пакеты

Подготовка и приёмка услуги

Эти ориентиры помогают определить задачу и проверить результат. Согласованная смета устанавливает состав работ, объём и сроки.

SXO, UX, доступность и производительность

Веб-интерфейс на компьютере, планшете и телефоне.

Уменьшить препятствия в нужном сценарии, особенно на мобильном устройстве и с клавиатурой.

Что подготовить
Предоставить приоритетные сценарии, целевые устройства и наблюдавшиеся ошибки.
Предлагаемый порядок
Определить задачи, выявить препятствия и повторить те же проверки после изменений.
Согласуемый результат
Согласовать перечень препятствий, их контекст и проверенные исправления.
Границы задачи
Выборка страниц или задач не даёт выводов обо всех сценариях сайта.

Проверка для приёмки

Включите ошибки, подтверждения, меню и фиксированные панели в клавиатурную проверку. Запишите перекрытия фокуса и обоснования исключений размера; значка недостаточно.

Документированная справка

Посмотреть объём и стоимость

ДОКУМЕНТИРОВАННЫЕ ОРИЕНТИРЫ

WCAG 2.2: размер цели, фокус и уровень соответствия

Перед проверкой укажите версию WCAG и требуемый уровень. Числа 24 и 44 обозначают CSS-пиксели, а не физические пиксели экрана. Эти проверки не устанавливают общее соответствие.

24 × 24 CSS px · AA · 2.5.844 × 44 CSS px · AAA · 2.5.5
WCAG 2.2: размер цели, фокус и уровень соответствия
ОриентирЗначение или формаЧто обозначает
2.5.8AA · 24 × 24 CSS pxМинимальный размер цели уровня AA; исключения касаются расстояния, эквивалентного элемента, текста, неизменённого браузерного элемента и необходимого представления.
2.5.5AAA · 44 × 44 CSS pxУсиленный критерий AAA со своими исключениями. Размер 44 × 44 не является общим требованием AA.
2.4.11AAЭлемент с клавиатурным фокусом не должен полностью скрываться содержимым автора, например фиксированной панелью.
2.4.12AAAУсиленный критерий требует, чтобы содержимое автора не скрывало никакую часть элемента с фокусом.
2.5.7AAПеретаскивание должно иметь способ выполнения одним указателем без перетаскивания, кроме необходимых случаев и неизменённых нативных элементов.
3.3.7AВ одном процессе уже введённые данные должны повторно использоваться или выбираться, кроме исключений безопасности, недействительности или необходимости.

Что учитывать в досье

Измеряйте интерактивную область, а не рисунок значка. Отдельно фиксируйте исключения, проверяйте раскрытые состояния, ошибки и подтверждения с клавиатуры. Автоматика не охватывает все перекрытия фокуса и процессы.

Первичная документация

Документация просмотрена .

ДОКУМЕНТИРОВАННЫЕ ОРИЕНТИРЫ

Поле формы: различить подпись, подсказку, ограничение и ошибку

Почтовый индекс 00123 может быть строкой, которую нужно сохранить, а не величиной для сложения. Элемент выбирают по смыслу данных. Таблица предлагает отдельные проверки; один атрибут не доказывает достоверность заявки или соответствие всего сценария.

label[for] → idaria-describedby → idaria-invalid + text
Поле формы: различить подпись, подсказку, ограничение и ошибку
ОриентирЗначение или формаЧто обозначает
label[for] / idassociationСвяжите видимую подпись с полем: for должен указывать на его уникальный в документе id. name задаёт имя отправляемых данных, а не эту связь.
placeholder / aria-describedbyinstructionsplaceholder исчезает после ввода. Сохраняйте нужные инструкции в постоянном тексте; aria-describedby может связать его с полем.
type / inputmodesemantics / keyboardinputmode предлагает режим ввода, но сам не ограничивает синтаксис. type=number подходит для числовой величины, а не для любого идентификатора из цифр.
patternwhole valueВ подходящем текстовом поле pattern ограничивает всё значение. Пустое необязательное поле не становится обязательным из-за одного pattern.
required / aria-requiredconstraint / staterequired требует значения для применимых элементов. aria-required сообщает состояние, но само не создаёт встроенную блокировку отправки.
aria-invalid / error textstate / explanationПосле выявления проблемы aria-invalid может сообщить состояние. Добавьте текст с названием поля и объяснением проблемы: одной красной рамки недостаточно.
WCAG 3.3.1 / 3.3.3identification / suggestionПредложение исправления отличается от указания ошибки. Дайте его, если оно известно и не нарушает безопасность или назначение содержимого.
client / servertwo checksПроверку браузера можно обойти. Сервер должен проверять данные и применять собственные деловые правила.

Что учитывать в досье

00123 — пример строки, а не подтверждённый адрес. Нельзя распространять национальный формат на все страны. Автоматические проверки дополняют тестами клавиатуры и вспомогательных технологий, включая ошибки и восстановление.

Первичная документация

Документация просмотрена .

ДОКУМЕНТИРОВАННЫЕ ОРИЕНТИРЫ

Контраст текста: сравнить отношение до округления

Разные цвета могут оставаться трудноразличимыми. WCAG 2.2 сравнивает относительную яркость после линеаризации компонентов sRGB. Инструмент рассчитывает отношение двух непрозрачных цветов, а не берёт образцы пикселей фотографии.

Контраст текста: сравнить отношение до округления
ОриентирЗначение или формаЧто обозначает
ratio(Lmax + 0.05) / (Lmin + 0.05)Более высокая яркость находится в числителе. Перестановка текста и фона не меняет отношение.
WCAG 1.4.3 · AA4.5:1Порог AA для обычного текста — 4,5:1 в области действия критерия 1.4.3.
WCAG 1.4.3 · AA · large3:1Для крупного текста порог AA — 3:1. Определение включает 18 пунктов или 14 пунктов полужирного текста с оговорками о шрифтах.
WCAG 1.4.6 · AAA7:1 / 4.5:1Усиленный критерий 1.4.6 задаёт 7:1 для обычного и 4,5:1 для крупного текста в своей области применения.
4.499:1< 4.5:1Отношение ниже 4,5 не достигает порога только потому, что округлённое значение равно 4,50. Сравнивать нужно до округления.

Рассчитать контраст sRGB

Два непрозрачных кода #RRGGBB. Отношение показано с четырьмя знаками, пороги сравниваются до округления.

Два корректных цвета: пороги сравнены.

Отношение
21.0000:1
AA · обычный текст · 4,5:1
Порог достигнут
AA · крупный текст · 3:1
Порог достигнут
AAA · обычный текст · 7:1
Порог достигнут
AAA · крупный текст · 4,5:1
Порог достигнут
s = component / 255
linear = s ≤ 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055)^2.4
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (max(L1, L2) + 0.05) / (min(L1, L2) + 0.05)

Что учитывать в досье

Расчёт принимает только непрозрачные цвета sRGB #RRGGBB без прозрачности, градиентов, фоновых изображений или других цветовых пространств. Он не проверяет исключения, все пары цветов сайта или полное соответствие WCAG. Для текста на фотографии проверяйте области непосредственно под буквами и разные кадрирования.

Первичная документация

Документация просмотрена .

ПОДРОБНЕЕ / ПРАКТИКА

Изучить препятствия в пользовательском сценарии

Пользователь может читать страницу, но не достигает ее основного действия. Исследование должно быть направлено на навигацию, понимание и взаимодействие, в нескольких условиях использования.

Обновлено .

Приоритетные проверки

Просмотр элементов на клавиатуре, проверка заголовков и наблюдение за подтверждающими сообщениями. Контролировать видимость фокуса, порядок чтения и доступ к необходимой информации.

Ошибки интерпретации

Автоматический контроль не охватывает весь опыт. Визуально ясный интерфейс может оставаться трудно использовать с помощью клавиатуры или вспомогательной технологии.

Рабочий документ для сохранения

Отчет о препятствиях сочетает в себе маршрут, условия использования, блокированный этап и доказательство. Коррекция должна быть перепровержена при условии, которая позволила выявить проблему.