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

به صورت دستی بررسی کنید که همه کنترل های سفارشی قابل فوکوس روی صفحه کلید باشند و نشانگر فوکوس را نمایش دهند. ترتیب تمرکز عناصر باید دنبال کردن نظم DOM باشد. اگر مطمئن نیستید که کدام عناصر باید فوکوس دریافت کنند، ماژول فوکوس را در دوره آموزش قابلیت دسترسی در web.dev ببینید.

نحوه تست دستی

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

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

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

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

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

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

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

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

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

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

در نحوه انجام بررسی قابلیت دسترسی بیشتر بیاموزید.

منابع