تمرکز

عناصر تعاملی، از جمله کنترل‌های فرم ، پیوندها و دکمه‌ها، به‌طور پیش‌فرض قابل فوکوس و جدول‌بندی هستند. عناصر 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 بسیار آشکار کنید.

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

درک خود را بررسی کنید

درک خود را بررسی کنید

دانش خود را در مورد تمرکز آزمایش کنید.