Inert özelliği

Emma Twersky

inert özelliği, odak etkinlikleri ve yardımcı teknolojilerden gelen etkinlikler dahil olmak üzere bir öğe için kullanıcı girişi etkinliklerinin nasıl kaldırılacağını ve geri yükleneceğini basitleştiren genel bir HTML özelliğidir.

Tarayıcı desteği

• 102
• 102
• 112
• 15,5

Kaynak

Etkin olmama, iletişim kutusu öğelerinde varsayılan bir davranıştır. Örneğin, kullanıcıların seçim yapması için bir iletişim kutusu açmak ve ardından bu iletişim kutusunu ekrandan kaldırmak üzere showModal öğesini kullandığınızda etkin olmama davranışı geçerli olur. Bir <dialog> açıldıktan sonra sayfanın geri kalanı etkinliğini kaybeder. Örneğin, artık bağlantıları tıklayamaz veya sekme tuşuyla bağlantılara gidemezsiniz.

kalemini inceleyin.

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

Inert, hareket edememe durumudur. Bu nedenle, bir öğeyi hareketsiz olarak işaretlediğinizde bu DOM öğelerinde hareketi veya etkileşimi kaldırırsınız.

<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, button2 içeren ikinci <div> öğesinde inert tanımlanmıştır. Bu nedenle, düğme ve etiket dahil olmak üzere bu <div> içinde bulunan tüm içerikler odağa alınamaz veya tıklanamaz.

inert özelliği, özellikle erişilebilirlik için yararlıdır. Özellikle de odak tuzaklarını önlemek için kullanılır.

Daha iyi erişilebilirlik

Web İçeriği Erişilebilirlik Kuralları, odak yönetimi ve makul, kullanılabilir bir odak sırası gerektirir. Buna hem bulunabilirlik hem de etkileşim dahildir. Daha önce keşfedilebilirlik aria-hidden="true" ile engellenebiliyordu ancak etkileşim daha zordur.

inert, geliştiricilere bir öğeyi sekme sırasından ve erişilebilirlik ağacından kaldırma olanağı sunar. Bu sayede hem keşfedilebilirliği hem de etkileşimi kontrol edebilir, daha kullanışlı ve erişilebilir kalıplar oluşturabilirsiniz.

Daha iyi erişilebilirlik sağlamak için bir öğeye inert uygulamanın iki önemli kullanım alanı vardır:

• Bir öğe DOM ağacının bir parçasıysa ancak ekranda değilse veya gizliyse.
• Bir öğe DOM ağacının bir parçası olduğunda ancak etkileşimli olmaması gerektiğinde.

Ekran dışındaki veya gizli DOM öğeleri

Erişilebilirlikle ilgili yaygın sorunlardan biri, DOM'ye her zaman kullanıcı tarafından görülemeyen öğeler ekleyen çekmece gibi öğelerle ilgilidir. inert ile, çekmece alt öğeleri ekranda değilken klavye kullanıcısının yanlışlıkla bu öğelerle etkileşime geçemeyeceğinden emin olabilirsiniz.

'ne bakın.

Etkileşimli olmayan DOM öğeleri

Erişilebilirlikle ilgili diğer bir yaygın sorun, kullanıcı arayüzü tasarımının görünür veya kısmen görünür olmasına rağmen açıkça etkileşimli olmamasıdır. Bu durum, sayfa yüklenirken, bir form gönderilirken veya örneğin bir iletişim kutusu yer paylaşımı açıkken gerçekleşebilir.

Kullanıcılara en iyi deneyimi sunmak için kullanıcı arayüzünün durumunu belirtin ve sayfanın etkileşimli olan kısmına odağı "sabitleyin".

Odak yakalama

Odak yakalama, iyi kullanıcı arayüzü erişilebilirliğinin temel bir kavramıdır. Ekran okuyucunun odağının etkileşimli kullanıcı arayüzü öğelerinde olduğundan ve bir öğenin etkileşimi engellediğinden emin olmalısınız. Bu, kötü amaçlı ekran okuyucuların bir sayfa yer paylaşımının arkasına ulaşmasını veya ilk gönderim hâlâ işlenirken bir formu yanlışlıkla göndermesini de sınırlandırır.

inert kullanarak yalnızca bulunabilir içeriğin erişilebilir olmasını sağlayabilirsiniz. Bu, aşağıdakiler için yararlıdır:

• Modüler iletişim kutusu, odak tuşlarını yakalayan menü veya yan gezinme gibi öğeleri engelleme
• Etkin olmayan öğeler içeren bir bant.
• Geçerli olmayan form içeriği (örneğin, "Fatura adresiyle aynı" onay kutusu işaretlendiğinde "Gönderim adresi" alanlarının rengi soluyor ve devre dışı bırakılıyor).
• Tutarsız bir durumdayken kullanıcı arayüzünün tamamını devre dışı bırakma

inert öğelerini görsel olarak belirtme

Varsayılan olarak, alt ağacın etkin olmadığına dair görsel bir gösterge yoktur. DOM'un hangi bölümlerinin etkin, hangilerinin etkin olmadığını 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 kullananlar, küçük cihazlar veya büyüteç kullananlar ve hatta özellikle küçük pencereler kullanan kullanıcılar bir sayfanın etkin bölümünü göremeyebilir ve etkin olmayan bölümlerin etkin olmadığı açıkça belirtilmezse can sıkıcı durumlarla karşılaşabilir. Ayrı kontroller için devre dışı özelliği muhtemelen daha uygundur.

göz atın.

Hangi etkileşimler ve hareketler engellenir?

inert varsayılan olarak odaklanma ve tıklama etkinliklerini engeller. Yardımcı teknolojilerde bu, sekme tuşunu ve bulunabilirliği de engeller. Tarayıcı, öğedeki sayfa aramasını ve metin seçimini de yok sayabilir.

inert için varsayılan değer false'dur.