عناصر تعاملی، شامل کنترلهای فرم ، لینکها و دکمهها، به طور پیشفرض قابل فوکوس و قابل تببندی هستند. عناصر قابل تببندی بخشی از ترتیب پیمایش فوکوس متوالی سند هستند. سایر عناصر بیاثر هستند، به این معنی که تعاملی نیستند. با استفاده از ویژگیهای HTML، میتوان عناصر تعاملی را بیاثر و عناصر بیاثر را تعاملی کرد.
به طور پیشفرض، ترتیب فوکوس ناوبری همان ترتیب بصری است که همان ترتیب کد منبع است. ویژگیهای HTML وجود دارند که میتوانند این ترتیب و ویژگیهای CSS را تغییر دهند که میتوانند ترتیب بصری محتوا را تغییر دهند. تغییر ترتیب تببندی با HTML یا ترتیب رندر بصری با CSS میتواند به تجربه کاربری آسیب برساند.
ترتیب تببندی درکشده و واقعی را با CSS و HTML تغییر ندهید. همانطور که دو مثال زیر نشان میدهند، ترتیب تبهایی که با ترتیب مورد انتظار بصری متفاوت باشند، برای کاربران گیجکننده هستند و برای تجربه کاربری بد میباشند.
در مثال زیر، مقدار ویژگی tabindex ترتیب تبها را نامنظم کرده است:
در این مثال، CSS بین ترتیب تببندی و ترتیب بصری محتوا تفاوت ایجاد کرده است:
دستور flex-flow: row-reverse; ترتیب نمایش را معکوس کرده است. علاوه بر این، ویژگی order در CSS برای کلمه ششم، "This"، اعمال شده است که به صورت بصری آن یک کلمه را جابجا میکند. توالی tabbing، ترتیب کد است که دیگر با ترتیب نمایش مطابقت ندارد. این امر باعث ایجاد عدم اتصال برای کاربران کیبورد میشود.
برخی از ویژگیهای CSS، از جمله flexbox ، grid ، positioning ، transforms و multi-column ، میتوانند ترتیب بصری محتوا را تغییر دهند. محتوای خود را با حرکت در میان آن با صفحه کلید آزمایش کنید: با shift + tab میتوانید به عقب در محتوا حرکت کنید. از CSS برای نشان دادن عنصری که فوکوس دارد استفاده کنید. عناصر قابل فوکوس را با CSS تغییر ترتیب ندهید.
مهم است که ترتیب منطقی تببندی را در تمام اندازههای نمایشگر حفظ کنید.
ویژگیهای contenteditable و tabindex ، که ویژگیهای سراسری هستند، میتوانند به هر عنصری اضافه شوند و در این فرآیند، قابلیت فوکوس (focusable) را به آنها بدهند. عناصر قابل فوکوس را میتوان با ماوس یا اشارهگر، با تنظیم ویژگی autofocus )، یا با اسکریپت، مانند element.focus() نیز فوکوس کرد.
tabindex ویژگی سراسری tabindex که در attributes معرفی شده است، به عناصری که در حالت عادی قادر به دریافت focus نیستند، این امکان را میدهد که focus بگیرند، که معمولاً با Tab انجام میشود، از این رو این نام را دارد.
ویژگی tabindex مقدار خود را یک عدد صحیح میگیرد. مقدار منفی، عنصر را قابل فوکوس میکند اما قابلیت تببندی را از آن میگیرد. مقدار tabindex برابر با 0 عنصر را قابل فوکوس و قابل تببندی میکند و عنصری را که روی آن اعمال شده است، به ترتیب ناوبری فوکوس متوالی در کد منبع اضافه میکند. مقدار 1 یا بیشتر، عنصر را قابل فوکوس و قابل تببندی میکند، اما آن را به یک توالی تببندی اولویتبندی شده اضافه میکند و باید از آن اجتناب شود.
در این صفحه، دکمه اشتراکگذاری، <share-action> ، یک عنصر سفارشی است. tabindex="0" این عنصر را به ترتیب تببندی پیشفرض صفحهکلید اضافه میکند:
<share-action authors="@front-end.social/@estellevw" data-action="click"
data-category="web.dev" data-icon="share" data-label="share, mastodon"
role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
علاوه بر این، ناوبری محلی یک عنصر سفارشی با مقدار tabindex منفی دارد:
<web-navigation-drawer type="standard" tabindex="-1">
یک ویژگی tabindex با مقدار منفی، عنصر را قابل فوکوس میکند، اما قابلیت تببندی ندارد. عنصر میتواند فوکوس را دریافت کند، مانند استفاده از HTMLElement.focus() ، اما بخشی از ترتیب پیمایش فوکوس متوالی نیست. قرارداد برای عناصر غیر قابل تببندی و قابل فوکوس، استفاده tabindex="-1" است. اگر tabindex="-1" به یک عنصر تعاملی اضافه کنید، دیگر قابلیت تببندی نخواهد داشت.
متد element.focus() میتواند برای تنظیم فوکوس روی عناصر قابل فوکوس استفاده شود. مرورگرها عناصر فوکوس شده را به سمت نمای صفحه اسکرول میکنند. به همین دلیل، از استفاده از element.focus({preventScroll:true}) خودداری کنید، زیرا فوکوس روی یک عنصر غیرقابل مشاهده، تجربه کاربری بدی را به همراه دارد.
اگر میخواهید با پرسوجو در سند، عنصری که فوکوس روی آن قرار دارد را پیدا کنید، از ویژگی فقط خواندنی Document.activeElement استفاده کنید.
عناصری که tabindex آنها 1 یا بیشتر است، در یک توالی tab جداگانه قرار میگیرند. همانطور که در Codepen زیر آمده است، tabbing در یک توالی جداگانه، به ترتیب از کمترین مقدار تا بیشترین مقدار، شروع میشود و سپس عناصر موجود در توالی معمولی (بدون تنظیم tabindex یا tabindex="0" ) را به ترتیب منبع بررسی میکند:
tabindex با مقدار مثبت، عنصر را در یک توالی فوکوس اولویتبندیشده قرار میدهد که میتواند منجر به بینظمی در ترتیب فوکوس شود. از تغییر ترتیب DOM با tabindex خودداری کنید. تغییر ترتیب تببندی میتواند تجربه کاربری بدی ایجاد کند و نگهداری آن دشوار است.
contenteditable ویژگی contenteditable قبلاً مورد بحث قرار گرفت. تنظیم contenteditable="true" روی هر عنصر، آن را قابل ویرایش، قابل فوکوس و بخشی از ترتیب تبها میکند. رفتار فوکوس مشابه تنظیم tabindex="0" است، اما یکسان نیست. عناصر contenteditable تودرتو، قابل فوکوس هستند اما قابل تببندی نیستند. برای اینکه یک عنصر contenteditable تودرتو را قابل تببندی کنید، tabindex="0" را اضافه کنید که آن را به ترتیب پیمایش فوکوس متوالی اضافه میکند.
autofocus به عناصر تعاملی بدهید اگرچه autofocus بولی یک ویژگی سراسری است که میتواند روی هر عنصری تنظیم شود، اما یک عنصر بیاثر را تعاملی نمیکند. هنگامی که صفحه بارگذاری میشود، اولین عنصر قابل فوکوس با ویژگیهای autofocus ، فوکوس را دریافت میکند، البته تا زمانی که آن عنصر نمایش داده شود و در یک <dialog> تودرتو نباشد.
تنظیم خودکار فوکوس روی محتوا ممکن است برای کاربران گیجکننده باشد. وقتی autofocus روی یک کنترل فرم تنظیم میکنید، آن کنترل فرم هنگام بارگذاری صفحه به نمای مورد نظر اسکرول میکند. کاربران شما، از جمله کاربران صفحهخوان و کاربرانی که دارای نمایشگرهای کوچک هستند، ممکن است دستورالعملهای فرم یا حتی برچسب کنترل فرم را از دست بدهند. علاوه بر این، ویژگی autofocus ترتیب پیمایش فوکوس متوالی سند را تغییر نمیدهد. عناصر موجود در دنباله که قبل از عنصر فوکوس خودکار قرار میگیرند، نادیده گرفته میشوند. به همین دلایل، باید از استفاده از ویژگی autofocus خودداری کنید.
استثنای توصیهی « autofocus استفاده نکنید» این است که ویژگی autofocus را درون عناصر <dialog> قرار دهید. وقتی یک کادر محاورهای باز میشود، مرورگر بهطور خودکار روی اولین عنصر تعاملی قابل فوکوس درون <dialog> فوکوس میکند، به این معنی که افزودن autofocus به یک عنصر ضروری نیست. اگر میخواهید مطمئن شوید که یک عنصر تعاملی خاص درون کادر محاورهای هنگام باز شدن کادر محاورهای فوکوس را دریافت میکند، ویژگی autofocus را به آن عنصر اضافه کنید.
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
ویژگی autofocus تنظیم شده روی <button> بستن، به آن اجازه میدهد هنگام باز شدن کادر محاورهای، فوکوس را دریافت کند. به عنوان اولین عنصر در کادر محاورهای، در هر صورت فوکوس را دریافت میکرد. به طور پیشفرض، هنگامی که یک کادر محاورهای باز میشود، اولین عنصر قابل فوکوس در کادر محاورهای، فوکوس را دریافت میکند، مگر اینکه عنصر دیگری در کادر محاورهای، ویژگی autofocus را تنظیم کرده باشد.
همچنین ویژگیهای HTML وجود دارند که میتوانند عناصر تعاملی را از توالی تببندی حذف کنند. اضافه کردن یک tabindex منفی به عناصر focusable، اضافه کردن ویژگی disabled به کنترلهای فرم پشتیبانیکننده، و اضافه کردن ویژگی سراسری inert به یک container، همگی عناصر را از قابلیت تببندی خارج میکنند. این سه ویژگی کاملاً مجزا هستند و قابل تعویض با یکدیگر نیستند.
tabindex یک ویژگی tabindex با مقدار منفی، یک عنصر را قابل فوکوس میکند، اما قابلیت تببندی را از آن سلب میکند. در حالی که اضافه کردن tabindex="0" به یک عنصر با قابلیت فوکوس پیشفرض، شامل لینکها، دکمهها، کنترلهای فرم و عناصری که contenteditable هستند، ضروری نیست؛ اضافه کردن tabindex با مقدار منفی، عناصری را که معمولاً قابلیت تببندی دارند، از ترتیب پیمایش فوکوس متوالی حذف میکند.
مقدار منفی tabindex مانع از تمرکز کاربران صفحهکلید روی عناصر تعاملی میشود، اما عنصر را غیرفعال نمیکند. کاربران اشارهگر همچنان میتوانند روی عنصر تمرکز کنند. برای غیرفعال کردن یک عنصر، از ویژگی disabled استفاده کنید.
ویژگی Boolean disabled باعث میشود کنترلهای فرمی که روی آنها اعمال میشوند و همچنین فرزندان آنها، در صورت وجود، غیرقابل فوکوس شوند. کنترلهای فرم غیرفعال نمیتوانند فوکوس شوند، رویدادهای کلیک دریافت نمیکنند و هنگام ارسال فرم ارسال نمیشوند.
disabled یک ویژگی سراسری نیست. این ویژگی روی <button> ، <input> ، <optgroup> ، <option> ، <select> ، <textarea> ، عناصر سفارشی مرتبط با فرم و <fieldset> اعمال میشود. وقتی روی <optgroup> یا <fieldset> تنظیم شود، تمام کنترلهای فرم فرزند غیرفعال میشوند، به جز محتویات اولین <legend> از <fieldset> .
همان عناصری که از disabled پشتیبانی میکنند، با شبه کلاسهای :disabled و :enabled نیز قابل هدفگیری هستند. عناصری که با ویژگی disabled غیرفعال میشوند، معمولاً با stylesheet مربوط به user-agent به رنگ خاکستری روشن استایلبندی میشوند، حتی اگر accent-color تنظیم شده باشد.
از آنجایی که این ویژگی یک ویژگی بولی است، وجود آن عنصر فعال را غیرفعال میکند؛ نمیتوانید آن را روی false تنظیم کنید. برای فعال کردن مجدد یک عنصر غیرفعال، این ویژگی باید حذف شود، معمولاً با استفاده از Element.removeAttribute('disabled') .
ویژگی HTMLInputElement.disabled به شما امکان میدهد بررسی کنید که آیا یک ورودی غیرفعال است یا خیر. از آنجایی که disabled یک ویژگی سراسری نیست، از HTMLElement به ارث نمیرسد، اما هر رابط عنصر پشتیبانیکننده، مانند HTMLSelectElement ، HTMLTextareaElement ، دارای ویژگی فقط خواندنی یکسانی است.
ویژگی disabled برای عناصر معمولاً inert که با tabindex یا contenteditable قابل فوکوس میشوند، و همچنین برای عنصر <form> اعمال نمیشود. برای غیرفعال کردن این عناصر، میتوان از ویژگی سراسری inert استفاده کرد.
inert وقتی ویژگی بولی سراسری inert به یک عنصر اضافه میشود، آن عنصر و تمام محتوای تودرتو غیرفعال میشوند، به این معنی که نمیتوان روی آنها کلیک کرد یا با tab به آنها دسترسی پیدا کرد. آنها همچنین از درخت دسترسی حذف میشوند. در حالی که inert میتوان برای هر عنصری اعمال کرد، معمولاً برای بخشهایی از محتوا، مانند محتوای خارج از صفحه یا محتوای پنهان، استفاده میشود.
هنگام اعمال disabled به کنترلهای فرم، مرورگر استایل پیشفرض را ارائه میدهد و میتواند با استفاده از شبه کلاس :disabled استایلبندی شود. ویژگی inert هیچ نشانگر بصری ارائه نمیدهد و هیچ شبه کلاس منطبقی ندارد (اگرچه انتخابگر ویژگی [inert] مطابقت دارد).
استفاده از inert روی محتوای قابل مشاهده بدون استایلهایی که inert بودن را نشان دهند، میتواند منجر به تجربه کاربری ضعیف شود. از آنجایی که محتوای inert برای کاربران خواننده صفحه نمایش در دسترس نیست، میتواند منجر به سردرگمی شود وقتی کاربران بینا در صفحه نمایش، محتوایی را روی صفحه میبینند که برای ابزارهای دسترسی در دسترس نیست. inert بودن را با CSS کاملاً آشکار کنید.
مطمئن شوید که فوکوس هرگز به محتوای غیرقابل مشاهده منتقل نمیشود. هر چیزی که خارج از صفحه نمایش رندر میشود و هنگام فوکوس به طور خودکار در معرض دید قرار نمیگیرد، باید غیرفعال شود. اگر محتوایی پنهان است اما هنگام فوکوس در معرض دید قرار میگیرد، مانند پیوند پرش به محتوا ، نیازی به غیرفعال کردن آن نیست.