Açısal Malzeme ile çalışırken aria niteliğini her yerde görüyorum. Birisi bana aria önekinin ne anlama geldiğini açıklayabilir mi? ama en önemlisi anlamaya çalıştığım şey aria-hiddenve hiddennitelik 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.

hiddenNitelik HTML5'teki yenidir ve söyler tarayıcıları öğeyi görüntüleyecek değil. aria-hiddenMülkiyet söyler ekran okuyucuları onlar elemanı yoksaymalıdır eğer. Daha fazla ayrıntı için w3 belgelerine bir göz atın:

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

Bu standartları kullanmak, engellilerin web'i kullanmalarını kolaylaştırabilir.

Gizli özellik bir boolean özelliğidir (Doğru / Yanlış). Bu öznitelik bir öğe üzerinde kullanıldığında, o öğeyle ilgili tüm içeriği kaldırır. Bir kullanıcı html sayfasını görüntülediğinde, gizli özniteliğe sahip öğeler görünmemelidir.

Misal:

    <p hidden>You can't see this</p>

Aria gizli özellikleri, öğenin ve onun torunlarının TÜMÜNÜN tarayıcıda hala görünür olduğunu, ancak ekran okuyucular gibi erişilebilirlik araçlarında görünmez olacağını belirtir.

Misal:

    <p aria-hidden="true">You can't see this</p>

Bir göz atın bu . Tüm sorularınızı cevaplamalıdır.

Not: ARIA, Erişilebilir Zengin İnternet Uygulamaları anlamına gelir

Kaynaklar: Paciello Group

Anlamsal Fark

HTML 5.2'ye göre :

Bir öğe üzerinde belirtildiğinde, [ hiddenözellik], öğenin henüz sayfanın mevcut durumu ile doğrudan alakalı olmadığını veya artık geçerli olmadığını veya sayfanın diğer bölümleri tarafından yeniden kullanılacağını bildirmek için kullanıldığını belirtir kullanıcı tarafından doğrudan erişime karşı.

Örnekler arasında bazı panellerin görünmediği bir sekme listesi veya bir kullanıcı oturum açtıktan sonra kaybolan bir giriş ekranı yer alır. Bunları “geçici olarak alakalı” olarak adlandırmayı seviyorum, yani zamanlamaya bağlıdır.

Öte yandan ARIA 1.1 diyor ki:

[Durum aria-hidden], bir öğenin erişilebilirlik API'sına maruz kalıp kalmadığını belirtir.

Başka bir deyişle, en yardımcı teknolojiyi onurlandıran erişilebilirlik ağacından öğeler aria-hidden="true"kaldırılır ve birlikte olan öğeler kesinlikle ağaca maruz kalır. Özniteliği olmayan öğeler "tanımsız (varsayılan)" durumundadır, yani kullanıcı aracıları oluşturma işlemine göre onu ağaca göstermelidir. Örneğin, bir kullanıcı aracısı metin rengi arka plan rengiyle eşleşiyorsa kaldırmaya karar verebilir.aria-hidden="false"aria-hidden

Şimdi anlambilimi karşılaştıralım. It kullanımı uygun hidden, ama değil aria-hidden , henüz “geçici ilgili” olmayan bir elemanı için, ama bu gelecekte (bu durumda kaldırmak dinamik komut dosyalarını kullanmak istiyorsunuz ilgili hale gelebilir hiddenniteliğini). Tersine, her zaman alakalı olan, ancak erişilebilirlik API'sını karıştırmak istemediğiniz bir öğede kullanmak uygundur aria-hidden, ancak kullanılmaz hidden; bu tür öğeler, kullanıcının tüketmesi için gerekli olmayan simgeler ve / veya görüntüler gibi “görsel yetenek” içerebilir.

Etkili Fark

Semantik öngörülebilir olması etkileri tarayıcılar / kullanıcı ajanlar. Bir ayrım yapmamın nedeni, kullanıcı aracısı davranışının önerilen , ancak özellikler tarafından gerekli olmamasıdır .

hiddenÖznitelik bir öğe gizlemek gerektiğini tüm yazıcılar ve ekran okuyucular dahil sunumlar, (varsayarak bu cihazlar HTML gözlük onurlandırmak). Bir öğeyi erişilebilirlik ağacından ve görsel medyadan kaldırmak istiyorsanız hiddenhile yapar. Ancak, hidden sadece bu efekti istediğiniz için kullanmayın . hiddenÖnce semantik olarak doğru olup olmadığını kendinize sorun (yukarıya bakın). Eğer hiddenanlam doğru değil, ama yine de görsel öğesi gizlemek istiyorsanız, CSS gibi diğer teknikleri kullanabilirsiniz.

Olan öğeler aria-hidden="true"erişilebilirlik ağacına maruz kalmaz, bu nedenle örneğin ekran okuyucular bunları duyurmaz. Bu teknik, farklı kullanıcılara farklı deneyimler sunacağı için dikkatli bir şekilde kullanılmalıdır: erişilebilir kullanıcı aracıları onları duyurmaz / oluşturmaz, ancak yine de görsel aracılarda oluşturulur. Bu, doğru yapıldığında iyi bir şey olabilir, ancak istismar etme potansiyeline sahiptir.

Sözdizimsel Fark

Son olarak, iki özellik arasında sözdiziminde bir fark vardır.

hiddenbir boole özniteliğidir , yani öznitelik varsa, değeri ne olursa olsun doğrudur ve özniteliği yoksa yanlıştır. Gerçek durumda, en iyi uygulama hiç değer ( <div hidden>...</div>) kullanmamak ya da boş dize değeri ( <div hidden="">...</div>) kullanmaktır. Ben ediyorum değil tavsiye hidden="true"birisi okuma / kodunuzu güncellemeden sonucuna çünkü hidden="false"basitçe yanlıştır tersi etkiye sahip olacak.

aria-hiddenaksine, sonlu değerler listelerinden birine izin veren numaralandırılmış bir özelliktir . aria-hiddenÖznitelik varsa, değeri ya "true"da olmalıdır "false". "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

aria-hidden değerini false olarak ayarlamak ve element.show () üzerinde çalışmak benim için çalıştı.

Örneğin

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

ve geri saklandığında

$(span).attr('aria-hidden', 'true');
$(span).hide();