Тестирование доступности

Тестирование доступности (accessibility, a11y) является неотъемлемой частью разработки интерфейсов, обеспечивая возможность использования приложений людьми с различными ограничениями. Preact, как легковесный фреймворк для построения UI, предоставляет гибкую структуру, позволяющую интегрировать методы тестирования доступности на различных уровнях приложения.

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

Семантическая разметка Правильное использование HTML-элементов играет ключевую роль. Например, кнопки должны быть <button>, а ссылки <a>, а не имитироваться <div> с обработчиками событий. Preact поддерживает стандартную HTML-разметку, поэтому проверка семантики сводится к корректному использованию JSX:

const Button = ({ onClick, label }) => (
    <button onCl ick={onClick}>{label}</button>
);

ARIA-атрибуты ARIA (Accessible Rich Internet Applications) расширяет возможности HTML для сложных компонентов. Preact позволяет добавлять ARIA-атрибуты напрямую в JSX:

const Modal = ({ isOpen }) => (
    <div role="dialog" aria-modal={isOpen}>
        Контент модального окна
    </div>
);

Ключевые ARIA-атрибуты:

  • role – назначение элемента
  • aria-label / aria-labelledby – описание для скринридеров
  • aria-hidden – скрытие элементов от доступности
  • aria-live – уведомления об изменениях динамического контента

Инструменты для тестирования доступности

Lighthouse Lighthouse встроен в Chrome DevTools и предоставляет детальный отчёт по a11y. Он проверяет: контраст текста, семантику, использование ARIA, навигацию с клавиатуры.

axe-core Библиотека для автоматизированного тестирования доступности. В Preact её удобно использовать с Jest или Cypress:

import { render } from '@testing-library/preact';
import { axe, toHaveNoViolations } from 'jest-axe';
import App from './App';

expect.extend(toHaveNoViolations);

test('App should have no accessibility violations', async () => {
    const { container } = render(<App />);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
});

Testing Library @testing-library/preact позволяет писать тесты, ориентированные на поведение пользователя, а не на реализацию компонента, что повышает качество проверки доступности:

import { render, screen } from '@testing-library/preact';
import userEvent from '@testing-library/user-event';
import Modal from './Modal';

test('Modal can be closed with Escape key', async () => {
    render(<Modal isOpen={true} />);
    const modal = screen.getByRole('dialog');
    await userEvent.keyboard('{Escape}');
    expect(modal).not.toBeVisible();
});

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

Для пользователей, использующих клавиатуру, важна последовательная навигация по элементам:

  • Табуляция (Tab) – переход между интерактивными элементами
  • Enter / Space – активация кнопок и ссылок
  • Escape – закрытие модальных окон

В Preact это реализуется через обработку событий:

const Dropdown = ({ items }) => {
    const [isOpen, setIsOpen] = useState(false);
    
    const handleKeyDown = (e) => {
        if (e.key === 'Escape') setIsOpen(false);
    };

    return (
        <div tabIndex={0} onKeyD own={handleKeyDown}>
            <button onCl ick={() => setIsOpen(!isOpen)}>Меню</button>
            {isOpen && <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>}
        </div>
    );
};

Тестирование визуальной доступности

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

.button {
    color: #ffffff;
    background-color: #1a73e8;
}

Фокус и видимость активного элемента Важно, чтобы при навигации клавиатурой был видим фокус:

:focus {
    outline: 2px solid #ff9800;
    outline-offset: 2px;
}

Интеграция тестов доступности в CI/CD

Автоматизация тестирования a11y в Preact-проектах повышает стабильность интерфейса:

  1. Jest + axe – проверка компонентов при каждом коммите
  2. Cypress + cypress-axe – тестирование поведения пользователя в браузере
  3. Lighthouse CI – оценка страниц на соответствие стандартам WCAG

Пример конфигурации CI с axe и Jest:

{
  "scripts": {
    "test": "jest --coverage",
    "a11y": "jest --config=jest.a11y.config.js"
  }
}

Динамический контент и уведомления

Приложения на Preact часто используют динамический контент. Для его доступности следует применять aria-live:

const Notification = ({ message }) => (
    <div role="status" aria-live="polite">
        {message}
    </div>
);
  • aria-live="polite" – обновления уведомлений не прерывают текущую работу пользователя
  • aria-live="assertive" – важные уведомления, требующие немедленного внимания

Тестирование доступности в Preact требует комплексного подхода: семантическая разметка, использование ARIA, проверка навигации с клавиатуры, контраста и динамического контента. Интеграция инструментов вроде axe-core, Testing Library и Lighthouse обеспечивает высокий стандарт интерфейсов и совместимость с требованиями WCAG.

Оглавление