Inert özelliği

Emma Twersky

inert özelliği, bir öğede kullanıcı girişi etkinliklerinin nasıl kaldırılacağını ve geri yükleneceğini basitleştiren genel bir HTML özelliğidir (odak etkinlikleri ve yardımcı teknolojilerdeki etkinlikler de dahil).

Hareketsiz, iletişim kutusu öğelerinde varsayılan bir davranıştır. Örneğin, kullanıcıların seçim yapması için iletişim kutusunu açmak ve sonra da bunu ekrandan kapatmak üzere showModal politikasını kullanabilirsiniz. Bir <dialog> açıldıktan sonra sayfanın geri kalanı etkisiz hale gelir örneğin, bağlantılara gitmek için artık tıklayamaz veya sekmeyle kullanamazsınız.

Diğer öğelerde aynı davranışı elde etmek için inert özelliğini kullanabilirsiniz.

Inert, hareket kabiliyetinin olmaması anlamına gelir. Bu yüzden bir şeyi durağan olarak işaretlediğinizde bu DOM öğelerindeki hareketi veya etkileşimi kaldırabilirsiniz.

<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>

Burada inert, button2 içeren ikinci <div> öğesinde tanımlandı Bu nedenle, düğme ve etiket de dahil olmak üzere bu <div> öğesinde bulunan hiçbir içeriğe odaklanılamaz veya tıklanamaz.

inert özelliği, özellikle erişilebilirlik açısından faydalıdır. özellikle odaklanmayı önlemek için.

Daha iyi erişilebilirlik

Web İçeriği Erişilebilirlik Kuralları, odak yönetiminin yanı sıra makul, kullanılabilir bir odak sırası gerektirir. Buna hem keşfedilebilirlik hem de etkileşim dahildir. Önceden aria-hidden="true", keşfedilebilirliği azaltabiliyordu ancak etkileşim daha zordu.

inert, geliştiricilere bir öğeyi sekme sırasından ve erişilebilirlik ağacından kaldırma olanağı sağlar. Bu, hem bulunabilirliği hem de etkileşimi kontrol etmenize olanak tanırken, daha kullanılabilir ve erişilebilir kalıplar oluşturmanıza olanak tanır.

Daha iyi erişilebilirlik sağlamak amacıyla inert öğesinin bir öğeye uygulanmasıyla ilgili iki temel kullanım alanı vardır:

• Bir öğe DOM ağacının parçası olduğunda, ancak ekran dışında veya gizli olduğunda.
• Bir öğe, DOM ağacının parçası olduğunda ancak etkileşimsiz olması gerektiğinde.

Ekran dışı veya gizli DOM öğeleri

Yaygın erişilebilirlik sorunlarından biri çekmece, kullanıcı tarafından her zaman görülemeyen öğeler DOM'ye eklenir. inert sayesinde, çekmece alt öğeleri ekran dışındayken bir klavye kullanıcısının bu öğelerle yanlışlıkla etkileşimde bulunamaması sağlanır.

Etkileşimsiz DOM öğeleri

Başka bir yaygın erişilebilirlik sorunu, kullanıcı arayüzü tasarımının görünür veya kısmen görünür olmasına rağmen etkileşimsiz olduğu açıkça bellidir. Bu durum, sayfa yükleme sırasında form gönderilirken ya da bir iletişim kutusu yer paylaşımının açık olması gibi durumlarda gerçekleşebilir.

Kullanıcılara en iyi deneyimi sunmak için kullanıcı arayüzünün durumunu ve "trap"ı belirtin. sayfanın etkileşimli bölümüne odaklanmasını sağlar.

Odak yakalama

Odaklanma yakalama, iyi kullanıcı arayüzü erişilebilirliği kavramlarından biridir. Ekran okuyucu odağının etkileşimli kullanıcı arayüzü öğelerine odaklandığından ve bir öğe etkileşimi engellediğinde bunun farkında olmanız gerekir. Bu, sahte ekran okuyucuların bir sayfa yer paylaşımının arkasına ulaşmasını veya ilk gönderim işlenirken yanlışlıkla bir formu göndermesinin sınırlanmasına da yardımcı olur.

inert kullanarak tek bulunabilir içeriğe erişilebilmesini sağlayabilirsiniz. Bu, aşağıdakiler için yararlıdır:

• Kalıcı iletişim kutusu, odak yakalama menüsü veya yan gezinme menüsü gibi engelleme öğeleri.
• Etkin olmayan öğeler içeren bir bant.
• Geçerli olmayan form içerikleri (örneğin, "Fatura adresi ile aynı" onay kutusu işaretli olduğunda "Gönderim adresi" alanlarının kaybolma ve devre dışı bırakılması).
• Tutarsız bir durumda kullanıcı arayüzünün tamamı devre dışı bırakılıyor.

inert öğelerini görsel olarak belirtin

Varsayılan olarak, bir alt ağacın durağanlığına dair görsel bir gösterge yoktur. DOM'nin hangi bölümlerinin etkin ve hangilerinin devre dışı olduğunu açıkça işaretlemeniz önerilir.

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

Tüm kullanıcılar bir sayfanın tüm bölümlerini aynı anda göremez. Örneğin, ekran okuyucu, küçük cihaz veya büyüteç kullananlar ve özellikle küçük pencereler kullananlar bile sayfanın etkin kısmını göremeyebilir ve hareketsiz bölümler açıkça durağan değilse hayal kırıklığına uğrayabilir. Bağımsız denetimler için devre dışı bırakılan özellik muhtemelen daha uygun olur.

Hangi etkileşimler ve hareketler engellenir?

Varsayılan olarak inert, odaklanma ve tıklama etkinliklerini engeller. Bu ayar, yardımcı teknolojilerde sekme tuşuna basmayı ve bulunabilirliği de engeller. Tarayıcı, öğedeki sayfa aramayı ve metin seçimini de yoksayabilir.

Varsayılan inert değeri false.