Screen reader support

Screen reader support является критически важным аспектом доступности веб-приложений. Библиотека Carbon Components Svelte изначально проектировалась с учетом лучших практик доступности, включая поддержку пользователей с нарушениями зрения. В Svelte-компонентах Carbon встроены семантические элементы и ARIA-атрибуты, которые позволяют экранным читалкам правильно интерпретировать интерфейс.

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

  1. Семантическая разметка Каждый компонент Carbon использует HTML-элементы, соответствующие своему функциональному назначению. Например:

    • <button> для интерактивных кнопок
    • <input> с соответствующим типом для полей ввода
    • <label> для привязки текста к полю формы

    Это позволяет экранным читалкам озвучивать элементы корректно без дополнительной настройки.

  2. ARIA-атрибуты Для компонентов, где семантика HTML недостаточна, применяются ARIA-атрибуты:

    • aria-label и aria-labelledby для предоставления понятного названия элементу
    • aria-describedby для описания элемента
    • aria-hidden="true" для скрытия декоративных элементов от читалок

    В Carbon Components Svelte большинство компонентов уже имеют встроенные ARIA-атрибуты, например, кнопки с иконками автоматически получают aria-label, если текст отсутствует.

Интерактивные элементы и фокус

  • Фокусировка: все интерактивные элементы реализованы с управлением фокуса через tabindex, что обеспечивает корректное перемещение по странице при использовании клавиатуры и экранных читалок.
  • Состояния элементов: компоненты, такие как чекбоксы и переключатели (Toggle, Checkbox), используют aria-checked для передачи состояния включено/выключено.
  • Модальные окна: компоненты Modal и Dialog автоматически управляют фокусом при открытии и закрытии, а также применяют aria-modal="true" для ограничения взаимодействия с фоновым контентом.

Сообщения и уведомления

Для динамически обновляемого контента используются области живого обновления (live regions):

  • role="alert" для сообщений об ошибках или критических уведомлений
  • role="status" для обычной информации, которую необходимо озвучить

Компоненты форм в Carbon Svelte поддерживают интеграцию с этими зонами, что обеспечивает корректную озвучку ошибок и подсказок при взаимодействии с формами.

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

Пример текстового поля с поддержкой экранных читалок:

<TextInput
  id="email"
  labelText="Email"
  placeholder="Введите email"
  type="email"
  required
  invalidText="Введите корректный email"
/>
  • labelText создаёт <label> для поля
  • invalidText выводит сообщение об ошибке в область с aria-live="polite", что озвучивается экранной читалкой при валидации

Пример кнопки с иконкой:

<Button
  kind="ghost"
  hasIconOnly={true}
  renderIcon={Search20}
  iconDescription="Поиск"
  on:click={handleSearch}
/>
  • hasIconOnly={true} указывает, что кнопка содержит только иконку
  • iconDescription автоматически добавляется как aria-label, что позволяет читалке озвучить функциональность кнопки

Настройка кастомных компонентов

Если создается собственный компонент на базе Carbon, важно:

  1. Использовать семантические HTML-элементы
  2. Добавлять aria-* атрибуты, соответствующие поведению элемента
  3. Управлять фокусом через bind:this и методы Svelte, чтобы элемент получал фокус при интеракции
  4. Использовать live regions для динамического контента

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

Для проверки корректности поддержки экранных читалок рекомендуется:

  • Использовать инструменты типа axe-core или Lighthouse для автоматизированного анализа
  • Проверять вручную с помощью читалок, например NVDA, VoiceOver или JAWS
  • Убедиться, что последовательность фокусировки логична и что все интерактивные элементы озвучиваются корректно

Особенности Carbon Components Svelte

  • Компоненты по умолчанию соблюдают стандарты WCAG 2.1, включая правильную семантику и ARIA
  • Все уведомления, ошибки и динамический контент автоматически интегрированы с live regions
  • Для сложных интерактивных компонентов (таблицы, модальные окна, панели) Carbon реализует управление фокусом и скрытие фонового контента от читалок

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

Оглавление