فوکوس با کیبورد روی کنترل‌های تعاملی

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

نحوه تست دستی

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

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

نحوه رفع مشکل

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

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

<div tabindex="0">با کلید TAB بر روی من تمرکز کنید</div>

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

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

اهمیت فوکوس با صفحه کلید چیست؟

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