AOM ve accessibility tree
Öğelerin accessibility tree'ye etkisini öğrenirsin.
Accessibility tree nedir?
Tarayıcı, her sayfa için bir DOM'un yanında bir de erişilebilirlik ağacı (accessibility tree) kurar. Bu ağaç, ekran okuyucuların okuduğu yapıdır; her öğenin adı, rolü ve durumu burada saklanır.
Custom elementler, yerleşik etiketlerin aksine örtük bir role sahip değildir. Yani <action-button>, tarayıcı için düğme değildir; rolü, adı ve durumu açıkça verilmelidir. Aksi halde erişilebilirlik ağacında eksik görünür.
Explicit role ve AOM
Custom element için role="button", role="checkbox" gibi açık roller yazılır. Adı aria-label ile, odaklanabilirliği tabindex="0" ile verirsin. Böylece öğe hem ekran okuyucuda hem klavyede doğru çalışır.
AOM (Accessibility Object Model), bu değerleri JS'ten de atamayı amaçlayan yeni bir öneridir: element.role = "button". Bugün için en sağlam yol HTML tarafında role özniteliğini yazmaktır; AOM ise gelecek vaat eden bir katmandır.
Uygulama Erişilebilir action-button yaz
Bir <action-button> custom elementi yaz. Açılış etiketinde şu öznitelikler olsun:
role="button"aria-label="Sepete ekle"(içeriği dolu)tabindex="0"
Etiketin içinde 'Sepete ekle' metni ve </action-button> kapanışı olsun.
Örnek çözümü göster
<action-button role="button" aria-label="Sepete ekle" tabindex="0">
Sepete ekle
</action-button>Kendini test et
-
Bir öğeyi erişilebilirlik ağacından tamamen gizleyen öznitelik nedir?
<div ??="true">Sadece görsel süs</div>- aria-disabled
- aria-hidden
- aria-expanded
- aria-live
Cevabı göster
aria-hidden — Doğru. aria-hidden='true', öğeyi erişilebilirlik ağacından kaldırır.
-
role özniteliği değerini tamamla
<action-button role="____" aria-label="Sepete ekle" tabindex="0">Sepete ekle</action-button>Cevabı göster
<action-button role="button" aria-label="Sepete ekle" tabindex="0">Sepete ekle</action-button> -
Erişilebilirlik özniteliğini anlamıyla eşleştir
- role
- Öğenin türü
- aria-label
- Erişilebilir ad
- tabindex
- Klavye odağı
- aria-hidden
- Ağaçtan gizle