Aksesibilitas

Halaman ini menjelaskan cara kerja ikon dengan screen reader, keyboard, input sentuh, dan pengaturan pengurangan gerakan.

Nama aksesibel

Tanpa title, ikon bersifat aria-hidden dan screen reader melewatinya. Jika ikon adalah satu-satunya isi tombol atau tautan, beri kontrol itu nama aksesibel, baik dengan aria-label pada kontrol maupun dengan title pada ikon:

tsx

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

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

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

Web component <kubai-icon> mengambil nama aksesibelnya dari atribut label.

Input dan gerakan

Saat prefers-reduced-motion aktif, ikon langsung berpindah ke pose akhir tanpa animasi.
Dengan trigger="parent", fokus keyboard memutar gerakan seperti hover. Fokus yang tertinggal setelah klik mouse tidak memutarnya.
Di layar sentuh, satu ketukan memutar gerakan maju lalu mundur. Ikon toggle justru berganti status.
Ikon toggle seperti Bookmark hanya menunjukkan statusnya lewat warna dan bentuk. Tambahkan teks yang terlihat di samping ikon, atau setel aria-pressed pada tombol, agar screen reader dapat mengumumkan statusnya.