States ve properties

aria-* durum ve özelliklerini doğru kullanırsın.

State mi, property mi?

ARIA öznitelikleri iki kategoride toplanır. State (durum), öğenin o anki halini anlatır ve sık değişir: aria-expanded, aria-hidden, aria-busy. Property (özellik) ise daha kalıcıdır: aria-label, aria-labelledby, aria-roledescription.

Ayrım sözcüklerde değil, anlamdadır. Bir menü açıkken aria-expanded="true", kapalıyken "false" olur; bu değer kullanıcı her tıkladığında değişir. Oysa aria-label bir kez yazılır, nadiren güncellenir.

aria-expanded ile açılır öğe

Bir açılır menü, accordion ya da detay kutusu açıp kapandığında aria-expanded güncellenir. Açıkken "true", kapalıyken "false" yazılır. Ekran okuyucu bunu görünce 'genişletildi' ya da 'daraltıldı' diye duyurur.

<button aria-expanded="false" aria-controls="menu-1">Menüyü aç</button> örneğinde düğme kapalı bir menüyü yönetir. aria-controls ise düğmenin denetlediği öğenin id'sini taşır; böylece ikisi ilişkilendirilir. İki özniteliği birlikte kullanmak ilişkiyi tam kurar.

HTML yerel özniteliği varsa ARIA ekleme

Bir <button disabled> zaten devre dışıdır; üstüne aria-disabled="true" yazmak gereksizdir. Yerel HTML özniteliği varsa onu kullanın; ARIA yalnızca HTML karşılığı yoksa devreye girer.

Örneğin bir <div role="button"> yaparsanız disabled HTML özniteliği çalışmaz; o zaman aria-disabled="true" yazmanız gerekir. Temel ilke: önce yerel HTML, sonra ARIA. Bu hem kodu kısa tutar hem de tutarsızlığı engeller.

Uygulama Açılır menü başlığı ve içeriği

Body içine bir <button> ekle; aria-expanded özniteliğine false, aria-controls özniteliğine menu-1 ver. Düğme metni Menüyü aç olsun. Body içine bir <div> ekle; id özniteliğine menu-1, role özniteliğine menu ver. İçine bir <a href="/ayarlar">Ayarlar</a> bağlantısı koy.

Örnek çözümü göster

<body>
  <button aria-expanded="false" aria-controls="menu-1">Menüyü aç</button>
  <div id="menu-1" role="menu">
    <a href="/ayarlar">Ayarlar</a>
  </div>
</body>

Kendini test et

Hangisi bir state'tir?
- aria-expanded
- aria-label
- aria-labelledby
- aria-roledescription
Cevabı göster

aria-expanded — Doğru. aria-expanded bir state'tir; açılır öğenin açık/kapalı durumunu bildirir.

aria-hidden değerini tamamla

<span aria-hidden="____">✓</span>

Cevabı göster

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

Özniteliği anlamıyla eşleştir

aria-expanded="true"

Açılır öğe açık
aria-expanded="false"

Açılır öğe kapalı
aria-hidden="true"

Süs öğe gizli
aria-disabled="true"

Öğe devre dışı

Sıradaki ders: Grid ve tree

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler