Barrierefreiheit

Diese Seite beschreibt, wie Icons mit Screenreadern, Tastatur, Touch-Eingabe und Einstellungen für reduzierte Bewegung funktionieren.

Zugängliche Namen

Ohne title ist ein Icon aria-hidden, und Screenreader überspringen es. Wenn ein Icon der einzige Inhalt einer Schaltfläche oder eines Links ist, geben Sie dem Steuerelement einen zugänglichen Namen, entweder mit aria-label am Steuerelement oder mit title am Icon:

tsx

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

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

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

Die Web Component <kubai-icon> übernimmt ihren zugänglichen Namen aus dem Attribut label.

Eingabe und Bewegung

Ist prefers-reduced-motion gesetzt, springen Icons ohne Animation direkt in die Endpose.
Mit trigger="parent" spielt der Tastaturfokus die Bewegung ab wie das Überfahren. Ein Fokus, der nach einem Mausklick zurückbleibt, tut das nicht.
Auf Touchscreens spielt ein Tippen die Bewegung vor und zurück ab. Umschalt-Icons wechseln stattdessen den Zustand.
Umschalt-Icons wie Bookmark zeigen ihren Zustand nur durch Farbe und Form. Fügen Sie neben dem Icon sichtbaren Text hinzu oder setzen Sie aria-pressed auf der Schaltfläche, damit Screenreader den Zustand ansagen können.