دسترس‌پذیری
کاشی چه تضمین‌هایی می‌دهد و چه بخشی بر عهدهٔ شماست.
هدف کاشی انطباق با WCAG 2.2 در سطح AA است. این تعهد فقط روی کاغذ نیست؛ بخش زیادی از آن به‌صورت خودکار در فرایند ساخت کنترل می‌شود.
آنچه خودکار بررسی می‌شود
کنتراست رنگ
در هر بیلد پکیج توکن‌ها، کنتراست همهٔ جفت‌های متن و پس‌زمینه در هر دو تم تیره و روشن محاسبه می‌شود:
- متن معمولی: حداقل ۴٫۵ به ۱
- حاشیهٔ فیلدها، چک‌باکس و سوییچ: حداقل ۳ به ۱ (معیار 1.4.11)
اگر حتی یک جفت رد شود، بیلد متوقف می‌شود و نسخه‌ای منتشر نمی‌شود.
ساختار ARIA
تست‌های خودکار بررسی می‌کنند که برای مثال برچسب و پیام خطا به فیلد متصل باشند، سوییچ نقش switch داشته باشد و دکمهٔ در حال بارگذاری فوکوس‌پذیر بماند.
پشتیبانی در کامپوننت‌ها
| ویژگی | پیاده‌سازی |
|---|---|
| فوکوس کیبورد | حلقهٔ فوکوس ۴ پیکسلی روی همهٔ کنترل‌ها، فقط هنگام استفاده از کیبورد (:focus-visible) |
| صفحه‌خوان | برچسب‌ها و پیام‌های فارسی پیش‌فرض، قابل‌تغییر از طریق props |
| حالت کنتراست بالای ویندوز | پشتیبانی از forced-colors؛ چک‌باکس و سوییچ به کنترل بومی سیستم برمی‌گردند |
| کاهش حرکت | با prefers-reduced-motion انیمیشن‌ها حذف می‌شوند |
| کنتراست بیشتر | با prefers-contrast: more حاشیه‌ها و متن‌های کم‌رنگ پررنگ‌تر می‌شوند |
| ناحیهٔ لمس | حداقل ۲۴×۲۴ پیکسل (معیار 2.5.8) |
| کنترل‌های بومی | چک‌باکس و سوییچ روی <input> واقعی ساخته شده‌اند |
مسئولیت شما
دیزاین‌سیستم نمی‌تواند همه‌چیز را تضمین کند. این موارد به نحوهٔ استفاده بستگی دارند:
- دکمه‌های فقط‌آیکون را با
aria-labelنام‌گذاری کنید. در حالت توسعه، اگر فراموش کنید هشدار می‌گیرید. - سطح عنوان‌ها را با ساختار صفحه هماهنگ کنید؛ برای مثال
CardTitleپیش‌فرضh3است و باasقابل‌تغییر است. - رنگ برند سفارشی را بررسی کنید. طیفی که
createTheme()می‌سازد خودکار بررسی نمی‌شود؛ کنتراست را با ابزاری مثل WebAIM Contrast Checker کنترل کنید. - پیام‌ها را واضح بنویسید. متن خطا باید بگوید چه اشتباهی رخ داده و چطور درستش کنند.
گزارش مشکل
اگر مشکلی در دسترس‌پذیری پیدا کردید، آن را با برچسب a11y در مخزن گزارش کنید. این گزارش‌ها اولویت بالایی دارند.