Accessibility в Carbon компонентах

Carbon — это комплексная библиотека UI-компонентов, разработанная для корпоративных приложений на JavaScript и SvelteKit. Одной из ключевых особенностей Carbon является поддержка доступности (Accessibility, a11y), что обеспечивает корректное взаимодействие пользователей с ограниченными возможностями. Все компоненты проектируются с учётом ARIA-атрибутов, клавиатурной навигации и семантической разметки.

ARIA-атрибуты и их роль

ARIA (Accessible Rich Internet Applications) — стандарт, определяющий дополнительные атрибуты для улучшения доступности динамических компонентов. В Carbon каждый компонент имеет встроенную поддержку ARIA:

role — определяет семантическую роль элемента. Например, role="button" для кнопок или role="dialog" для модальных окон.
aria-label и aria-labelledby — используются для явного указания текста, описывающего элемент для экранных читалок.
aria-describedby — связывает элемент с описанием, позволяя передавать дополнительную информацию.
aria-hidden — скрывает декоративные элементы от вспомогательных технологий, чтобы не загромождать интерфейс лишней информацией.

Пример использования в Carbon Button:

<Button aria-label="Сохранить изменения" on:click={saveData}>
  Сохранить
</Button>

Клавиатурная навигация

Все интерактивные компоненты Carbon полностью управляются с клавиатуры. Это включает:

Tab / Shift+Tab — переход между интерактивными элементами.
Enter / Space — активация кнопок и ссылок.
Arrow keys — навигация внутри списков, таблиц, выпадающих меню.

Пример для Select-компонента:

<Select bind:value={selectedOption} label="Выберите опцию">
  <Option value="1">Опция 1</Option>
  <Option value="2">Опция 2</Option>
</Select>

В этом компоненте Carbon автоматически обеспечивает поддержку стрелочной навигации и открытия/закрытия списка клавишами Enter/Space.

Работа с модальными окнами и диалогами

Модальные окна (Modal) и диалоги (Dialog) требуют особого внимания к доступности:

Фокус всегда переносится внутрь модального окна при его открытии.
Закрытие модального окна возвращает фокус к элементу, вызвавшему его.
screen reader-friendly атрибуты: aria-modal="true", role="dialog", aria-labelledby и aria-describedby.

Пример модального окна:

<Modal open bind:this={modalRef} aria-labelledby="modal-title" aria-describedby="modal-desc">
  <h2 id="modal-title">Подтверждение удаления</h2>
  <p id="modal-desc">Вы уверены, что хотите удалить этот элемент?</p>
  <Button on:click={confirmDelete}>Удалить</Button>
  <Button on:click={closeModal}>Отмена</Button>
</Modal>

Цвета, контраст и визуальная доступность

Carbon соблюдает стандарты WCAG 2.1 по контрастности. Ключевые аспекты:

Текстовые элементы имеют достаточный контраст с фоном (не менее 4.5:1 для нормального текста).
Цвета не используются как единственный способ передачи информации. Например, ошибки отмечаются не только красным цветом, но и иконкой или текстом.
Компоненты поддерживают темные и светлые темы, автоматически подбирая контрастные цвета для всех состояний (hover, active, disabled).

Использование ролей и семантики в таблицах

Таблицы (DataTable) Carbon включают:

thead, tbody, tr, th, td с правильной семантикой.
scope=“col” и scope=“row” для заголовков столбцов и строк.
Поддержку ARIA-sort для сортируемых колонок.
Возможность навигации с клавиатуры и озвучивания экранными читалками.

<DataTable headers={headers} rows={rows} />

Доступность форм

Формы (TextInput, Dropdown, Checkbox) в Carbon интегрируют:

label и helper text, связанные с полем через for и id.
Автоматическое управление aria-invalid, если значение невалидно.
Поддержку error messages, связанных с полем через aria-describedby.

Пример поля ввода:

<TextInput
  id="username"
  labelText="Имя пользователя"
  helperText="Введите имя пользователя"
  invalid={hasError}
  invalidText="Имя пользователя обязательно"
/>

Динамические уведомления и live regions

Компоненты уведомлений (Notification, Toast) используют ARIA live regions (aria-live="polite" или aria-live="assertive"), чтобы экранные читалки автоматически озвучивали появление новых сообщений без необходимости фокусироваться на них.