Yanıtlar:
HTML5 ARIA özelliği aradığınız şeydir. Kodunuzda bile bootstrap olmadan kullanılabilir.
Erişilebilir Zengin İnternet Uygulamaları (ARIA) , Web içeriği ve Web uygulamalarını (özellikle Ajax ve JavaScript ile geliştirilenler) engelli kişiler için daha erişilebilir hale getirmenin yollarını tanımlar.
Sorunuz için kesin olmak gerekirse, özelliklerinize ARIA özellik durumları ve modeli adı verilir
aria-labelledby: Geçerli öğeyi etiketleyen öğeyi (veya öğeleri) tanımlar.
aria-hidden (state): Öğenin ve tüm torunlarının yazar tarafından uygulanan hiçbir kullanıcı tarafından görülemediğini veya algılanamayacağını belirtir.
Bu mülklerin birincil tüketicileri, kör insanlar için ekran okuyucular gibi kullanıcı aracılarıdır. Yani bir Bootstrap modal ile durumunda, modal en divbulunur role="dialog". Ekran okuyucu div, bu rolü olan a'nın görünür hale geldiğini fark ettiğinde bunun etiketini söyleyecektir div.
Bazı şeyleri etiketlemenin birçok yolu vardır (ve ARIA ile birkaç yeni öğe), ancak bazı durumlarda mevcut bir öğeyi <label>HTML etiketi kullanmadan etiket (anlamsal) olarak kullanmak uygundur . HTML modları ile etiket genellikle bir <h>başlıktır. Öyleyse Bootstrap modal durumunda eklersiniz aria-labelledby=[IDofModalHeader]ve modal göründüğünde ekran okuyucu bu başlığı söyler.
Genel olarak konuşursak, bir ekran okuyucu DOM öğeleri görünür veya görünmez olduğunda fark eder, bu nedenle aria-hiddenözellik genellikle gereksizdir ve çoğu durumda atlanabilir.
aria-hidden="true"karışıklıklara neden olmamak için anlamlı telaffuzlara sahip olmayan, glifik ikonları gibi dekoratif öğeleri ekran okuyucularından gizleyecektir. İyi uygulama olarak yapmak güzel bir şey.
ARIA işlevselliği değiştirmez, yalnızca ekran okuyucu kullanıcılarına sunulan rolleri / özellikleri değiştirir. WebAIM'ın WAVE araç çubuğu sayfadaki ARIA rollerini tanımlar.
Aria görme engelli kullanıcıların kullanıcı deneyimini geliştirmek için kullanılır. Görme engelli kullanıcılar JAWS, NVDA, gibi ekran okuyucu yazılımlarını kullanarak uygulamada gezinir. Uygulamada gezinirken, ekran okuyucu yazılımı içeriği kullanıcılara duyurur. Aria, ekran okuyucu kullanıcılarının kontrolün rolünü, durumunu, etiketini ve amacını anlamasına yardımcı olan koda içerik eklemek için kullanılabilir
Aria görsel olarak hiçbir şeyi değiştirmez. (Aria da tasarımcılardan korkuyor).
arya gizli:
aria-hidden özelliği, ekran okuyucular (JAWS, NVDA, ...) kullanarak uygulamada gezinen görme engelli kullanıcılar için içeriği gizlemek için kullanılır.
aria-gizli özniteliği true, false değerleri ile kullanılır.
Nasıl kullanılır:
<i class = "fa fa-books" aria-hidden = "true"></i><i>Uygulamada görsel bir değişiklik yapmadan ekran okuyucu kullanıcılarına gizler içeriği üzerinde aria-hidden = "true" kullanmak.
arya etiketli
aria-label özelliği, etiketi ekran okuyucu kullanıcılarına iletmek için kullanılır. Genellikle arama giriş alanının görsel etiketi yoktur (tasarımcılar sayesinde). aria-label kontrol etiketini ekran okuyucu kullanıcılarına iletmek için kullanılabilir
Nasıl kullanılır:
<input type = "edit" aria-label = "search" placeholder = "search">Uygulamada görsel bir değişiklik yok. Ancak ekran okuyucular kontrolün amacını anlayabilir
arya-labelledby
Etiketi iletmek için hem aria-label hem de aria-labelledby kullanılır. Ancak aria-labelledby, sayfada zaten mevcut olan herhangi bir etikete referans vermek için kullanılabilirken, aria-label görsel olarak göstermediğim etiketi iletmek için kullanılır
Yaklaşım 1:
<span id = "sd"> Search </span>
<input type = "text" aria-labelledby = "sd">aria-labelledby, ekran okuyucu kullanıcıları için iki etiketi birleştirmek için de kullanılabilir
Yaklaşım 2:
<span id = "de"> Billing Address </span>
<span id = "sd"> First Name </span>
<input type = "text" aria-labelledby = "de sd">