تست دسترس‌پذیری صفحه‌کلید: پروتکل دستی بر پایهٔ WCAG 2.2
3 min read
با Tab و Enter می‌شود بخش بزرگی از مشکلات دسترس‌پذیری را دید. پروتکل کوتاه دستی بر پایهٔ معیارهای 2.1.1، 2.1.2، 2.4.3، 2.4.7 و 4.1.2.
تست صفحه‌کلید ارزان‌ترین بررسی دسترس‌پذیری است: فقط یک صفحه و کلید Tab. این مقاله یک پروتکل کوتاه دستی را بر پایهٔ پنج معیار WCAG 2.2 می‌دهد. ابزارهای خودکار را جایگزین این بررسی نمی‌دانیم و درصدی برای «کشف مشکل توسط ابزار» ادعا نمی‌کنیم.
همه‌چیز با صفحه‌کلید قابل‌انجام است؟
معیار 2.1.1 می‌گوید همهٔ قابلیت‌های محتوا باید با صفحه‌کلید قابل‌انجام باشد و کلیدها نیازی به زمان‌بندی خاص نداشته باشند، مگر کارهایی که ذاتاً به مسیر حرکت وابسته‌اند (مثل ترسیم آزاد). تست: ماوس را کنار بگذارید و با Tab، Shift+Tab، Enter، Space و کلیدهای جهت‌دار منو، فرم، دیالوگ و کشوی صفحه را کامل کنید.
گیر افتادن فوکوس
طبق 2.1.2 اگر فوکوس به مؤلفه‌ای رسید، باید بتوان با صفحه‌کلید از آن خارج شد؛ اگر خروج به کلیدی غیر از Tab یا فلش‌ها نیاز دارد، باید به کاربر گفته شود. مودال‌ها و ویجت‌های سفارشی نخستین مظنون‌اند: Esc کار می‌کند؟ فوکوس به نقطهٔ درست برمی‌گردد؟ (جزئیات پیاده‌سازی مودال خارج از دامنهٔ این مقاله است.)
ترتیب فوکوس
معیار 2.4.3 می‌خواهد وقتی ترتیب پیمایش بر معنا یا عملکرد اثر دارد، فوکوس به ترتیبی حرکت کند که معنا حفظ شود. تست: با Tab صفحه را بخوانید؛ آیا ترتیب با ترتیب منطقی خواندن و انجام کار می‌خواند؟ در صفحات راست‌به‌چپ هم ترتیب باید برای خواننده منطقی باشد. (این جمله توصیهٔ نویسنده است.)
فوکوس دیده می‌شود؟
معیار 2.4.7 (سطح AA) می‌گوید باید حالتی وجود داشته باشد که نشانگر فوکوس دیده شود و نشانگر نباید زمان‌دار باشد؛ اگر نشانگر یک بار نشان داده شد، باید بماند. WCAG 2.2 معیار 2.4.13 (سطح AAA) را هم برای ظاهر نشانگر (اندازه و شکل) آورده است. اگر در CSS حاشیهٔ پیش‌فرض را حذف کرده‌اید، جایگزینی مشخص بگذارید.
نام و نقش کنترل
معیار 4.1.2 می‌گوید نام و نقش مؤلفه‌ها باید به‌صورت برنامه‌ای قابل‌تشخیص باشد. W3C یادآوری می‌کند کنترل‌های استاندارد HTML، اگر طبق مشخصات استفاده شوند، این معیار را برآورده می‌کنند؛ مشکل بیشتر در مؤلفه‌های سفارشی است. تست دستی: با یک screen reader (مثلاً NVDA یا VoiceOver) روی دکمه‌ها و فیلدها بروید و ببینید نام و نقششان شنیده می‌شود. (نام ابزارها نمونه است؛ ما مستندات‌شان را بررسی نکردیم.)
پروتکل ده‌دقیقه‌ای
- ماوس را کنار بگذارید و بالای صفحه را با Tab شروع کنید.
- ترتیب را با منطق صفحه مقایسه کنید.
- در هر توقف بپرسید: فوکوس دیده می‌شود؟
- منو، فرم، مودال و کشو را کامل کنید و خروج را تست کنید.
- هر مشکل را با صفحه، گام و معیار مرتبط ثبت کنید.
برای مبانی بیشتر Accessibility چیست؟ و برای دید کلی UX چیست؟ را ببینید.
منابع و مراجع
- Understanding SC 2.1.1: Keyboard — W3C WAI، WCAG 2.2.
- Understanding SC 2.1.2: No Keyboard Trap — W3C WAI، WCAG 2.2.
- Understanding SC 2.4.3: Focus Order — W3C WAI، WCAG 2.2.
- Understanding SC 2.4.7: Focus Visible — W3C WAI، WCAG 2.2.
- Understanding SC 4.1.2: Name, Role, Value — W3C WAI، WCAG 2.2.
Author
SE
Soheil Ebrahimpour is the founder of FutureForge. He works on product design, architecture, and getting custom software into production.
Related notes
If you are unsure about architecture or the build path, we can talk about the project.
Describe the problem and the constraints. If there is a fit, we will schedule a conversation.
