Frontend Academy · Ders

ARIA Rolleri ve Öznitelikleri

Yerel HTML'nin yetersiz kaldığı bileşenleri geliştirmek için landmark rolleri, canlı bölgeler ve aria-* özniteliklerini uygulayın.

ARIA Rolleri ve Öznitelikleri, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. 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 Nedir?

ARIA (Accessible Rich Internet Applications), öğelerin rolünü, durumunu ve özelliklerini yardımcı teknolojilere açıklayan bir HTML öznitelikleri kümesidir. Yerel HTML ile ifade edilemeyen özel bileşenler için bir köprü görevi görür.

ARIA'nın İlk Kuralı: ARIA Kullanmayın

Yerel bir öğe ihtiyacınızı karşılıyorsa onu kullanın. <button>, <div role="button"> kullanımından daha iyidir. Yanlış kullanılan ARIA, hiç ARIA kullanılmamasından daha kötüdür — kullanıcıları erişilebilir olduğuna inandırırken onları ortada bırakır.

ARIA Özniteliklerinin Kategorileri

Üç kategori vardır: roller (bir şeyin ne olduğu), özellikler (görece sabit — aria-label, aria-describedby), durumlar (dinamik — aria-expanded, aria-pressed, aria-checked).

Belirgin Bölge Rolleri

Sayfanın ana bölgelerini tanımlar. Çoğunun HTML5 karşılığı vardır ve bunları tercih etmelisiniz.

<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>

<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>

aria-label ve aria-labelledby

aria-label: bir dizeyle erişilebilir ad sağlar. aria-labelledby: ad olarak başka bir öğenin metnine başvurur. Görünür metin olmadığında veya yetersiz kaldığında kullanın.

<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
  <svg>...</svg>
</button>

<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
  <h2 id="settings-title">Settings</h2>
  ...
</section>

İpuçları için aria-describedby

aria-describedby, bir öğeyi daha uzun bir açıklamaya bağlar. Form ipuçları, hata iletileri ve araç ipuçları için kullanışlıdır.

<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>

Açılır İçerik için aria-expanded

Bir paneli açıp kapatan düğmeler aria-expanded = true/false değerini sunmalıdır.

<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
  How do I cancel?
</button>
<div id="faq-1" hidden>
  Visit Settings &gt; Billing to cancel.
</div>

Geçiş Düğmeleri için aria-pressed

Açık/kapalı durumuna sahip düğmeler (sessize alma, kalın yazı) aria-pressed kullanır.

<button aria-pressed="true" onclick="toggleBold()">
  Bold
</button>

Canlı Bölgeler: aria-live

Dinamik olarak güncellenen içerikler (bildirimler, arama sonuçları, hata özetleri), ekran okuyucuların değişiklikleri duyurabilmesi için canlı bir bölgede bulunmalıdır. polite bir duraklama bekler; assertive ise araya girer.

<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>

<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>

role="alert" Kısa Gösterimi

role="alert", aria-atomic içeren ısrarcı bir canlı bölgenin kısa gösterimidir. Ölçülü kullanın — her uyarı kullanıcıyı böler.

Dekoratif İçerik için aria-hidden

aria-hidden="true", bir öğeyi erişilebilirlik ağacından kaldırır. Metin etiketlerinin yanındaki dekoratif simgelerde kullanın — aksi takdirde ekran okuyucular bunları gereksiz yere tekrar duyurur.

<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  Save
</button>

Ekran Okuyucuyla Sınayın

ARIA'nın çalışıp çalışmadığını öğrenmenin tek yolu onu sınamaktır. VoiceOver (macOS/iOS, ücretsiz), NVDA (Windows, ücretsiz), TalkBack (Android, ücretsiz). VoiceOver ile geçirilen 10 dakika, herhangi bir denetim aracından daha fazlasını ortaya çıkarır.

Hızlı Kontrol

Görünür metin etiketi olmayan yalnızca simgeli bir düğmede hangi ARIA özniteliğini ayarlamalısınız?

Özet: ARIA

ARIA; rolü, özellikleri ve durumu yardımcı teknolojilere açıklar. ARIA'ya başvurmadan önce yerel HTML'yi tercih edin. aria-label/aria-labelledby erişilebilir adlar sağlar. İpuçları için aria-describedby kullanılır. Geçişler için aria-expanded/aria-pressed kullanılır. Dinamik duyurular için aria-live kullanılır. Dekoratif içerik için aria-hidden kullanılır. Her zaman gerçek bir ekran okuyucuyla sınayın.

Sıkça Sorulan Sorular

“ARIA Rolleri ve Öznitelikleri” dersi ücretsiz mi?

Evet — “ARIA Rolleri ve Öznitelikleri” 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 Rolleri ve Öznitelikleri” dersinde ne öğreneceğim?

Yerel HTML'nin yetersiz kaldığı bileşenleri geliştirmek için landmark rolleri, canlı bölgeler ve aria-* özniteliklerini uygulayı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 3. dersidir.

“ARIA Rolleri ve Öznitelikleri” 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

← Frontend Academy Sayfasına Dön