سفارش بصری در صفحه از دستور DOM پیروی می کند

ترتیب منطقی تب برای کاربران برای داشتن یک تجربه صفحه کلید صاف مهم است. صفحه خوان ها و سایر فناوری های کمکی صفحه را به ترتیب DOM هدایت می کنند. جریان اطلاعات باید منطقی باشد.

نحوه تست دستی

برای بررسی اینکه ترتیب برگه برنامه شما منطقی است یا خیر، سعی کنید صفحه خود را برگه بزنید. به طور کلی، تمرکز باید از ترتیب خواندن، از بالا به پایین صفحه شما باشد. در بیشتر زبان ها، ترتیب خواندن از چپ به راست حرکت می کند. در برخی، مانند عربی و عبری، ترتیب خواندن از راست به چپ حرکت می کند.

هنگام ارزیابی ترتیب برگه‌ها، دو ایده اصلی وجود دارد که باید در نظر داشته باشید:

  • آیا عناصر موجود در DOM به ترتیب منطقی مرتب شده اند؟
  • آیا محتوای خارج از صفحه به درستی از ناوبری پنهان شده است؟

به هر جهشی در ناوبری که به نظر ناخوشایند می رسد توجه کنید. همچنین به هرگونه پرش خارج از صفحه توجه کنید، جایی که Tabb کردن شما را به محتوایی می رساند که قرار نیست قابل مشاهده باشد.

در اصول دسترسی به صفحه کلید بیشتر بیاموزید.

چگونه رفع کنیم

اگر ترتیب فوکوس اشتباه به نظر می رسد، عناصر موجود در DOM را دوباره مرتب کنید تا ترتیب برگه ها طبیعی تر شود.

از استفاده از CSS برای تغییر مکان عناصر بصری خودداری کنید، زیرا کاربران فناوری کمکی ناوبری بی معنی را تجربه خواهند کرد. به جای استفاده از CSS، عنصر را به موقعیت قبلی در DOM منتقل کنید.

اگر محتوای خارج از صفحه همچنان برای کنترل‌های صفحه کلید قابل دسترسی است، آن را با استفاده از tabindex="-1" حذف کنید.

در Control focus with tabindex بیشتر بیاموزید.

منابع

کد منبع برای سفارش ویژوال در صفحه به دنبال ممیزی سفارش DOM است