دسترس‌پذیری بخشی از بنیان است، نه یک مرحلهٔ آخر. هر کامپوننت TDS باید با صفحهکلید کار کند، برای صفحه‌خوان نام و وضعیت داشته باشد، کنتراست WCAG 2.2 AA را داشته باشد و به کاهش حرکت احترام بگذارد.
این سوییچ‌ها کل سایت را تغییر می‌دهند؛ همان کاری که کاربر در سیستم‌عامل یا تنظیمات داک می‌کند.
کاهش حرکت: کپی کد · کنتراست بالا: کپی کد
رنگ خودتان را امتحان کنید. این ابزار همان تابع contrastRatio پکیج accessibility را اجرا می‌کند؛ مقادیر پیش‌فرض فقط برای نمایش‌اند.
نسبت کنتراست: کپی کد
مقدار hex، rgb یا oklch وارد کنید. مقادیر اولیه رنگ واقعی این جعبه‌اند.
در TDS رنگ‌ها فقط از توکن‌های معنایی می‌آیند و کپی کد کنتراست همهٔ تم‌ها را در روشن، تیره و کنتراست بالا بررسی می‌کند.
هر وضعیت باید با آیکون و برچسب متنی هم قابل تشخیص باشد.
تغییرات مهم بدون جابه‌جایی فوکوس به صفحه‌خوان اعلام می‌شوند. خطا فوری (assertive) و بقیه مؤدبانه (polite) است.
آخرین اعلان برای صفحه‌خوان: کپی کد
کپی کد · کپی کد برای ناحیه‌های همیشه‌حاضر.
کیبورد باید به همهٔ کارها برسد و فوکوس همیشه دیده شود.
انیمیشن‌ها باید با تنظیم کاهش حرکت متوقف یا به محو تبدیل شوند.
ساختار صفحه باید برای ابزارهای خواندن بلند معنادار باشد. عناصر تزئینی حذف شوند.
بخش اصلی در کپی کد باشد، سرتیتر‌ها بدون جهش (h1 → h2 → h3) بیایند، تصاویر کپی کد داشته باشند و متن داخل تصویر تکرار شود.
کپی کد عنصر را از صفحه‌خوان پنهان می‌کند؛ کپی کد در زمان توسعه مشکلات را گزارش می‌دهد.
هدف لمسی و خوانایی هنگام زوم.
اعلان برای صفحه‌خوان هنگام ذخیره‌شدن یک فرم:
import { announce } from '@tokapps/accessibility';await save(draft);announce('پیش‌نویس ذخیره شد.', 'polite');نام کامپوننت‌ها و ویژگی‌ها در مستندات هر کامپوننت با کپی کد هم‌راستاست.