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

Anlamsal Fark

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 durumdahiddenniteliğ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çinaria-hiddenkullanmak, ancakhidden` 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.

Etkin Fark

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.

Sözdizimsel Fark

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