Навигация с клавиатуры

Навигация с клавиатуры является ключевым аспектом доступности веб-приложений. Lighthouse в JavaScript предоставляет мощный инструмент для анализа и оценки качества реализации этой функциональности. Он проверяет, насколько веб-страница поддерживает управление с клавиатуры, выявляет потенциальные проблемы и предлагает рекомендации по их исправлению.

Основные принципы проверки

1. Фокусируемость элементов Lighthouse анализирует, какие элементы страницы могут получать фокус. Проверяется наличие атрибута tabindex, правильная последовательность элементов, а также возможность взаимодействия с элементами формы и интерактивными компонентами.

  • tabindex="0" – элемент включен в естественную последовательность фокуса.
  • tabindex="-1" – элемент можно программно сфокусировать, но он не включен в последовательность при нажатии Tab.
  • tabindex="1" и выше – устаревшая практика, нарушающая естественный порядок фокуса.

2. Видимость фокуса Элементы, которые могут получать фокус, должны иметь визуальное выделение при активном фокусе. Lighthouse проверяет наличие CSS-стилей для состояния :focus и сигнализирует о проблемах, когда фокус невидим. Это критично для пользователей, использующих клавиатуру или вспомогательные технологии.

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

Проверка интерактивных элементов

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

  • Возможность активации с клавиатуры через Enter или Space.
  • Правильное использование ARIA-ролей для описания интерактивных элементов.
  • Доступность всех функций без использования мыши.

Если элемент интерактивен, но не может быть активирован с клавиатуры, Lighthouse помечает это как блокирующую проблему.

Интеграция с тестами

Для автоматической проверки навигации с клавиатуры Lighthouse предоставляет API, доступное в Node.js:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {port: chrome.port, onlyCategories: ['accessibility']};
  const runnerResult = await lighthouse('https://example.com', options);

  const audits = runnerResult.lhr.audits;
  console.log('Клавиатурная доступность:');
  console.log(audits['keyboard']).log;
  await chrome.kill();
})();

Этот пример запускает Lighthouse в режиме accessibility и выводит детальный отчет по проблемам с навигацией с клавиатуры, включая элементы без фокусировки, неправильный порядок фокуса и отсутствующие состояния :focus.

Рекомендации по исправлению проблем

  • Добавление видимого фокуса: использовать outline или другие CSS-стили для состояния :focus.
  • Правильное использование tabindex: избегать положительных значений, поддерживать естественную последовательность.
  • ARIA-атрибуты: role="button", aria-label и другие позволяют правильно обозначить элементы для вспомогательных технологий.
  • Тестирование всех интерактивных элементов: убедиться, что любой элемент, доступный для мыши, также управляется клавиатурой.

Метрики и отчеты Lighthouse

Lighthouse оценивает клавиатурную доступность по шкале от 0 до 100. В отчете выделяются:

  • Pass – элемент полностью доступен для клавиатуры.
  • Fail – элемент не доступен для клавиатуры.
  • Not Applicable – элемент не интерактивен и проверка не требуется.

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

Практическое применение

Регулярное использование Lighthouse для анализа клавиатурной доступности позволяет:

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

Встроенные аудиты Lighthouse легко интегрируются в CI/CD пайплайны, что обеспечивает автоматическое отслеживание изменений и предотвращение регрессий в клавиатурной доступности.

Оглавление