Доступность

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

Доступные имена

Без title иконка получает aria-hidden, и программы чтения с экрана её пропускают. Если иконка — единственное содержимое кнопки или ссылки, задайте элементу доступное имя: либо aria-label на самом элементе, либо title на иконке:

tsx

import { Settings } from "kubai-icons-react";

<button aria-label="Settings"><Settings /></button>

<button><Settings title="Settings" /></button>

Веб-компонент <kubai-icon> берёт доступное имя из атрибута label.

Ввод и анимация

Если включён prefers-reduced-motion, иконки сразу переходят в конечное положение без анимации.
С trigger="parent" фокус с клавиатуры запускает анимацию так же, как наведение. Фокус, оставшийся после щелчка мышью, её не запускает.
На сенсорных экранах касание запускает анимацию вперёд и назад. Иконки-переключатели вместо этого меняют состояние.
Иконки-переключатели, например Bookmark, показывают состояние только цветом и формой. Добавьте рядом с иконкой видимый текст или задайте aria-pressed на кнопке, чтобы программы чтения с экрана могли озвучить состояние.