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

Rob Dodson

Alexandra Klepper

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

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

تب ایندکس چیست؟

در مواقعی که نیاز به تغییر ترتیب پیش‌فرض تب‌ها که توسط عناصر داخلی ارائه می‌شود، دارید، می‌توانید از ویژگی tabindex در HTML برای تنظیم صریح موقعیت تب یک عنصر استفاده کنید.

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

tabindex="0" : یک عنصر را در ترتیب تب طبیعی قرار می‌دهد. با فشار دادن Tab می‌توان روی عنصر فوکوس کرد و با فراخوانی متد focus() می‌توان روی عنصر فوکوس کرد.

tabindex="-1" : یک عنصر را از ترتیب تب طبیعی حذف می‌کند، اما عنصر همچنان می‌تواند با فراخوانی متد focus() فوکوس شود.

tabindex="5" : ​​هر tabindex بزرگتر از 0 ، آن عنصر را به جلوی ترتیب طبیعی تب‌ها می‌آورد. اگر چندین عنصر با tabindex بزرگتر از 0 وجود داشته باشد، ترتیب تب‌ها از کمترین مقداری که بزرگتر از صفر است شروع می‌شود و به سمت بالا ادامه می‌یابد. استفاده از tabindex بزرگتر از 0 یک ضد الگو محسوب می‌شود.

اطمینان حاصل کنید که کنترل‌ها از طریق صفحه کلید قابل دسترسی هستند

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

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

مدیریت تمرکز در سطح صفحه

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

در این حالت، ناحیه محتوای انتخاب شده را شناسایی کرده و به آن tabindex برابر با -1 بدهید و متد focus آن را فراخوانی کنید. این کار تضمین می‌کند که محتوا به ترتیب طبیعی تب‌ها نمایش داده نشود. این تکنیک که مدیریت focus نامیده می‌شود، زمینه درک شده توسط کاربر را با محتوای بصری سایت هماهنگ نگه می‌دارد.

مدیریت تمرکز در کامپوننت‌ها

در برخی موارد، شما باید تمرکز را در سطح کنترل نیز مدیریت کنید، مانند عناصر سفارشی .

دانستن اینکه کدام رفتارهای صفحه کلید را باید پیاده‌سازی کرد می‌تواند دشوار باشد. راهنمای شیوه‌های نویسندگی برنامه‌های غنی اینترنتی قابل دسترس (ARIA) انواع اجزا و انواع عملکردهای صفحه کلید را که پشتیبانی می‌کنند، فهرست می‌کند.

یک عنصر را در ترتیب تب‌ها قرار دهید

با استفاده از 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 را در نظر بگیرید. چندپرکننده رفتار یک ویژگی inert پیشنهادی را شبیه‌سازی می‌کند که از انتخاب یا خواندن عناصر توسط فناوری‌های کمکی جلوگیری می‌کند.

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

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

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

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

از " tabindex متحرک" استفاده کنید

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

برای پیاده‌سازی توابع مشابه در کامپوننت‌های خودتان، می‌توانید از تکنیکی به نام "roving 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>

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

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