کنترل فوکوس با tabindex

راب دادسون

عناصر استاندارد HTML مانند <button> یا <input> دارای قابلیت دسترسی به صفحه کلید به صورت رایگان هستند. با این حال، اگر اجزای تعاملی سفارشی می‌سازید، از ویژگی tabindex استفاده کنید تا اطمینان حاصل کنید که آنها با صفحه کلید قابل دسترسی هستند.

بررسی کنید که آیا کنترل‌هایتان با صفحه‌کلید قابل دسترسی هستند یا خیر

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

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

یک عنصر را به ترتیب برگه وارد کنید

با استفاده از tabindex="0" یک عنصر را به ترتیب برگه طبیعی وارد کنید. مثلا:

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

برای فوکوس کردن یک عنصر، کلید Tab را فشار دهید یا متد focus() عنصر را فراخوانی کنید.

یک عنصر را از ترتیب برگه حذف کنید

یک عنصر را با استفاده از tabindex="-1" حذف کنید. مثلا:

<button tabindex="-1">Can't reach me with the TAB key!</button>

این یک عنصر را از ترتیب برگه طبیعی حذف می کند، اما همچنان می توان با فراخوانی متد focus() آن عنصر را فوکوس کرد.

توجه داشته باشید که اعمال tabindex="-1" به یک عنصر بر فرزندان آن تأثیر نمی گذارد. اگر آنها به طور طبیعی یا به دلیل یک مقدار tabindex در ترتیب برگه باشند، در ترتیب برگه ها باقی می مانند. برای حذف یک عنصر و همه فرزندان آن از ترتیب برگه، استفاده از پلی پر inert WICG را در نظر بگیرید. polyfill رفتار یک ویژگی inert پیشنهادی را تقلید می کند، که از انتخاب یا خواندن عناصر توسط فناوری های کمکی جلوگیری می کند.

از tabindex > 0 اجتناب کنید

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

استفاده از tabindex بزرگتر از 0 یک ضد الگو در نظر گرفته می شود زیرا صفحه خوان ها صفحه را به ترتیب DOM هدایت می کنند نه به ترتیب برگه ها. اگر به عنصری نیاز دارید که زودتر به ترتیب برگه بیاید، باید به نقطه قبلی در DOM منتقل شود.

Lighthouse شناسایی عناصر با tabindex > 0 را آسان می کند. حسابرسی دسترسی را اجرا کنید (Lighthouse > Options > Accessibility) و به دنبال نتایج ممیزی "هیچ عنصری دارای مقدار [tabindex] بزرگتر از 0 نیست" باشید.

ایجاد مؤلفه‌های قابل دسترسی با «روینگ tabindex »

اگر در حال ساختن یک جزء پیچیده هستید، ممکن است نیاز داشته باشید که پشتیبانی اضافی از صفحه کلید را فراتر از تمرکز اضافه کنید. عنصر select داخلی را در نظر بگیرید. قابل فوکوس است و می توانید از کلیدهای جهت دار برای نمایش عملکردهای اضافی (گزینه های قابل انتخاب) استفاده کنید.

برای پیاده سازی عملکردهای مشابه در اجزای خود، از تکنیکی استفاده کنید که به عنوان "روینگ tabindex " شناخته می شود. Roving tabindex با تنظیم tabindex روی -1 برای همه کودکان به جز نمونه فعال فعلی کار می کند. سپس مؤلفه از شنونده رویداد صفحه کلید برای تعیین اینکه کاربر کدام کلید را فشار داده است استفاده می کند.

هنگامی که این اتفاق می‌افتد، مؤلفه tabindex کودکی که قبلاً متمرکز شده بود را روی -1 تنظیم می‌کند، tabindex کودک برای تمرکز را روی 0 تنظیم می‌کند و متد focus() روی آن فراخوانی می‌کند.

قبل از

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

بعد از

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

TODO: DevSite - ارزیابی فکر کنید و بررسی کنید

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

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