ARIA ve Erişilebilirlik: label role aria-*
Etiketleri denetimlerle ilişkilendirin, gerektiğinde ARIA rollerini uygulayın ve ekran okuyucu desteği için aria-label ile aria-describedby kullanın.
ARIA ve Erişilebilirlik: label role aria-*, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
ARIA Neden Kullanılır?
ARIA (Erişilebilir Zengin İnternet Uygulamaları), ekran okuyucular gibi yardımcı teknolojilere kullanıcı arayüzü bileşenlerinin amacını, durumunu ve özelliklerini bildiren bir HTML öznitelikleri kümesidir. Özellikle yerel HTML karşılığı bulunmayan özel bileşenler için kullanılır.
ARIA'nın Birinci Kuralı
İşi yerel bir HTML öğesi veya özniteliği yapabiliyorsa ARIA kullanmayın. <button>, her zaman <div role="button"> öğesinden daha iyidir. Yerel HTML, ek bir çaba olmadan erişilebilirlik sağlar.
Bölge Rolleri
ARIA bölge rolleri, ekran okuyucu kullanıcılarının sayfanın bölümleri arasında atlamasını sağlar. Çoğu, anlamsal HTML tarafından örtük olarak belirtilir: <main> → role=main, <nav> → role=navigation. Açık rolleri yalnızca anlamsal bir öğe kullanılmadığında ekleyin.
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
aria-label, bir öğe için görünmez bir erişilebilir ad sağlar. Başvurulabilecek görünür bir metin etiketi olmadığında kullanın. Simge düğmelerinde yaygın olarak kullanılır.
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
aria-labelledby, etiket olarak başka bir öğenin metnine, bir ID başvurusu kullanarak işaret eder. Görünür bir etiket zaten varsa aria-label yerine tercih edilir.
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
aria-describedby, etiketi tamamlayan ek açıklama metnine (örneğin bir hata mesajına veya ipucuna) başvurur. Ekran okuyucular önce etiketi, ardından açıklamayı okur.
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded ve aria-haspopup
Dinamik bileşenlerin durum özniteliklerine ihtiyacı vardır. aria-expanded, bir açılır-kapanır bileşenin (akordeon veya açılır liste) açık mı kapalı mı olduğunu belirtir. Durum değiştiğinde bunu JavaScript ile güncelleyin.
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
aria-hidden="true", bir öğeyi ve tüm alt öğelerini erişilebilirlik ağacından çıkarır. Görünür metinle zaten etiketlenmiş SVG simgeleri gibi dekoratif öğeler için kullanın.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>Canlı Bölgeler: aria-live
aria-live, ekran okuyuculara bu bölgede gerçekleşen değişiklikleri duyurmalarını söyler. polite, kullanıcının mevcut işlemini tamamlamasını bekler. assertive, işlemi hemen keser; bu seçeneği ölçülü kullanın.
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
role="alert", örtük olarak aria-live=assertive anlamına gelir. Hata mesajlarını veya önemli bildirimleri bu role sahip bir öğeye ekleyin; ekran okuyucular bunları hemen duyurur.
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediatelyErişilebilir Form Hataları
Bir alanda hata olduğunda aria-invalid="true" kullanın, hata mesajını aria-describedby ile bağlayın ve role="alert" içeriğini güncelleyin. Bu üç parçalı yaklaşım, ekran okuyucuların gerekli tüm bilgileri aktarmasını sağlar.
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>Kısa Kontrol
Görünür bir metin etiketi olmadığında bir öğenin erişilebilir adını hangi ARIA özniteliği sağlar?
Özet: ARIA Temelleri
ARIA yerine yerel HTML'yi tercih edin. Simge düğmeleri için aria-label kullanın. Görünür etiketlere başvurmak için aria-labelledby kullanın. İpuçları ve hatalar için aria-describedby kullanın. Açılır-kapanır bileşenler için aria-expanded kullanın. Dekoratif içerik için aria-hidden kullanın. Dinamik durum güncellemeleri için aria-live kullanın. Form hataları için aria-invalid + role=alert kullanın.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“ARIA ve Erişilebilirlik: label role aria-*” dersi ücretsiz mi?
Evet — “ARIA ve Erişilebilirlik: label role aria-*” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“ARIA ve Erişilebilirlik: label role aria-*” dersinde ne öğreneceğim?
Etiketleri denetimlerle ilişkilendirin, gerektiğinde ARIA rollerini uygulayın ve ekran okuyucu desteği için aria-label ile aria-describedby kullanın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“ARIA ve Erişilebilirlik: label role aria-*” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Form Denetimleri: input türleri, select, textarea
- ARIA ve Erişilebilirlik: label role aria-*
- Anlamsal HTML5: Anlamsal Yapı ve Div Karmaşası
- Form Doğrulama Öznitelikleri