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ışı