Angular Material ile çalışırken aria özelliğini her yerde görüyorum. Birisi bana aria ön ekinin ne anlama geldiğini açıklayabilir mi? ama en önemlisi anlamaya çalıştığım şey aria-hidden
ve hidden
özniteliği arasındaki fark.
ARIA (Erişilebilir Zengin İnternet Uygulamaları), Web içeriğini ve Web uygulamalarını engelli kişiler için daha erişilebilir hale getirmenin bir yolunu tanımlar.
HTML5'te yeni olan hidden
niteliği tarayıcılara öğeyi görüntülememelerini söyler. aria-hidden` özelliği ekran okuyuculara öğeyi görmezden gelip gelmemeleri gerektiğini söyler. Daha fazla ayrıntı için w3 dokümanlarına bir göz atın:
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
Bu standartların kullanılması, engelli kişilerin web'i kullanmasını kolaylaştırabilir.
Gizli öznitelik boolean bir özniteliktir (Doğru/Yanlış). Bu nitelik bir öğe üzerinde kullanıldığında, o öğeyle olan tüm ilgiyi ortadan kaldırır. Bir kullanıcı html sayfasını görüntülediğinde, hidden niteliğine sahip öğeler görünmemelidir.
Örnek:
<p hidden>You can't see this</p>
Aria-gizli nitelikleri, öğenin ve onun soyundan gelen TÜM öğelerin tarayıcıda hala görünür olduğunu, ancak ekran okuyucular gibi erişilebilirlik araçları için görünmez olacağını belirtir.
Örnek:
<p aria-hidden="true">You can't see this</p>
Şuna bir göz atın](http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/). Tüm sorularınıza cevap verecektir.
Not: ARIA, Erişilebilir Zengin İnternet Uygulamaları anlamına gelir
Kaynaklar: Paciello Group
HTML 5.2]'ye göre (https://www.w3.org/TR/html52/editing.html#the-hidden-attribute):
Bir öğe üzerinde belirtildiğinde, [the
hidden
attribute], öğenin sayfanın mevcut durumuyla henüz veya artık doğrudan ilgili olmadığını veya kullanıcı tarafından doğrudan erişilmek yerine sayfanın diğer bölümleri tarafından yeniden kullanılacak içeriği bildirmek için kullanıldığını gösterir.
Örnekler arasında bazı panellerin gösterilmediği bir sekme listesi veya kullanıcı oturum açtıktan sonra kaybolan bir oturum açma ekranı yer alır. Ben bunları "zamansal olarak alakalı" olarak adlandırmayı seviyorum, yani zamanlamaya dayalı olarak alakalılar.
Öte yandan, ARIA 1.1 şöyle der:
[
aria-hidden
durumu] bir öğenin erişilebilirlik API'sine açık olup olmadığını gösterir.
Başka bir deyişle, aria-hidden="true"
olan öğeler, çoğu yardımcı teknolojinin onurlandırdığı erişilebilirlik ağacından kaldırılır ve aria-hidden="false"
olan öğeler kesinlikle ağaca maruz kalacaktır. aria-hidden' özniteliği olmayan öğeler "undefined (default)" durumundadır, yani kullanıcı aracıları bu öğeyi oluşturmasına bağlı olarak ağaca göstermelidir. Örneğin, bir kullanıcı aracısı, metin rengi arka plan rengiyle eşleşiyorsa onu kaldırmaya karar verebilir.
Şimdi anlambilimi karşılaştıralım. Henüz "zamansal olarak ilgili" olmayan, ancak gelecekte ilgili hale gelebilecek bir öğe için hidden
kullanmak uygundur, ancak *aria-hiddenkullanmak uygun değildir (bu durumda
hiddenniteliğini kaldırmak için dinamik komut dosyaları kullanırsınız). Tersine, her zaman alakalı olan ancak erişilebilirlik API'sini karmaşıklaştırmak istemediğiniz bir öğe için
aria-hiddenkullanmak, ancak
hidden` kullanmamak uygundur; bu tür öğeler, kullanıcının tüketmesi için gerekli olmayan simgeler ve/veya görüntüler gibi "görsel yetenekler" içerebilir.
Bu semantiklerin tarayıcılarda/kullanıcı aracılarında öngörülebilir etkileri vardır. Bir ayrım yapmamın nedeni, kullanıcı aracısı davranışının önerilmesi, ancak şartnameler tarafından gerektirilmemesidir.
Gizli‖ niteliği, bir öğeyi yazıcılar ve ekran okuyucular da dahil olmak üzere tüm sunumlardan gizlemelidir (bu aygıtların HTML özelliklerine uyduğu varsayılırsa). Bir öğeyi görsel medyanın yanı sıra erişilebilirlik ağacından da kaldırmak istiyorsanız, hidden
işinizi görecektir. Ancak, sırf bu etkiyi istediğiniz için hidden
kullanmayın. Önce hidden
seçeneğinin anlamsal olarak doğru olup olmadığını kendinize sorun (yukarıya bakın). Eğer hidden
semantik olarak doğru değilse, ancak yine de öğeyi görsel olarak gizlemek istiyorsanız, CSS gibi diğer teknikleri kullanabilirsiniz.
aria-hidden="true"` içeren öğeler erişilebilirlik ağacına maruz kalmaz, bu nedenle örneğin ekran okuyucular bunları duyurmaz. Bu teknik, farklı kullanıcılara farklı deneyimler sağlayacağından dikkatli kullanılmalıdır: erişilebilir kullanıcı aracıları bunları duyurmaz/işlemez, ancak görsel aracılarda yine de işlenirler. Bu, doğru yapıldığında iyi bir şey olabilir, ancak kötüye kullanılma potansiyeline sahiptir.
Son olarak, iki nitelik arasında sözdizimi açısından bir fark vardır.
'gizli' bir boolean özniteliktir, yani öznitelik mevcutsa, sahip olabileceği değer ne olursa olsun doğrudur ve öznitelik yoksa yanlıştır. Doğru durum için en iyi uygulama ya hiç değer kullanmamak (<div hidden>...</div>
) ya da boş dize değeri kullanmaktır (<div hidden="">...</div>
). Hidden="true"değerini önermem, çünkü kodunuzu okuyan/güncelleyen biri,
hidden="false"` değerinin tam tersi bir etki yaratacağı sonucuna varabilir ki bu kesinlikle yanlıştır.
Buna karşın, aria-hidden
sonlu bir değer listesinden birine izin veren bir sıralanmış niteliktir. Eğer aria-hidden
niteliği mevcutsa, değeri ya "true"
ya da "false"
olmalıdır. Eğer "undefined (varsayılan)" durumunu istiyorsanız, özniteliği tamamen kaldırın.
Daha fazla okuma: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content