پیاده‌سازی یک ترتیب منطقی برای تب‌ها بخشی مهم از ارائه تجربه‌ای روان برای کاربران در ناوبری با صفحه‌کلید است. صفحه‌خوان‌ها و دیگر فناوری‌های کمکی صفحه را به ترتیب DOM (مدل شیء سند) پیمایش می‌کنند. جریان اطلاعات باید منطقی باشد.
چگونه به صورت دستی تست کنیم
برای بررسی اینکه آیا ترتیب تب‌ها در برنامه شما منطقی است، سعی کنید با زدن تب از روی صفحه عبور کنید. به طور کلی، تمرکز باید به ترتیب خواندن باشد و از چپ به راست و از بالا به پایین صفحه حرکت کند.
دو نکته اصلی که هنگام ارزیابی ترتیب تب‌ها باید در نظر داشته باشید:
- آیا عناصر در DOM به ترتیبی منطقی چیده شده‌اند؟
- آیا محتوای خارج از صفحه به درستی از ناوبری پنهان شده است؟
به هرگونه جهش در ناوبری که غیرمنتظره به نظر می‌رسد، توجه کنید. همچنین به هرگونه جهش خارج از صفحه توجه کنید، جایی که زدن تب شما را به محتوایی می‌برد که نباید قابل مشاهده باشد.
چگونه اصلاح کنیم
اگر ترتیب تمرکز نادرست به نظر می‌رسد، باید عناصر را در DOM دوباره ترتیب دهید تا ترتیب تب‌ها طبیعی‌تر شود. اگر از CSS برای جابجایی بصری عناصر استفاده کرده‌اید، کاربران فناوری‌های کمکی با ناوبری غیرمنطقی مواجه خواهند شد. به جای استفاده از CSS، عنصر را به موقعیت قبلی‌تر در DOM منتقل کنید. اگر محتوای خارج از صفحه همچنان با کنترل‌های صفحه‌کلید در دسترس است، آن را با استفاده از tabindex="-1" حذف کنید.