تمرکز

عناصر تعاملی، از جمله کنترل‌های فرم ، پیوندها و دکمه‌ها، به‌طور پیش‌فرض قابل فوکوس و جدول‌بندی هستند. عناصر 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 با مقدار منفی یک عنصر را قابل فوکوس می کند، اما Tabbbable نیست. در حالی که افزودن tabindex="0" به یک عنصر قابل فوکوس به‌طور پیش‌فرض، شامل پیوندها، دکمه‌ها، کنترل‌های فرم و عناصری که contenteditable هستند، ضروری نیست. از جمله tabindex با مقدار منفی، عناصر معمولی Tabbable را از ترتیب پیمایش فوکوس متوالی حذف می کند.

یک مقدار شاخص tabindex منفی از تمرکز کاربران صفحه کلید روی عناصر تعاملی جلوگیری می کند، اما عنصر را غیرفعال نمی کند. کاربران اشاره گر همچنان می توانند روی عنصر تمرکز کنند. برای غیرفعال کردن یک عنصر، از ویژگی disabled استفاده کنید.

از کار افتاده است

ویژگی boolean disabled باعث می‌شود کنترل‌های فرمی که روی آن اعمال می‌شود و فرزندان آن‌ها، در صورت وجود، غیرقابل تمرکز باشند. کنترل‌های فرم غیرفعال نمی‌توانند متمرکز شوند، رویدادهای کلیک دریافت نمی‌شوند، و پس از ارسال فرم ارسال نمی‌شوند.

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 بسیار آشکار کنید.

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

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

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