چکلیست دسترسپذیری WCAG برای محصولات واقعی
از کیبورد و فوکوس تا کنتراست، فرمها و ARIA؛ آنچه تیم محصول باید قبل از لانچ قفل کند—نه بعد از شکایت.
علی مرتضوی
بنیانگذار پارادایس کد
دسترسپذیری کیفیت محصول است نه لایهٔ بعدی
اگر کیبورد کار نکند، بخشی از کاربران—و خیلی از کاربران حرفهای—مسدودند. WCAG را بهعنوان حداقل حقوقی/اخلاقی و همچنین سیگنال کیفیت مهندسی ببینید. اصلاح دیرهنگام گرانتر از طراحی درست از روز اول است.
هدف عملی برای اکثر محصولات: انطباق معنادار با AA روی مسیرهای اصلی، با آزمون دستی و خودکار مکمل هم.
کیبورد، فوکوس و ترتیب
همهٔ تعاملات اصلی باید بدون موس کامل شوند. فوکوس دیده شود، در مودال trap منطقی داشته باشد، و بعد از بستن به نقطهٔ معقول برگردد. `outline: none` بدون جایگزین جرم طراحی است.
ترتیب tab با ترتیب بصری همخوان باشد. ویجتهای سفارشی را روی نقشهای درست بنا کنید یا از کتابخانهٔ دسترسپذیر مثل الگوهای HeroUI/React Aria استفاده کنید.
معنا در HTML قبل از ARIA
دکمه همان `<button>` است، لینک همان `<a href>`. ARIA وقتی لازم است که HTML بومی کافی نباشد—و آن وقت باید کامل و درست باشد. `aria-label` اشتباه بدتر از نبود آن است چون به تکنولوژی کمکی دروغ میگوید.
سرفصلها سلسلهمراتب واقعی بسازند. landmarkها (header/nav/main) پیمایش صفحهخوان را ممکن میکنند.
فرمها، خطاها و وضعیتها
هر ورودی label واضح داشته باشد—placeholder بهجای label کافی نیست. خطاها متنی، مرتبط با فیلد، و قابل فوکوس باشند. پیام موفقیت/شکست را با `aria-live` مناسب اعلام کنید.
برای فرمهای چندمرحلهای، مرحلهٔ جاری و پیشرفت را برای همه اعلام کنید نه فقط با رنگ.
کنتراست، حرکت و رسانه
متن و کنترلها کنتراست کافی داشته باشند؛ حالت disabled را با معنای اضافی همراه کنید. برای انیمیشن، `prefers-reduced-motion` را رعایت کنید. تصویر معنادار alt داشته باشد؛ تصویر تزئینی alt خالی.
ویدئوهای ضروری به زیرنویس نیاز دارند. اتوپلی با صدا را فراموش کنید.
آزمون در تعریف Done
ابزار خودکار (axe و مشابه) را در CI بگذارید اما به آنها تکیه مطلق نکنید—فقط بخشی از مسائل را میگیرند. چک دستی کیبورد و یک عبور صفحهخوان روی مسیرهای پول اجباری شود.
هر کامپوننت دیزاینسیستم باید داستان a11y داشته باشد. اگر primitive درست باشد، فیچرها کمتر خراب میکنند.
سؤالات متداول
AA کافی است یا AAA؟
برای اکثر محصولات وب، AA هدف واقعبینانه است. AAA را روی بخشهای خاص در صورت نیاز دنبال کنید.
آیا رنگ alone برای خطا مجاز است؟
خیر. رنگ را با متن/آیکون/الگو همراه کنید تا کاربران کوررنگی جا نمانند.
مودال سفارشی بسازیم یا آماده؟
اگر تجربه عمیق a11y ندارید، از الگوی آمادهٔ دسترسپذیر استفاده کنید. مودال از سختترین ویجتهاست.
چطور اولویت بدهیم؟
مسیرهای ثبتنام، ورود، پرداخت و محتوای اصلی اول؛ بعد صفحات کمترافیک.
دانش و مقالات
نیاز به اجرای همین مفاهیم در محصولتان دارید؟
پارادایس کد از مشاوره تا پیادهسازی کامل کنار شماست.