एक्सेसिबिलिटी

एक्सेसिबल नाम

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> web component अपना एक्सेसिबल नाम label एट्रिब्यूट से लेता है।

इनपुट और मोशन

• prefers-reduced-motion सेट होने पर आइकन बिना एनिमेशन के सीधे अंतिम पोज़ पर पहुँच जाते हैं।
• trigger="parent" के साथ कीबोर्ड फ़ोकस मोशन को उसी तरह चलाता है जैसे होवर। माउस क्लिक के बाद बचा फ़ोकस ऐसा नहीं करता।
• टच स्क्रीन पर एक टैप मोशन को आगे और फिर पीछे चलाता है। टॉगल आइकन इसकी जगह अपनी स्थिति बदलते हैं।
• Bookmark जैसे टॉगल आइकन अपनी स्थिति केवल रंग और आकार से दिखाते हैं। आइकन के बगल में दिखने वाला टेक्स्ट जोड़ें, या बटन पर aria-pressed सेट करें, ताकि स्क्रीन रीडर स्थिति बोल सकें।