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.

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, bağlantıları tıklayamaz veya sekme tuşuyla bağlantılara gidemezsiniz.

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

Hareketsiz, hareket edememe durumudur. Bu nedenle, bir öğeyi hareketsiz olarak işaretlediğinizde bu DOM öğelerindeki 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 odak tuzağını önlemek amacıyla erişilebilirlik için yararlıdı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 keşfedilebilirlik 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, 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 için bir öğeye inert uygulamanın iki önemli 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 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.

Etkileşimli olmayan DOM öğeleri

Diğer 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ü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 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, 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 tek bulunabilir içeriğe erişilebilmesini 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 adresi ile 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'nin hangi bölümlerinin etkin, 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 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ı denetimler için devre dışı özelliği muhtemelen daha uygundur.

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.