Atomico — современная библиотека для построения веб-компонентов на JavaScript с реактивной моделью данных. Тестирование доступности (Accessibility, A11y) является важной частью разработки компонентов, обеспечивая корректное взаимодействие с пользователями, использующими вспомогательные технологии. В Atomico проверка доступности интегрирована с жизненным циклом компонентов, что позволяет писать тесты и внедрять проверки прямо на этапе разработки.
ARIA (Accessible Rich Internet Applications) позволяет сообщать вспомогательным технологиям о роли, состоянии и свойствах элементов. В Atomico применение ARIA осуществляется через стандартные атрибуты HTML, так как JSX-подобный синтаксис поддерживает любое свойство элемента.
Пример:
import { c, useEffect } from "atomico";
function ToggleButton() {
const [active, setActive] = useState(false);
return (
);
}
export const toggleButton = c(ToggleButton);Ключевой момент: каждое интерактивное состояние должно быть
отражено в атрибутах ARIA. Например, aria-checked
для переключателей или aria-expanded для раскрывающихся
блоков.
Использование семантических HTML-элементов
(, ,
и т.д.) сокращает
количество дополнительных атрибутов ARIA и улучшает совместимость с
экранными читалками. Atomico поддерживает стандартный DOM, поэтому
компоненты можно строить на семантических тегах, дополняя их только там,
где необходимо.
Пример:
import { c } from "atomico";
function Modal({ open }) {
return open ? (
) : null;
}
export const modal = c(Modal);Использование и aria-modal
обеспечивает базовую доступность без дополнительных библиотек.
Клавиатурная навигация является обязательной частью
доступности. Atomico позволяет управлять фокусом через стандартный DOM
API внутри хуков жизненного цикла, таких как useEffect.
Пример управления фокусом:
import { c, useRef, useEffect } from "atomico";
function FocusInput() {
const inputRef = useRef();
useEffect(() => {
inputRef.current.focus();
}, []);
return ;
}
export const focusInput = c(FocusInput);Дополнительно важно использовать логическую последовательность фокуса для интерактивных компонентов, таких как модальные окна, вкладки и аккордеоны.
Atomico поддерживает интеграцию с инструментами тестирования, такими
как Jest и Testing Library. Для
проверки доступности используется axe-core или
jest-axe.
Пример теста:
import { render } from "@testing-library/atomico";
import { axe } from "jest-axe";
import { toggleButton } from "./toggleButton";
test("ToggleButton соответствует стандартам A11y", async () => {
const { container } = render(toggleButton);
const results = await axe(container);
expect(results).toHaveNoViolations();
});Ключевой момент: тестирование доступности должно быть частью CI/CD, чтобы ошибки не попадали в продакшн.
Для динамических компонентов, таких как вкладки, аккордеоны или
модальные окна, важно синхронизировать состояние и атрибуты ARIA.
Atomico позволяет использовать реактивные состояния
(useState) и эффекты (useEffect) для
обновления атрибутов при изменении состояния.
Пример аккордеона:
import { c, useState } from "atomico";
function Accordion({ items }) {
const [openIndex, setOpenIndex] = useState(null);
return (
{items.map((item, i) => (
{openIndex === i && {item.content}}
))}
);
}
export const accordion = c(Accordion);Эта практика обеспечивает, что вспомогательные технологии корректно интерпретируют состояние открытых и закрытых панелей.
Доступность визуальных компонентов включает проверку контрастности
текста и фона. Atomico позволяет внедрять CSS-переменные и использовать
динамическое управление стилями через useState или
CSS-in-JS.
Пример с динамическим контрастом:
import { c, useState } from "atomico";
function ColorText({ text }) {
const [highContrast, setHighContrast] = useState(false);
return (
setHighContrast(!highContrast)}
>
{text}
);
}
export const colorText = c(ColorText);Контрастность можно проверять с помощью автоматических тестов или
инструментов типа axe-core.
Полезная стратегия — включение скриптов проверки доступности в сборку. Atomico совместим с инструментами веб-пакетов, позволяя запускать проверки на стадии сборки компонентов. Это обеспечивает постоянный контроль качества и предотвращает регрессии при обновлениях.