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