عناصر تعاملی، از جمله کنترلهای فرم ، پیوندها و دکمهها، بهطور پیشفرض قابل فوکوس و جدولبندی هستند. عناصر Tabbable بخشی از ترتیب پیمایش فوکوس متوالی سند هستند. عناصر دیگر بی اثر هستند، به این معنی که آنها تعاملی نیستند. با ویژگی های HTML، می توان عناصر تعاملی را بی اثر کرد و عناصر بی اثر را تعاملی کرد.
به طور پیشفرض، ترتیب فوکوس ناوبری همانند ترتیب بصری است که ترتیب کد منبع است. ویژگیهای HTML وجود دارند که میتوانند این ترتیب و ویژگیهای CSS را تغییر دهند که میتوانند ترتیب بصری محتوا را تغییر دهند. تغییر ترتیب برگه ها با HTML یا ترتیب رندر بصری با CSS می تواند به تجربه کاربر آسیب برساند.
ترتیب برگههای درک شده و واقعی را با CSS و HTML تغییر ندهید. همانطور که دو مثال زیر نشان می دهد، ترتیب برگه هایی که با ترتیب مورد انتظار بصری متفاوت هستند، برای کاربران گیج کننده و برای تجربه کاربر مضر هستند.
در این مثال، مقدار ویژگی tabindex
ترتیب تب را آشفته کرده است:
در این مثال، CSS یک واگرایی بین ترتیب زبانهها و ترتیب بصری محتوا ایجاد کرده است:
flex-flow: row-reverse;
اعلامیه ترتیب بصری را معکوس کرده است. علاوه بر این، ویژگی دستور CSS برای کلمه ششم، "This" اعمال شد که به صورت بصری آن یک کلمه را جابجا کرد. ترتیب زبانه ها ترتیب کد است که دیگر با ترتیب بصری مطابقت ندارد و باعث قطع ارتباط برای کاربران صفحه کلید می شود.
تعاملی کردن عناصر بی اثر
ویژگیهای contenteditable
و tabindex
که ویژگیهای جهانی هستند، میتوانند به هر عنصری اضافه شوند و آنها را در فرآیند متمرکز کنند. عناصر قابل فوکوس را میتوان با ماوس یا اشارهگر، با تنظیم ویژگی autofocus
، یا با اسکریپت، مانند element.focus()
فوکوس کرد.
ویژگی tabindex
ویژگی tabindex
سراسری، که در ویژگی ها معرفی شده است، عناصری را که در غیر این صورت نمی توانند فوکوس دریافت کنند را قادر می سازد تا فوکوس را دریافت کنند، معمولاً با کلید 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
با مقدار منفی باعث میشود که عنصر قابل تمرکز باشد اما Tabbbable نباشد. این عنصر قادر به دریافت فوکوس است، مانند از طریق HTMLElement.focus()
، اما بخشی از ترتیب پیمایش فوکوس متوالی نیست. قرارداد برای عناصر غیرقابل تبدیل و فوکوس پذیر استفاده از tabindex="-1"
است. توجه داشته باشید که اگر tabindex="-1"
به یک عنصر تعاملی اضافه کنید، دیگر Tabbable نخواهد بود.
متد element.focus()
می تواند برای تنظیم فوکوس روی عناصر قابل فوکوس استفاده شود. توجه داشته باشید که مرورگرها عناصر متمرکز را به سمت نمایش اسکرول می کنند. به همین دلیل، از استفاده از element.focus({preventScroll:true})
اجتناب کنید، زیرا تمرکز روی یک عنصر غیرقابل مشاهده تجربه کاربری بدی را به همراه خواهد داشت.
اگر می خواهید سند را پرس و جو کنید تا بفهمید کدام عنصر در حال حاضر فوکوس دارد، از ویژگی Document.activeElement
فقط خواندنی استفاده کنید.
عناصر با tabindex
برگه 1
یا بیشتر در یک دنباله برگه جداگانه گنجانده شده اند. همانطور که در Codepen متوجه خواهید شد، برگه بندی در یک دنباله جداگانه، به ترتیب از کمترین مقدار تا بالاترین مقدار، قبل از مرور آنهایی که در دنباله معمولی هستند (بدون تنظیم 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 وجود دارد که میتواند عناصر تعاملی را از توالی Tabing حذف کند. شامل یک tabindex
منفی به عناصر قابل فوکوس، افزودن ویژگی disabled
به کنترلهای فرم پشتیبانی، و افزودن ویژگی inert
global به یک کانتینر، همگی عناصر را غیرقابل تبدیل میکند. این سه ویژگی قابل تعویض نیستند.
مقدار tabindex
منفی
همانطور که در بالا یاد گرفتیم، یک ویژگی tabindex
با مقدار منفی یک عنصر را قابل فوکوس میکند اما جدولپذیر نیست. در حالی که افزودن tabindex="0"
به یک عنصر قابل فوکوس بهطور پیشفرض، شامل پیوندها، دکمهها، کنترلهای فرم و عناصری که contenteditable
هستند، ضروری نیست. از جمله tabindex
با مقدار منفی، عناصر معمولی Tabbable را از ترتیب پیمایش فوکوس متوالی حذف می کند.
یک مقدار tabindex
منفی از تمرکز کاربران صفحه کلید روی عناصر تعاملی جلوگیری می کند، اما عنصر را غیرفعال نمی کند. کاربران اشاره گر همچنان می توانند روی عنصر تمرکز کنند. برای غیرفعال کردن یک عنصر، از ویژگی disabled
استفاده کنید.
از کار افتاده است
ویژگی boolean disabled باعث میشود کنترلهای فرمی که روی آن اعمال میشود و فرزندان آنها، در صورت وجود، غیرقابل تمرکز باشند. کنترلهای فرم غیرفعال نمیتوانند متمرکز شوند، رویدادهای کلیک دریافت نمیشوند، و پس از ارسال فرم ارسال نمیشوند. Note disabled
یک ویژگی جهانی نیست. این برای <button>
، <input>
، <optgroup>
، <option>
، <select>
، <textarea>
، عناصر سفارشی مرتبط با فرم و <fieldset>
اعمال میشود. وقتی روی <optgroup>
یا <fieldset>
تنظیم میشود، همه کنترلهای فرم فرزند غیرفعال میشوند، به جز محتویات اولین <legend>
<fieldset>
.
همان عناصری که از disabled
پشتیبانی میکنند با شبه کلاسهای :disabled
و :enabled
نیز قابل هدفیابی هستند. عناصری که با ویژگی disabled
غیرفعال می شوند، عموماً به صورت خاکستری روشن از طریق شیوه نامه کاربر-عامل استایل داده می شوند، حتی اگر یک accent-color
تنظیم شده باشد.
به عنوان یک ویژگی بولی، وجود ویژگی عنصر فعال شده را غیرفعال می کند. شما نمی توانید آن را روی false
تنظیم کنید. برای فعال کردن مجدد یک عنصر غیرفعال، مشخصه باید معمولاً از طریق Element.removeAttribute('disabled')
حذف شود.
ویژگی HTMLInputElement.disabled
به شما امکان می دهد بررسی کنید که آیا ورودی غیرفعال است یا خیر. از آنجایی که disabled
یک ویژگی جهانی نیست، از HTMLElement به ارث نمی رسد، اما هر رابط عنصر پشتیبانی کننده، مانند HTMLSelectElement
، HTMLTextareaElement
، دارای ویژگی فقط خواندنی است.
ویژگی disabled
برای عناصر معمولی inert
که از طریق tabindex
یا contenteditable
قابل فوکوس هستند، اعمال نمی شود. همچنین برای خود عنصر <form>
اعمال نمی شود. برای غیرفعال کردن این موارد، می توان از ویژگی inert
جهانی استفاده کرد.
صفت inert
هنگامی که ویژگی بولی جهانی inert
به یک عنصر اضافه می شود، آن عنصر و تمام محتوای تودرتو غیرفعال می شوند - نه قابل کلیک و نه جدول گذاری - و از درخت دسترسی حذف می شوند. در حالی که inert
می توان برای هر عنصری اعمال کرد، به طور کلی برای بخش هایی از محتوا، مانند محتوای خارج از صفحه یا محتوای پنهان دیگر استفاده می شود.
هنگام اعمال disabled
برای کنترلهای فرم، مرورگر یک استایل پیشفرض ارائه میکند و میتوان با استفاده از کلاس شبه :disabled
استایلسازی کرد. ویژگی inert
هیچ نشانگر بصری ارائه نمی دهد و هیچ شبه کلاس منطبقی ندارد (اگرچه انتخابگر ویژگی [inert]
مطابقت دارد).
استفاده از inert
در محتوای قابل مشاهده بدون سبک هایی که نشان دهنده بی اثر بودن باشد، می تواند منجر به تجربه کاربری ضعیف شود. از آنجایی که محتوای بی اثر برای کاربران صفحه خوان در دسترس نیست، وقتی کاربران صفحه خوان بینا محتوایی را روی صفحه می بینند که برای ابزارهای دسترسی در دسترس نیست، می تواند منجر به سردرگمی شود. اینرسی را از طریق CSS بسیار آشکار کنید.
اطمینان حاصل کنید که تمرکز هرگز روی محتوای غیرقابل مشاهده نیست. هر چیزی که خارج از صفحه نمایش داده می شود و به طور خودکار هنگام فوکوس نمایان نمی شود، باید بی اثر شود. اگر محتوا پنهان است، اما هنگام فوکوس مشاهده می شود، مانند پیوند پرش به محتوا در این صفحه، نیازی به بی اثر کردن آن نیست.
درک خود را بررسی کنید
درک خود را بررسی کنید
دانش خود را در مورد تمرکز آزمایش کنید.
اگر عنصری را نتوان فوکوس کرد به چه چیزی توصیف می شود؟
اگر عنصر دارای ویژگی disabled
باشد، چه چیزی درست خواهد بود؟