Özet - Erişilebilir kart

Tüm ARIA tekniklerini uygulayan erişilebilir bir profil kartı yazarsın.

Bu grupta öğrendiklerimiz

Bu grupta erişilebilir HTML'in temellerini gördün:

ARIA öznitelikleri: role, aria-label, aria-labelledby, aria-describedby
Görsel olarak gizli metin: sr-only
Skip link ile ana içeriğe atlama
Form alanlarını label, required ve aria-invalid ile işaretleme
Tabloları scope, headers ve caption ile adlandırma

Şimdi bunları birleştirip erişilebilir bir profil kartı yazacağız.

Uygulama Erişilebilir profil kartı yaz

Body içine bir <article> ekle. Article'a aria-labelledby="card-title" özniteliğini ekle. Article içine bir <h2 id="card-title"> koy, metni Ayşe Yılmaz olsun. Article içine bir <p> de ekle, metni Geliştirici olsun.

Örnek çözümü göster

<body>
  <article aria-labelledby="card-title">
    <h2 id="card-title">Ayşe Yılmaz</h2>
    <p>Geliştirici</p>
  </article>
</body>

Kendini test et

Tekniği amacıyla eşleştir

aria-labelledby

Adı bir id'den alır
sr-only

Metni görsel olarak gizler
skip link

İçeriğe atlar
caption

Tablo başlığı verir
scope

Sütun ya da satır başlığı

Ek açıklama özniteliğini yaz

<input id="ad" aria-____by="ipucu">
<p id="ipucu">Adınızı yazın.</p>

Cevabı göster

<input id="ad" aria-describedby="ipucu">
<p id="ipucu">Adınızı yazın.</p>

Aşağıdakilerden hangisi doğrudan erişilebilirlik adlandırması için gerekmez?
- tabindex
- aria-label
- colspan
- caption
Cevabı göster

tabindex — Doğru. tabindex klavye sırası içindir, doğrudan adlandırma yapmaz.

Sıradaki ders: Proje: Çok sayfalı site iskeleti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler