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

Основы доступности

Carbon Components Svelte построена с учётом принципов доступности (Accessibility, A11y). Каждый компонент содержит встроенные атрибуты ARIA, семантическую разметку и поддерживает клавиатурную навигацию. Это позволяет создавать интерфейсы, которые корректно воспринимаются скринридерами и другими вспомогательными технологиями.

Основные элементы, на которые стоит обратить внимание:

  • ARIA-атрибуты: используются для передачи информации о роли элемента, состоянии и свойствах (например, aria-label, aria-expanded, aria-checked).
  • Табуляция и фокус: все интерактивные элементы поддерживают управление с клавиатуры. Компоненты корректно обрабатывают Tab, Enter, Space и стрелочные клавиши.
  • Семантическая HTML-разметка: Carbon Components Svelte предпочитает использовать нативные элементы HTML (button, input, select) там, где это возможно, вместо кастомных решений, что повышает доступность по умолчанию.

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

Для проверки доступности интерфейсов можно использовать следующие инструменты:

  • axe-core: автоматизированный тест на соответствие WCAG. Имеет интеграцию с Svelte-тестами через jest-axe.
  • Lighthouse: встроенный в Chrome инструмент, оценивающий доступность страницы.
  • NVDA, VoiceOver: скринридеры для проверки восприятия интерфейса пользователем.

Пример интеграции axe-core с тестом компонента:

import { render } from '@testing-library/svelte';
import { axe, toHaveNoViolations } from 'jest-axe';
import Button from '../src/Button.svelte';

expect.extend(toHaveNoViolations);

test('Button не имеет нарушений доступности', async () => {
  const { container } = render(Button, { props: { label: 'Нажми меня' } });
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Тестирование фокусного порядка

Правильная последовательность фокусировки обеспечивает удобную навигацию клавиатурой. Для проверки фокусного порядка:

  1. Перейти на страницу с компонентом.
  2. Использовать клавишу Tab для перехода между интерактивными элементами.
  3. Проверить, что фокус переходит логично и соответствует визуальному порядку.
  4. Для сложных компонентов, таких как Dropdown или Modal, убедиться, что фокус корректно ограничен внутри открытого модального окна (focus trap).

Пример реализации focus trap в Svelte:

<script>
  import { onMount } from 'svelte';
  let modal;
  let firstFocusable;
  let lastFocusable;

  onMount(() => {
    const focusableElements = modal.querySelectorAll(
      'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    firstFocusable = focusableElements[0];
    lastFocusable = focusableElements[focusableElements.length - 1];
    firstFocusable.focus();

    modal.addEventListener('keydown', (e) => {
      if (e.key === 'Tab') {
        if (e.shiftKey && document.activeElement === firstFocusable) {
          e.preventDefault();
          lastFocusable.focus();
        } else if (!e.shiftKey && document.activeElement === lastFocusable) {
          e.preventDefault();
          firstFocusable.focus();
        }
      }
    });
  });
</script>

<div bind:this={modal} role="dialog" aria-modal="true">
  <button>Закрыть</button>
  <input placeholder="Введите текст" />
  <button>Сохранить</button>
</div>

Проверка компонентов Carbon

Каждый компонент Carbon имеет встроенные атрибуты и поддержку событий для доступности:

  • Button: поддержка aria-pressed для toggle-кнопок, правильная реакция на Enter и Space.
  • TextInput и TextArea: наличие aria-label или aria-labelledby, управление ошибками через aria-invalid и aria-describedby.
  • Modal: focus trap, role="dialog", aria-modal="true", возможность закрытия через Escape.
  • Dropdown и ComboBox: управление aria-expanded, aria-controls, поддержка клавиш стрелок для навигации по списку.

Автоматизированные тесты и CI

Для командной разработки рекомендуется включать проверку доступности в CI:

  1. Настроить тестовую среду с jest и @testing-library/svelte.
  2. Использовать jest-axe для всех интерактивных компонентов.
  3. Проверять новые изменения на наличие нарушений A11y перед слиянием в основную ветку.

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

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

Ручная проверка интерактивности

Некоторые аспекты доступности невозможно проверить автоматически:

  • Логика и последовательность контента, воспринимаемого скринридером.
  • Контраст текста и фона (особенно для динамически меняющихся стилей).
  • Сообщения об ошибках и подсказки, корректно передаваемые пользователю.

Best Practices

  • Использовать нативные элементы HTML, когда это возможно.
  • Проверять все состояния компонентов (disabled, active, error).
  • Добавлять ARIA-атрибуты только там, где это необходимо.
  • Обеспечивать обратную связь пользователю через текстовые подсказки и визуальные индикаторы.
  • Всегда тестировать с клавиатурой и скринридером наряду с автоматизированными инструментами.

Тщательное соблюдение этих принципов гарантирует, что приложения на Carbon Components Svelte будут доступны и удобны для всех пользователей.

Оглавление