بسیاری از کاربران مختلف برای پیمایش برنامه‌ها به صفحه کلید متکی هستند - از کاربرانی که دارای اختلالات حرکتی موقت و دائمی هستند گرفته تا کاربرانی که از میانبرهای صفحه کلید برای کارایی و بهره‌وری بیشتر استفاده می‌کنند. داشتن یک استراتژی خوب برای پیمایش صفحه کلید برای برنامه شما، تجربه بهتری را برای همه ایجاد می‌کند.
فوکوس و ترتیب تب‌ها
در یک لحظه معین، فوکوس به عنصری در برنامه شما اشاره دارد که به طور فعال ورودی را از صفحه کلید، مانند یک فیلد، کادر انتخاب، دکمه یا لینک، دریافت می‌کند. علاوه بر رویدادهای صفحه کلید، عنصر فوکوس شده همچنین محتوایی را که از کلیپ بورد پیست شده است، دریافت می‌کند.
برای حرکت دادن فوکوس روی یک صفحه، از TAB برای حرکت به جلو و SHIFT + TAB برای حرکت به عقب استفاده کنید. عنصر فوکوس شده اغلب با یک حلقه فوکوس نشان داده می‌شود و مرورگرهای مختلف حلقه‌های فوکوس خود را به طور متفاوتی طراحی می‌کنند. ترتیب حرکت فوکوس به جلو و عقب در عناصر تعاملی ، ترتیب تب نامیده می‌شود.
عناصر تعاملی HTML مانند فیلدهای متنی، دکمه‌ها و لیست‌های انتخاب ، به طور ضمنی قابل فوکوس هستند: آنها به طور خودکار بر اساس موقعیتشان در DOM در ترتیب تب‌ها قرار می‌گیرند. این عناصر تعاملی همچنین دارای قابلیت مدیریت رویدادهای صفحه کلید داخلی هستند. عناصری مانند پاراگراف‌ها و divها به طور ضمنی قابل فوکوس نیستند زیرا کاربران معمولاً نیازی به تعامل با آنها ندارند.
پیاده‌سازی ترتیب منطقی تب‌ها بخش مهمی از ارائه یک تجربه ناوبری روان با کیبورد به کاربران است. هنگام ارزیابی و تنظیم ترتیب تب‌ها، باید دو نکته اصلی را در نظر داشته باشید:
- عناصر موجود در DOM را به ترتیب منطقی مرتب کنید
- تنظیم صحیح میزان نمایش محتوای خارج از صفحه که نباید فوکوس دریافت کند
عناصر موجود در DOM را به ترتیب منطقی مرتب کنید
برای بررسی منطقی بودن ترتیب تب‌های برنامه‌تان، صفحه را با تب مرور کنید. به‌طورکلی، فوکوس باید از ترتیب خواندن پیروی کند، یعنی از چپ به راست، از بالا به پایین صفحه.
اگر ترتیب فوکوس اشتباه به نظر می‌رسد، باید عناصر موجود در DOM را دوباره مرتب کنید تا ترتیب تب‌ها طبیعی‌تر شود. برای تغییر چیدمان بصری در سایت خود، به جای اینکه آن را با CSS طوری استایل‌بندی کنید که زودتر ظاهر شود، آن را در DOM به قبل‌تر منتقل کنید.
برای مثال:
<button style="float: right">Kiwi</button> <button>Peach</button> <button>Coconut</button>
<button>Peach</button> <button>Coconut</button> <button>Kiwi</button>
هنگام تغییر موقعیت بصری عناصر با استفاده از CSS مراقب باشید تا از ایجاد ترتیب تب غیرمنطقی جلوگیری شود. برای رفع ترتیب تب غیرمنطقی، دکمه شناور "Kiwi" را به بعد از Coconut منتقل کردیم و سبک درون‌خطی را حذف کردیم.
به درستی میزان نمایش محتوای خارج از صفحه را تنظیم کنید
گاهی اوقات عناصر تعاملی خارج از صفحه باید در DOM باشند، اما نباید در ترتیب تب شما باشند. برای مثال، اگر ناوبری واکنش‌گرا دارید که با کلیک روی دکمه در نوار کناری باز می‌شود، کاربر نباید بتواند در حین بسته بودن ناوبری روی آن تمرکز کند.
برای جلوگیری از دریافت فوکوس روی یک عنصر تعاملی خاص، باید یکی از ویژگی‌های CSS زیر را به آن عنصر بدهید:
-
display: none -
visibility: hidden
برای اضافه کردن مجدد عنصر به ترتیب تب‌ها، مثلاً وقتی که نوار ناوبری باز است، این ویژگی‌های CSS را به ترتیب با موارد زیر جایگزین کنید:
-
display: block -
visibility: visible
مراحل بعدی
برای کاربرانی که تقریباً به طور کامل با صفحه کلید یا دستگاه ورودی دیگری با کامپیوتر خود کار می‌کنند، ترتیب منطقی تب‌ها برای دسترسی‌پذیر و قابل استفاده کردن برنامه شما ضروری است. به عنوان یک عادت خوب برای بررسی ترتیب تب‌ها، قبل از هر انتشار، برنامه خود را با تب مرور کنید.