بسیاری از کاربران مختلف برای پیمایش در برنامه‌ها از صفحه‌کلید استفاده می‌کنند، از کاربرانی با اختلالات موتوری موقتی و دائمی تا کاربرانی که از میانبرهای صفحه‌کلید برای افزایش بهره‌وری و کارایی استفاده می‌کنند. یک ترتیب منطقی تب (Tab) بخش مهمی از ارائه یک تجربه روان در پیمایش با صفحه‌کلید است.
نحوه تست دستی
برای بررسی اینکه ترتیب تب برنامه شما منطقی است یا خیر، سعی کنید با استفاده از کلید Tab از صفحه‌تان عبور کنید. ترتیبی که عناصر در آن متمرکز می‌شوند باید سعی کند از ترتیب DOM پیروی کند. به‌طور کلی، تمرکز باید از چپ به راست و از بالا به پایین صفحه‌تان، از ترتیب خواندن پیروی کند.
آیا می‌توانید به تمام کنترل‌های تعاملی روی صفحه دسترسی داشته باشید؟ اگر نه، ممکن است نیاز داشته باشید از tabindex برای بهبود قابلیت تمرکز این کنترل‌ها استفاده کنید. قانون کلی این است که هر کنترلی که یک کاربر بتواند با آن تعامل یا ورودی را ارائه دهد باید قابل تمرکز باشد و یک نشانگر تمرکز را نمایش دهد. اگر یک کاربر صفحه‌کلید نتواند ببیند چه چیزی متمرکز است، هیچ راهی برای تعامل با صفحه ندارد.
نحوه رفع مشکل
اگر ترتیب تمرکز اشتباه به نظر می‌رسد، باید عناصر را در DOM مرتب کنید تا ترتیب تب طبیعی‌تر شود.
اگر نمی‌توانید به تمام کنترل‌های تعاملی روی صفحه دسترسی داشته باشید، اولین راه حل جایگزینی کنترل‌های سفارشی با جایگزین‌های استاندارد HTML است. به‌عنوان مثال، یک <div> را که مانند یک دکمه عمل می‌کند با <button> جایگزین کنید. استفاده از عناصر داخلی HTML می‌تواند به‌طور قابل توجهی دسترسی سایت شما را بهبود بخشد و حجم کار شما را کاهش دهد.
اگر در حال ساخت اجزای تعاملی سفارشی بدون معادل استاندارد HTML هستید، از ویژگی tabindex برای اطمینان از قابل دسترسی بودن آن‌ها با صفحه‌کلید استفاده کنید. به‌عنوان مثال:
<div tabindex="0">با کلید TAB روی من تمرکز کنید</div>