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

راب دادسون
الکساندرا کلپر

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

پشتیبانی مرورگر

  • کروم: 1.
  • لبه: 12.
  • فایرفاکس: 1.5.
  • سافاری: 3.1.

منبع

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

tabindex چیست؟

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

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

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

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

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

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

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

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

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

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

در این حالت، ناحیه محتوای انتخابی را شناسایی کنید و به آن tabindex -1 بدهید و روش 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 را در نظر بگیرید. 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>

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

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