کنترل های تعاملی سفارشی باید قابل تمرکز باشند. به عنوان مثال، اگر از جاوا اسکریپت برای تبدیل یک <div> به یک کشویی فانتزی استفاده می کنید، آن منوی کشویی به طور خودکار در ترتیب صحیح برگه ها درج نمی شود.
باید به صورت دستی بررسی کنید که همه کنترل های سفارشی قابل فوکوس روی صفحه کلید هستند.
در صورت امکان، از عناصر HTML معنایی استفاده کنید که امکان تعامل را فراهم می کند.
چگونه تست کنیم
برای آزمایش اینکه کنترل سفارشی قابل فوکوس است، کلید TAB را فشار دهید تا در سایت پیمایش کنید:
آیا می توانید به تمام کنترل های تعاملی موجود در صفحه دسترسی پیدا کنید؟ اگر نه، ممکن است لازم باشد از tabindex برای بهبود تمرکز پذیری آن کنترل ها استفاده کنید. همچنین به کنترل فوکوس با tabindex مراجعه کنید.
چگونه رفع کنیم
برای اینکه کنترل سفارشی قابل تمرکز باشد، عنصر کنترل سفارشی را با استفاده از tabindex="0" در ترتیب برگه طبیعی قرار دهید. به عنوان مثال:
<div tabindex="0">Focus me with the TAB key</div>
چرا این مهم است
برای کاربرانی که نمی‌توانند یا ترجیح می‌دهند از ماوس استفاده نکنند، ناوبری صفحه‌کلید ابزار اصلی دسترسی به همه چیز روی صفحه است. تجربیات خوب صفحه کلید به ترتیب زبانه منطقی و سبک های فوکوس قابل تشخیص بستگی دارد. اگر کاربر صفحه کلید نتواند آنچه را که فوکوس شده است ببیند، راهی برای تعامل با صفحه ندارد.
اگر در تست دسترس‌پذیری تازه‌کار هستید، توصیه می‌کنیم درباره تست دسترس‌پذیری دستی و تست فناوری کمکی بیاموزید.