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

Sıradaki ders: Özet - Bileşen kütüphanesi iskeleti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler