Аудиты доступности

Lighthouse — это инструмент для анализа производительности веб-страниц, качества кода и доступности контента. В контексте доступности (accessibility) он выполняет аудит страницы, выявляет проблемы, которые мешают пользователям с ограниченными возможностями использовать сайт, и предоставляет рекомендации по исправлению.

Основные принципы аудита доступности

  1. Семантическая структура документа Проверка правильного использования заголовков (<h1>–<h6>), списков (<ul>, <ol>) и других структурных элементов. Семантика HTML помогает вспомогательным технологиям, таким как экранные читалки, корректно интерпретировать содержание страницы.

  2. Контрастность текста Lighthouse оценивает соотношение контраста текста и фона. Недостаточный контраст затрудняет чтение для людей с нарушениями зрения. Стандарт WCAG требует минимального соотношения 4.5:1 для текста обычного размера и 3:1 для крупного текста.

  3. Атрибуты альтернативного текста для изображений Все элементы <img> должны иметь атрибут alt, описывающий смысл изображения. Lighthouse проверяет наличие и корректность этих атрибутов.

  4. Фокус и навигация с клавиатуры Проверяется возможность перемещения по интерактивным элементам (ссылки, кнопки, формы) с помощью клавиатуры. Элементы должны быть доступны через tab и иметь видимый индикатор фокуса.

  5. ARIA-атрибуты и роли Lighthouse проверяет корректность использования ARIA (role, aria-label, aria-hidden). Неправильное использование ARIA может ухудшить доступность вместо её улучшения.

Использование Lighthouse через Node.js

Для запуска аудитов доступности программно используется модуль lighthouse:

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 url = 'https://example.com';

  const runnerResult = await lighthouse(url, options);

  const report = runnerResult.lhr;
  console.log('Accessibility score:', report.categories.accessibility.score * 100);
  report.audits.forEach(audit => {
    if (audit.score !== 1) {
      console.log(`${audit.id}: ${audit.title} — ${audit.description}`);
    }
  });

  await chrome.kill();
})();

Пояснения к коду:

  • chromeLauncher.launch запускает экземпляр Chrome в режиме headless.
  • onlyCategories: ['accessibility'] ограничивает аудит только проверкой доступности.
  • runnerResult.lhr.categories.accessibility.score возвращает процентное значение общего уровня доступности страницы.
  • audits содержит детализированные рекомендации и ошибки, которые нужно исправить.

Основные категории аудитов доступности

  1. ARIA Attributes Проверка правильности ARIA-атрибутов, включая уникальность идентификаторов и соответствие ожидаемым ролям.

  2. Buttons and Links Проверка интерактивных элементов на наличие текста или label, который информирует пользователя о действии.

  3. Color Contrast Выявление текста и элементов интерфейса с недостаточным контрастом для пользователей с нарушениями зрения.

  4. Form Elements Проверка корректного использования <label> для полей форм. Поля без явного или скрытого текста могут быть недоступны для экранных читалок.

  5. Images Контроль наличия alt текста и корректного использования декоративных изображений (alt="").

  6. Document Structure Проверка правильного использования заголовков, семантических тегов (<main>, <nav>, <header>) и логического порядка контента.

Интеграция результатов аудита в процессы разработки

  • CI/CD: Lighthouse может быть интегрирован в конвейеры сборки, чтобы автоматически проверять доступность при каждом деплое.
  • Отчёты в формате JSON и HTML: Позволяют детально анализировать ошибки и отслеживать прогресс.
  • Использование thresholds: Можно настроить минимальные допустимые баллы по доступности, чтобы сборка падала при низком качестве.

Советы по улучшению доступности на основе Lighthouse

  • Все интерактивные элементы должны быть доступны через клавиатуру и иметь явные состояния фокуса.
  • Изображения и медиа должны содержать альтернативный текст или подписи.
  • Контраст текста и фона должен соответствовать стандартам WCAG.
  • Использовать семантические HTML-теги для логической структуры документа.
  • ARIA-атрибуты применять только при необходимости, избегая избыточного использования.

Практический пример исправления ошибок

Ошибка: Кнопка без текста (<button></button>). Исправление:

<button aria-label="Закрыть окно">×</button>

Ошибка: Низкий контраст текста. Исправление:

.button {
  color: #ffffff; /* текст */
  background-color: #007acc; /* фон */
}

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

Если требуется, можно также подключать lighthouse-plugin-accessibility для расширенных проверок специфических сценариев и кастомизации аудита под конкретный проект.

Оглавление