ARIA temelleri
role, aria-label, aria-labelledby, aria-describedby kullanırsın.
ARIA nedir?
Bazen HTML etiketleri tek başına bir öğenin amacını anlatmaz. Örneğin bir <div> üzerine tıklanınca açılan bir menü olabilir; ama bu bilgi ekranda görünmez. ARIA (Accessible Rich Internet Applications) tam burada devreye girer: ekran okuyuculara ek bilgi veren öznitelikler ekler.
En sık kullanılanlar: role öğenin görevini, aria-label kısa adını, aria-labelledby başka bir öğeye bağlı adını, aria-describedby ise ek açıklamayı söyler.
role özniteliği
role özniteliği bir öğenin görevini açıkça söyler. Örneğin role="navigation" bir menü, role="search" bir arama kutusu, role="button" ise bir düğme demektir.
Anlamsal etiketler zaten görevini taşıdığından <nav> içine role="navigation" yazmak gereksizdir. ARIA'yı yalnızca HTML'in görevi taşımadığı durumlarda kullan: tıklanabilir bir <div> için role="button" gibi.
Adlandırma öznitelikleri
Bir öğeye erişilebilir ad vermenin üç yolu vardır: aria-label doğrudan kısa metin yazar; aria-labelledby başka bir öğenin id'sine bakar ve onun metnini ad olarak kullanır; aria-describedby ise aynı yöntemle ek açıklama bağlar.
Örnek: <section aria-labelledby="title"> ile section'ın adını, sayfadaki bir <h2 id="title">'dan alırsın. Böylece ad çift sayılmaz; tek yerden değiştirilebilir.
Uygulama Bölüme aria-labelledby ekle
Body içine bir <section> ekle. Section'a aria-labelledby="title" özniteliğini ekle. Section içine bir <h2 id="title"> koy ve metni Bölüm Başlığı olsun.
Örnek çözümü göster
<body>
<section aria-labelledby="title">
<h2 id="title">Bölüm Başlığı</h2>
</section>
</body>Kendini test et
-
Aşağıdakilerden hangisi ARIA özniteliği değildir?
- aria-label
- role
- placeholder
- aria-describedby
Cevabı göster
placeholder — Doğru. placeholder bir input özniteliğidir, ARIA özniteliği değil.
-
role özniteliğini tamamla
<div ____="navigation"> <a href="/ana-sayfa">Ana sayfa</a> </div>Cevabı göster
<div role="navigation"> <a href="/ana-sayfa">Ana sayfa</a> </div> -
Özniteliği amacıyla eşleştir
- aria-label
- Kısa ad doğrudan yazar
- aria-labelledby
- Adı bir id'den alır
- aria-describedby
- Ek açıklama bağlar
- role
- Görevi söyler