WCAG ve ARIA

Erişilebilirlik Nedir

Erişilebilirlik (accessibility, kısaca a11y), bir sitenin engeli olan ya da olmayan herkes tarafından algılanabilmesi, kullanılabilmesi ve anlaşılabilmesidir. Kitle küçük değil: Dünya Sağlık Örgütü'ne göre 1,3 milyardan fazla kişi, yani dünya nüfusunun yaklaşık %16'sı bir engelle yaşıyor ve nüfus yaşlandıkça bu sayı artıyor.¹

Erişilebilirlik yalnızca kalıcı engelleri kapsamaz:²

• Kalıcı: Görme, işitme, motor ya da bilişsel bir engel.

• Geçici: Bir kaza, ameliyat ya da ilaç nedeniyle kısa süreli yaşanan kısıtlar (kırık kol, göz ameliyatı).

• Durumsal: Ortamdan gelen kısıtlar; örneğin gürültülü bir yerde sesi duyamamak.

Yani altyazı, klavyeyle kullanım ya da net etiketler herkesin işine yarar.

WCAG 2.2

Web Content Accessibility Guidelines (WCAG), W3C'nin web içeriğinin erişilebilirliği için yayımladığı standarttır. Güncel sürüm WCAG 2.2'dir: Ekim 2023'te yayımlandı, Aralık 2024'te güncellendi ve 2.1'e 9 yeni başarı kriteri ekledi. Aynı zamanda ISO standardıdır (ISO/IEC 40500:2025).³

WCAG 2.2'ye uyan içerik 2.1 ve 2.0'a da uyar; tek istisna 2.2'de kaldırılan 4.1.1 Parsing kriteridir.³

Dört ilke: POUR

Kriterler dört ilke altında toplanır.³ İlkelerin İngilizce baş harfleri POUR kısaltmasını oluşturur:

A, AA, AAA

Her kriter üç seviyeden birindedir: A (en temel), AA ve AAA (en sıkı).³ Pratikte hedef AA'dır. WCAG'a atıf yapan Avrupa ve Kuzey Amerika yasaları neredeyse her zaman AA ister; AAA ise bazı içerikler için karşılanması mümkün olmadığından WCAG'ın kendisi tüm site için AAA'yı genel politika olarak önermez.⁴

Yasal durum

European Accessibility Act (EAA), AB'de e-ticaret, bankacılık, e-kitap, ulaşım hizmetleri, akıllı telefon ve bilgisayar gibi ürün ve hizmetler için ortak erişilebilirlik kuralları koyan bir direktiftir.⁵ 28 Haziran 2025'ten beri uygulanıyor; 10 kişiden az çalışanı ve 2 milyon avronun altında cirosu olan mikro işletmeler bazı yükümlülüklerden muaf.⁶ W3C, EAA için başvurulan sürümü WCAG 2.2 olarak listeler; EAA'ya uyum için çalışan kuruluşların çoğu WCAG'ı ve onu içeren Avrupa standardı EN 301 549'u kullanır.⁷³ AB'ye ürün ya da hizmet satan bir site yapıyorsanız bu sizi doğrudan ilgilendirir.

WCAG 3 ise hâlâ taslaktır; birkaç yıl daha tamamlanması beklenmiyor ve tamamlandığında da WCAG 2'nin yerini hemen almayacak. W3C'nin bugün için önerisi WCAG 2.2'yi karşılamaktır.⁸

ARIA: Ne Zaman Gerekir

HTML dersindeki kuralı hatırlayın: anlamı ve davranışı veren yerel bir HTML elementi varsa ARIA değil o kullanılır. W3C'nin ARIA rehberi bunu daha sert söyler: "No ARIA is better than bad ARIA." Yanlış ARIA, ekran okuyucu kullanıcısına ekranda olmayan bir şeyi anlatır.⁹

Sorun yaygın: 2026'da bir milyon ana sayfanın %82,7'si ARIA kullanıyor ve sayfa başına ortalama 133'ten fazla ARIA attribute'u var; bu sayı bir yılda %27 arttı.¹⁰

ARIA (WAI-ARIA) üç şey ekler: rol (elementin ne olduğu), özellik (ek anlam, örneğin bağlı etiket) ve durum (açık mı, seçili mi gibi değişen bilgi).¹¹ Yalnızca erişilebilirlik ağacını değiştirir; klavye davranışı, odak ya da tıklama eklemez, bunları JavaScript ile sizin yazmanız gerekir.¹¹¹²

Erişilebilir İsim

Her etkileşimli elementin bir erişilebilir isim'i (accessible name) olmalıdır; ekran okuyucu elementi bu isimle duyurur. Çoğu zaman isim zaten HTML'den gelir: butonun metni, <label>. HTML'in yetmediği üç durum için üç attribute vardır.

aria-label

Görünür metni olmayan bir element için isim tanımlar. Tipik örnek yalnızca ikon içeren bir butondur.¹³

<button type="button" aria-label="Kapat" onClick={onClose}>
  <XIcon aria-hidden="true" />
</button>

aria-label yalnızca etkileşimli elementlerde, widget'larda, landmark'larda ve görsellerde güvenilir çalışır; düz bir <div> ya da <span>'e (rolü generic olan elementlere) isim vermez.¹³

aria-labelledby

İsmi sayfada zaten görünen bir metinden alır; değer, o metnin id'sidir. Birden fazla id boşlukla yazılabilir, isim bu sırayla birleşir.¹⁴

<h2 id="sepet-baslik">Sepetiniz</h2>
<ul aria-labelledby="sepet-baslik">…</ul>

aria-describedby

İsme ek olarak daha uzun bir açıklama bağlar: ipucu, kural ya da hata mesajı. İsim kısa olmalı, açıklama ayrıntıyı taşır.¹⁵

<label htmlFor="sifre">Şifre</label>
<input id="sifre" type="password" aria-describedby="sifre-ipucu" />
<p id="sifre-ipucu">En az 12 karakter.</p>

Öncelik sırası

Birden fazla kaynak varsa aria-labelledby, aria-label'ı ve <label>'ı ezer; aria-label de elementin kendi metnini ezer.¹⁴¹⁶ Bu yüzden ikisini aynı elemente yazmayın.¹³

Durum Attribute'ları

Ekranda renkle ya da ikonla gösterdiğiniz durum ekran okuyucuya kendiliğinden geçmez. React'te bu attribute'ları state'e bağlarsınız.

• aria-expanded: Bir paneli açıp kapatan kontrolün üzerine yazılır (panelin değil), true/false alır. Kontrol edilen elemente aria-controls ile işaret edilebilir.¹⁸

• aria-pressed: Butonu açık/kapalı bir toggle'a çevirir. Durum değişince etiketi değiştirmeyin: "Sessize al" etiketi aynı kalır, durum aria-pressed ile söylenir.¹⁹

• aria-current: Bir grup içinde şu anki öğeyi işaretler; navigasyonda o anki sayfanın linki için aria-current="page". Bir grupta yalnızca bir öğe current olur.²⁰

function Accordion({ title, children }: { title: string; children: React.ReactNode }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button type="button" aria-expanded={open} aria-controls="panel-1" onClick={() => setOpen(!open)}>
        {title}
      </button>
      <div id="panel-1" hidden={!open}>
        {children}
      </div>
    </>
  );
}

Tailwind kullanıyorsanız aria-expanded: variant'ı ile stili de aynı attribute'a bağlayabilirsiniz; durum ve görünüm tek yerden yönetilir.

Live Region

Sayfa yenilenmeden değişen içerik (sepete eklendi, kaydedildi, 3 sonuç bulundu) ekran okuyucuya duyurulmaz. Bunun için live region kullanılır.¹¹

• aria-live="polite": Değişiklik kullanıcı boşta kalınca okunur. Varsayılan tercih budur.²¹

• aria-live="assertive": O an okunan her şeyi keser; yalnızca acil durumlar için, az kullanın.²¹

• role="status": Örtük olarak aria-live="polite" taşır; kesmeden bilgi veren durum mesajları içindir. Mesaj gelince odağı oraya taşımayın.²²

<p role="status">{saved ? "Değişiklikler kaydedildi." : ""}</p>

aria-hidden

aria-hidden="true" bir elementi ve tüm çocuklarını erişilebilirlik ağacından çıkarır ama ekranda görünmeye devam eder. Yan yana metni olan süs ikonları için idealdir.²³

Karmaşık Widget'lar

Tab, combobox, menü, tree gibi HTML'de karşılığı olmayan bileşenler için başvuru kaynağı WAI-ARIA Authoring Practices Guide (APG)'dir. Otuzdan fazla kalıbın her biri için hangi rolün, durumun ve klavye davranışının gerektiğini anlatır ve örnek uygulama verir.²⁴ APG örnekleri öğrenmek içindir; üretime almadan önce tarayıcı ve ekran okuyucularda test edilmeleri gerekir.⁹

Bunları sıfırdan yazmak yerine çoğu projede headless (stilsiz) bir kütüphane kullanılır:

• Radix Primitives: WAI-ARIA kalıplarını izler; rolleri, durumları, odak ve klavye davranışını yönetir. Etiketleri vermek yine sizin işiniz.²⁵

• React Aria: Adobe'nin 50'den fazla bileşenlik kütüphanesi; W3C'ye göre semantik ve klavye davranışı uygular, ekran okuyucularla test edilir, overlay'lerde odağı yönetir.²⁶

Detaylı Öğrenmek İçin

• Standart: W3C'nin WCAG 2 genel bakışı; sürümler, ilkeler ve seviyelerin resmi özeti.³

• Widget kalıpları: APG'de yapmak istediğiniz bileşenin sayfası, klavye tablosuyla birlikte.²⁴

• Etiketleme stratejisi: Adrian Roselli'nin etiketleme yöntemlerini öncelik sırasına koyduğu yazı.¹⁷

• Konuşma: Siddharth Kshetrapal'ın GitHub'da erişilebilir React bileşenleri kurmayı VoiceOver ile gösterdiği 29 dakikalık konuşma (React Summit 2024).²⁷

• Konuşma: Kat Shaw'un ARIA'ya başlangıç konuşması; ne zaman ARIA, ne zaman yerel HTML (A11yTalks, Ağustos 2024).²⁸