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