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

Sıradaki ders: Saklı başlık

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler