inert özelliği, bir öğeye ait kullanıcı giriş etkinliklerini (odak etkinlikleri ve yardımcı teknolojilerden etkinlikler dahil) kaldırma ve geri yükleme işlemini basitleştiren genel bir HTML özelliğidir.
Eylemsizlik, iletişim öğelerinde varsayılan bir davranıştır. Örneğin, kullanıcıların seçim yapıp ekrandan kapatması için bir iletişim kutusu açmak üzere showModal kullanmanız buna örnek olarak verilebilir.
Bir <dialog> açıldıktan sonra, sayfanın geri kalanı durağan hale gelir. Örneğin, artık bağlantıları tıklayamaz veya bağlantılara sekme açamazsınız.
Diğer öğelerde aynı davranışı elde etmek için inert özelliğini kullanabilirsiniz.
Eylemsiz, hareket etme yeteneğinin olmaması anlamına gelir. Bu nedenle, bir şeyi durağan olarak işaretlediğinizde, bu DOM öğelerinden hareketi veya etkileşimi kaldırmış olursunuz.
<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 bildirilmiştir. Dolayısıyla, düğme ve etiket dahil olmak üzere bu <div> içindeki hiçbir içerik, odağı alamaz veya tıklanamaz.
inert özelliği, özellikle de odakta kalma sıkışmasını önlemek için erişilebilirlik açısından kullanışlı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. Önceden aria-hidden="true" ile keşfedilebilirlik engellenebiliyordu, ancak etkileşim daha zordur.
inert, geliştiricilerin sekme sırasından ve erişilebilirlik ağacından öğe kaldırmasına olanak tanır. Bu sayede, hem keşfedilebilirliği hem de etkileşimi kontrol edebilirsiniz. Ayrıca, daha kullanılabilir ve erişilebilir kalıplar oluşturabilirsiniz.
Daha iyi erişilebilirlik sağlamak için bir öğeye inert uygulanması iki temel kullanım alanı sağlar:
- Bir öğe, DOM ağacının parçası olmasına rağmen ekran dışında veya gizli olduğunda.
- Bir öğe, DOM ağacının parçası olmasına rağmen etkileşimli olmaması gerektiği zaman.
Ekran dışı veya gizli DOM öğeleri
Erişilebilirlikle ilgili yaygın sorunlardan biri, DOM'ye kullanıcı tarafından her zaman görülemeyen öğeler ekleyen çekmece gibi öğelerle ilgilidir.
inert ile çekmece alt öğelerinin ekran dışındayken klavye kullanıcısının yanlışlıkla etkileşimde bulunmamasını sağlayabilirsiniz.
Etkileşimsiz DOM öğeleri
Erişilebilirlikle ilgili bir diğer sorun ise 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ükleme sırasında, bir form gönderilirken veya örneğin bir iletişim kutusu yer paylaşımı açık olduğunda olabilir.
Kullanıcılara en iyi deneyimi sunmak için kullanıcı arayüzünün durumunu belirtin ve odağı sayfanın etkileşimli bölümüne "yakalayın".
Odaklanmayı engelleme
Odak tutma, iyi bir kullanıcı arayüzü erişilebilirliği konusunda temel bir kavramdır. Ekran okuyucunun etkileşimli kullanıcı arayüzü öğelerine odaklandığından ve bir öğe etkileşimi engellediğinde bunu fark ettiğinden emin olmalısınız. Bu, sahte ekran okuyucuların bir sayfa yer paylaşımının arkasından ulaşmasını veya ilk gönderim hâlâ işlenirken bir formu yanlışlıkla göndermesini sınırlamaya da yardımcı olur.
inert sayesinde, herkese açık tek içeriğe erişilebildiğinden emin olabilirsiniz. Bu, aşağıdakiler için yararlıdır:
- Kalıcı iletişim kutusu, odak yakalama menüsü veya yan gezinme gibi öğeleri engelleyen öğeler.
- 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 devre dışı bırakılması ve devre dışı bırakılması).
- Tutarsız durumda tüm kullanıcı arayüzü devre dışı bırakılıyor.
inert öğelerini görsel olarak belirtin
Varsayılan olarak, bir alt ağacın hareketsiz olduğuna dair görsel bir gösterge yoktur. DOM'un hangi bölümlerinin etkin, hangilerinin durağan 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ç kullanan kullanıcılar ve hatta çok küçük pencereleri kullananlar bile bir sayfanın etkin bölümünü göremeyebilir ve durağan bölümlerin bariz bir şekilde hareketsiz olmadığı durumlarda hayal kırıklığına uğrayabilir. Tek tek denetimler için, devre dışı özellik büyük olasılıkla daha uygundur.
Hangi etkileşimler ve hareketler engellenir?
Varsayılan olarak inert, odaklama ve tıklama etkinliklerini engeller. Yardımcı teknolojiler için bu, sekme kullanımını ve bulunabilirliği de engeller. Tarayıcı, öğedeki sayfa aramayı ve metin seçimini de yoksayabilir.
inert öğesinin varsayılan değeri false değeridir.