کنترل‌های تعاملی روی صفحه‌کلید تمرکز می‌کنند

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

به‌صورت دستی بررسی کنید که همه کنترل‌های سفارشی روی صفحه‌کلید متمرکز باشند و نشانگر تمرکز را نمایش دهند. ترتیب تمرکز روی عناصر باید از ترتیب 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 استفاده کنید تا نشانگر تمرکز همیشه نشان داده شود. صرف‌نظر از اینکه از موشواره یا صفحه‌کلید برای رفتن به آن با کلید جهش استفاده می‌کنید، نشانگر تمرکز دکمه همیشه یکسان به‌نظر می‌رسد (همچنین تمرکز سبک را ببینید).

چرا این موضوع مهم است

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

درباره دسترس‌پذیری در آشنایی با دسترس‌پذیری بیشتر بدانید.

منابع