با استفاده از tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

ترتیب برگه های پیش فرض ارائه شده توسط موقعیت DOM عناصر معنایی HTML راحت است، اما ممکن است مواقعی لازم باشد ترتیب برگه ها را تغییر دهید. جابجایی عناصر در HTML ایده آل است، اما ممکن است امکان پذیر نباشد. در این موارد، می‌توانید از ویژگی HTML tabindex برای تنظیم صریح موقعیت تب یک عنصر استفاده کنید.

tabindex می توان برای هر عنصری اعمال کرد، اگرچه لزوماً برای هر عنصر مفید نیست و طیفی از مقادیر صحیح را می گیرد. با tabindex ، می توانید یک ترتیب صریح برای عناصر صفحه قابل تمرکز تعیین کنید، یک عنصر غیرقابل تمرکز را در ترتیب برگه وارد کنید و عناصر را از ترتیب برگه ها حذف کنید. به عنوان مثال:

tabindex="0" : یک عنصر را به ترتیب برگه طبیعی وارد می کند. عنصر را می توان با فشار دادن Tab فوکوس کرد و عنصر را می توان با فراخوانی متد focus() آن فوکوس کرد.

tabindex="-1" : یک عنصر را از ترتیب برگه طبیعی حذف می کند، اما همچنان می توان با فراخوانی متد focus() آن عنصر را فوکوس کرد.

tabindex="5" : هر tabindex بزرگتر از 0 آن عنصر را به جلوی ترتیب برگه طبیعی می آورد. اگر چندین عنصر با شاخص تب بزرگتر از 0 وجود داشته باشد، ترتیب برگه ها از کمترین مقداری که بزرگتر از صفر است شروع می شود و به سمت بالا حرکت می کند.

این به ویژه برای عناصر غیر ورودی مانند سرصفحه ها، تصاویر یا عنوان مقاله صادق است. در صورت امکان، بهتر است کد منبع خود را طوری مرتب کنید که دنباله DOM یک ترتیب برگه منطقی را ارائه دهد. اگر از tabindex استفاده می‌کنید، آن را به کنترل‌های تعاملی سفارشی مانند دکمه‌ها، برگه‌ها، کرکره‌ها و فیلدهای متنی محدود کنید. یعنی عناصری که کاربر ممکن است انتظار داشته باشد که ورودی به آنها ارائه دهد.

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

مدیریت تمرکز در سطح صفحه

گاهی اوقات، tabindex برای یک تجربه کاربری یکپارچه ضروری است. برای مثال، اگر یک صفحه منفرد قوی با بخش‌های محتوای مختلف بسازید، که در آن همه محتوا به طور همزمان قابل مشاهده نیست. این می تواند به این معنی باشد که پیوندهای ناوبری محتوای قابل مشاهده را بدون بازخوانی صفحه تغییر می دهند.

در این حالت، ناحیه محتوای انتخابی را شناسایی کنید و به آن tabindex -1 بدهید و روش focus آن را فراخوانی کنید. این تضمین می کند که محتوا به ترتیب برگه های طبیعی ظاهر نمی شود. این تکنیک که مدیریت تمرکز نامیده می شود، زمینه درک شده کاربر را با محتوای بصری سایت هماهنگ نگه می دارد.

مدیریت تمرکز در کامپوننت ها

در برخی موارد، باید تمرکز را در سطح کنترل نیز مدیریت کنید، مانند اجزای سفارشی.

به عنوان مثال، عنصر select می‌تواند فوکوس اولیه را دریافت کند، اما زمانی که به آنجا رسید، می‌توانید از کلیدهای جهت‌نما برای نمایش گزینه‌های انتخابی اضافی استفاده کنید. اگر یک عنصر select سفارشی می‌سازید، تکرار آن رفتار بسیار مهم است، بنابراین کاربران صفحه‌کلید همچنان می‌توانند با کنترل شما تعامل داشته باشند.

دانستن اینکه کدام رفتارهای صفحه کلید برای پیاده سازی می تواند دشوار باشد. راهنمای شیوه‌های تألیف برنامه‌های کاربردی اینترنت غنی در دسترس (ARIA) انواع مؤلفه‌ها و انواع عملکردهای صفحه‌کلید را فهرست می‌کند.

شاید شما در حال کار بر روی عناصر سفارشی هستید که شبیه به مجموعه ای از دکمه های رادیویی هستند، اما با ظاهر و رفتار منحصر به فرد شما.

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

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

یکی از رفتارهای رایج صفحه کلید که باید پشتیبانی شود، کلیدهای جهت دار بالا/پایین/چپ/راست است. برای افزودن این رفتار به مؤلفه جدید، از تکنیکی به نام Roving tabindex استفاده می کنیم.

Roving tabindex با تنظیم tabindex روی -1 برای همه کودکان به جز نمونه فعال فعلی کار می کند.

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

این مؤلفه از شنونده رویداد صفحه کلید برای تعیین اینکه کاربر کدام کلید را فشار می دهد استفاده می کند. هنگامی که این اتفاق می افتد، tabindex کودکی که قبلاً متمرکز شده بود را روی -1 تنظیم می کند، tabindex کودک مورد توجه را روی 0 تنظیم می کند و روش تمرکز را روی آن فراخوانی می کند.

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

وقتی کاربر به آخرین (یا اولین، بسته به جهتی که فوکوس را حرکت می‌دهد) می‌رسد، فوکوس به اولین (یا آخرین) فرزند بازمی‌گردد.

مثال زیر را امتحان کنید. عنصر موجود در DevTools را بررسی کنید تا نمایه برگه را از یک رادیو به رادیو دیگر مشاهده کنید.

مدال ها و تله های صفحه کلید

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

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

استثناء این قاعده مدال است. با این حال، هنوز باید هنگام ایجاد یک مدال از استفاده از tabindex خودداری کنید. با inert ، می توانید اطمینان حاصل کنید که کاربران نمی توانند به طور تصادفی با یک عنصر (یک تله صفحه کلید عمدی) تعامل داشته باشند. از عنصر <dialog> که به طور پیش‌فرض بی‌اثر است، برای ایجاد یک مدال برای کاربران و در عین حال مسدود کردن کلیک‌ها و برگه‌های خارج از مدال استفاده کنید. این به کاربر اجازه می دهد تا روی انتخاب مورد نیاز تمرکز کند.