ویژگی inert یک ویژگی جهانی HTML است که نحوه حذف و بازیابی رویدادهای ورودی کاربر را برای یک عنصر ساده میکند، از جمله رویدادهای تمرکز و رویدادهای فناوریهای کمکی.
Inert یک رفتار پیشفرض در عناصر محاورهای است، مانند زمانی که از showModal برای باز کردن گفتگو برای کاربران برای انتخاب انتخاب و سپس حذف آن از صفحه استفاده میکنید. پس از باز کردن یک <dialog> بقیه صفحه بی اثر می شود، برای مثال دیگر نمی توانید روی پیوندها کلیک کنید یا برگه بزنید.
می توانید از ویژگی inert برای دستیابی به رفتار مشابه در سایر عناصر استفاده کنید.
Inert به معنای عدم توانایی حرکت است، بنابراین وقتی چیزی بی اثر را علامت گذاری می کنید، حرکت یا تعامل را از آن عناصر DOM حذف می کنید.
<div>
<label for="button1">Button 1</label>
<button id="button1">I am not inert</button>
</div>
<div inert>
<label for="button2">Button 2</label>
<button id="button2">I am inert</button>
</div>
در اینجا، inert در دومین عنصر <div> حاوی button2 اعلام شده است، بنابراین تمام محتوای موجود در این <div> ، از جمله دکمه و برچسب، نمی توانند فوکوس دریافت کنند یا روی آنها کلیک شود.
ویژگی inert به ویژه برای دسترسی مفید است، به ویژه برای جلوگیری از به دام افتادن فوکوس.
دسترسی بهتر
دستورالعملهای دسترسی به محتوای وب نیاز به مدیریت تمرکز و ترتیب تمرکز معقول و قابل استفاده دارد. این شامل قابلیت کشف و تعامل است. پیش از این، قابلیت کشف را میتوان با aria-hidden="true" سرکوب کرد، اما تعامل دشوارتر است.
inert به توسعه دهندگان این امکان را می دهد که یک عنصر را از ترتیب برگه ها و از درخت دسترسی حذف کنند. این به شما امکان می دهد هم قابلیت کشف و هم تعامل را کنترل کنید و توانایی ایجاد الگوهای قابل استفاده و قابل دسترس تر را امکان پذیر می کند.
دو مورد عمده برای اعمال inert به یک عنصر برای امکان دسترسی بهتر وجود دارد:
- هنگامی که یک عنصر بخشی از درخت DOM است، اما خارج از صفحه یا پنهان است.
- زمانی که یک عنصر بخشی از درخت DOM است، اما باید غیر تعاملی باشد.
عناصر DOM خارج از صفحه یا پنهان
یکی از نگرانیهای رایج دسترسی، عناصری مانند کشو است که عناصری را به DOM اضافه میکنند که همیشه برای کاربر قابل مشاهده نیستند. با inert می توانید اطمینان حاصل کنید که در حالی که عناصر فرعی کشو خارج از صفحه هستند، کاربر صفحه کلید نمی تواند به طور تصادفی با آن تعامل داشته باشد.
عناصر DOM غیر تعاملی
یکی دیگر از نگرانی های رایج دسترسی زمانی است که یک طراحی UI قابل مشاهده یا تا حدی قابل مشاهده است، اما به وضوح غیر تعاملی است. این ممکن است در حین بارگذاری صفحه، زمانی که یک فرم در حال ارسال است، یا به عنوان مثال اگر یک پوشش گفتگو باز است باشد.
برای ارائه بهترین تجربه برای کاربران، وضعیت رابط کاربری را مشخص کنید و تمرکز را در قسمتی از صفحه که تعاملی است، «به دام بیاندازید».
به دام انداختن تمرکز
تله گذاری فوکوس یک مفهوم اصلی دسترسی خوب به رابط کاربری است. باید مطمئن شوید که تمرکز صفحهخوان روی عناصر رابط کاربری تعاملی است و از زمانی که عنصری تعامل را مسدود میکند، آگاه باشد. این همچنین به محدود کردن دسترسی صفحهخوانهای سرکش به پشت همپوشانی صفحه یا ارسال تصادفی فرم در زمانی که اولین ارسال هنوز در حال پردازش است، کمک میکند.
با استفاده از inert ، می توانید اطمینان حاصل کنید که تنها محتوای قابل کشف قابل دسترسی است. این برای:
- مسدود کردن عناصر مانند گفتگوی مودال، منوی تله گذاری فوکوس، یا ناوبری جانبی.
- چرخ و فلک با اقلام غیر فعال.
- محتوای فرم غیرقابل اجرا (به عنوان مثال، محو و غیرفعال کردن فیلدهای "آدرس حمل و نقل" هنگامی که کادر انتخاب "همان آدرس صورتحساب" علامت زده شده است).
- غیرفعال کردن کل رابط کاربری در حالت ناسازگار.
عناصر inert بصری نشان دهید
به طور پیش فرض، هیچ نشانه بصری از بی اثر بودن درخت فرعی وجود ندارد. توصیه می شود به وضوح مشخص کنید که کدام بخش از DOM فعال و کدام بخش بی اثر است.
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
همه کاربران نمی توانند همه بخش های یک صفحه را به طور همزمان ببینند. به عنوان مثال، کاربران صفحهخوان، دستگاههای کوچک یا دارای ذرهبین، و حتی کاربرانی که فقط از پنجرههای کوچک استفاده میکنند، ممکن است نتوانند بخش فعال صفحه را ببینند و اگر بخشهای بیاثر به وضوح بیاثر نباشند، ممکن است ناامید شوند. برای کنترل های فردی، ویژگی غیرفعال احتمالاً مناسب تر است.
چه فعل و انفعالات و حرکتی مسدود شده است؟
بهطور پیشفرض، رویدادهای inert تمرکز و کلیک را مسدود میکند. برای فنآوریهای کمکی، این امر همچنین از Tabbing و قابلیت کشف جلوگیری میکند. مرورگر همچنین ممکن است جستجوی صفحه و انتخاب متن در عنصر را نادیده بگیرد.
مقدار پیش فرض inert false است.