Ö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,requiredvearia-invalidile işaretleme - Tabloları
scope,headersvecaptionile 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.