کنترل های تعاملی قابل فوکوس روی صفحه کلید هستند

منتشر شده: ۲ مه ۲۰۱۹

به صورت دستی بررسی کنید که آیا همه کنترل‌های سفارشی قابلیت فوکوس با کیبورد را دارند و نشانگر فوکوس را نمایش می‌دهند یا خیر. ترتیب فوکوس شدن عناصر باید از ترتیب DOM پیروی کند. اگر مطمئن نیستید که کدام عناصر باید فوکوس دریافت کنند، به ماژول فوکوس در دوره آموزشی «یادگیری دسترسی‌پذیری» در web.dev مراجعه کنید.

نحوه تست دستی

برای آزمایش اینکه کنترل سفارشی قابل فوکوس است و نشانگر فوکوس را نمایش می‌دهد، با حرکت Tab در سایت خود شروع کنید. از TAB (یا SHIFT + TAB ) برای حرکت بین کنترل‌ها استفاده کنید و از کلیدهای جهت‌نما و ENTER و SPACE برای دستکاری مقادیر آنها استفاده کنید (همچنین به اصول دسترسی به صفحه کلید مراجعه کنید):

آیا می‌توانید به همه کنترل‌های تعاملی موجود در صفحه دسترسی داشته باشید؟ آیا روی هر کنترل تعاملی، نشانگر تمرکز وجود دارد؟

چگونه رفع کنیم

اگر نمی‌توانید با استفاده از Tab در تمام عناصر یک صفحه حرکت کنید، ممکن است لازم باشد tabindex برای بهبود قابلیت فوکوس آن کنترل‌ها استفاده کنید.

برای اینکه یک کنترل سفارشی قابلیت فوکوس داشته باشد، عنصر کنترل سفارشی را با استفاده از tabindex="0" در ترتیب طبیعی تب‌ها قرار دهید (همچنین به کنترل فوکوس با tabindex مراجعه کنید). برای مثال:

<div tabindex="0">Focus me with the TAB key</div>

همچنین ممکن است لازم باشد نقش‌های ARIA مناسب را به عناصر کنترل سفارشی اضافه کنید. به بخش «کنترل‌های سفارشی نقش‌های ARIA دارند» مراجعه کنید.

اگر نشانگر فوکوس را نمی‌بینید، استفاده از :focus برای نمایش همیشگی نشانگر فوکوس در نظر بگیرید. صرف نظر از اینکه از ماوس یا صفحه کلید برای رفتن به آن استفاده می‌کنید، نشانگر فوکوس دکمه همیشه یکسان به نظر می‌رسد (همچنین به Style focus مراجعه کنید).

چرا این مهم است؟

برای کاربرانی که نمی‌توانند یا نمی‌خواهند از ماوس استفاده کنند، ناوبری صفحه کلید وسیله اصلی دسترسی به همه چیز روی صفحه است. تجربه خوب صفحه کلید به ترتیب منطقی تب‌ها و سبک‌های فوکوس قابل تشخیص بستگی دارد. اگر یک کاربر صفحه کلید نتواند آنچه را که در فوکوس است ببیند یا یاد بگیرد، هیچ راهی برای تعامل با صفحه نخواهد داشت.

برای کسب اطلاعات بیشتر در مورد دسترسی‌پذیری، به بخش «یادگیری دسترسی‌پذیری» مراجعه کنید.

منابع