إتاحة الوصول

الأسماء المتاحة

من دون title تكون الأيقونة aria-hidden وتتجاوزها قارئات الشاشة. عندما تكون الأيقونة المحتوى الوحيد لزر أو رابط، أعطِ عنصر التحكم اسما متاحا، إما بالسمة aria-label على عنصر التحكم أو بالخاصية title على الأيقونة:

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 على الزر، لتتمكن قارئات الشاشة من الإعلان عن الحالة.