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

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

نحوه تست دستی

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

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

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

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

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

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

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

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

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

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

منابع

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