Web erişilebilirliği (WCAG) ve ARIA kodlama rehberi

Yorum yapılmamış

WCAG 2.2 Temel Prensipleri (POUR)

WCAG standartları dört ana ilke üzerine kuruludur:

  • Algılanabilir (Perceivable): Bilgi ve kullanıcı arayüzü bileşenleri kullanıcıların algılayabileceği biçimde sunulmalıdır.
  • Çalıştırılabilir (Operable): Tüm arayüz bileşenleri ve navigasyon klavye ile eksiksiz kontrol edilebilmelidir.
  • Anlaşılabilir (Understandable): İçerik ve işlem akışı öngörülebilir, açık ve net olmalıdır.
  • Sağlam (Robust): İçerik; ekran okuyucular (Orca, NVDA, TalkBack vb.) dahil tüm yardımcı teknolojiler tarafından kararlı biçimde yorumlanabilmelidir.

Semantik HTML ve İlk Kural

WAI-ARIA kurallarının birinci maddesi şudur: Eğer yerel (native) bir HTML etiketi işinizi görüyorsa, ARIA kullanmayın.

Bir <div> etiketine tıklama özelliği verip ARIA ile düğme yapmaya çalışmak yerine doğrudan <button> kullanmak her zaman en kararlı yöntemdir. <button> etiketi klavye odağını (Tab), Enter/Boşluk tuşu tetikleyicilerini ve ekran okuyucu bildirimlerini varsayılan olarak sağlar.

Temel ARIA Nitelikleri ve Kullanım Alanları

1. İsimlendirme ve Açıklama:

  • aria-label: Görsel olarak metin içermeyen (örneğin sadece simge bulunan) butonlar veya bağlantılar için doğrudan ekran okuyucuya metin iletir.
  • aria-labelledby: Ekrandaki başka bir elementin ID’sini referans alarak o elementin metnini mevcut bileşenin adı yapar.
  • aria-describedby: Bir form alanının altına eklenen hata mesajı veya açıklama notunu alana bağlar; kullanıcı alana odaklandığında açıklama otomatik okunur.

2. Durum ve Özellik Bildirimi:

  • aria-expanded="true|false": Açılır menüler (dropdown), akordeonlar ve gezinme panellerinin açık/kapalı durumunu bildirir.
  • aria-current="page": Kullanıcının sitede o an hangi sayfada olduğunu menü üzerinde netleştirir.
  • aria-hidden="true": Sadece dekoratif amaçlı kullanılan ikonları ve görsel süslemeleri ekran okuyucu akışından gizler.
  • aria-required="true" / aria-invalid="true": Zorunlu alanları ve doğrulama hatası almış form kutularını sisteme aktarır.

3. Canlı Bölgeler (Live Regions):

  • aria-live="polite": Sayfa yenilenmeden arka planda güncellenen içeriklerde (sepet özeti, bildirim mesajları vb.) ekran okuyucunun kullanıcının konuşmasını bölmeden güncel veriyi okumasını sağlar.
  • aria-live="assertive": Acil durum ve kritik hata bildirimlerinde konuşmayı anında keserek uyarıyı seslendirir.

Örnek Uygulama Şablonu

HTML

<!-- Erişilebilir Arama Formu -->
<form role="search">
    <label for="site-search">Sitede Ara:</label>
    <input 
        type="search" 
        id="site-search" 
        name="q" 
        aria-describedby="search-help" 
        required
    >
    <span id="search-help" class="visually-hidden">Lütfen aramak istediğiniz anahtar kelimeleri giriniz.</span>
    <button type="submit" aria-label="Aramayı Başlat">Ara</button>
</form>

<!-- Açılır Menü Butonu -->
<button 
    type="button" 
    aria-expanded="false" 
    aria-controls="mobile-menu"
    id="menu-btn"
>
    Menü
</button>

<nav id="mobile-menu" aria-labelledby="menu-btn" hidden>
    <ul>
        <li><a href="/" aria-current="page">Ana Sayfa</a></li>
        <li><a href="/hakkimizda">Hakkımızda</a></li>
        <li><a href="/iletisim">İletişim</a></li>
    </ul>
</nav>

<!-- Dinamik Bildirim Alanı -->
<div id="status-box" aria-live="polite" role="status"></div>

WCAG 2.2 ile Öne Çıkan Kritik Noktalar

  • Odak Görünürlüğü (Focus Visible): Klavye ile gezinirken odak çerçevesi (outline) asla outline: none; ile gizlenmemeli, yüksek kontrastlı ve belirgin olmalıdır.
  • Hedef Boyutu (Target Size): Dokunmatik ve fare ile tıklanabilir tüm kontrol elemanları en az 24×24 CSS pikseli boyutunda (boşluklar dahil) olmalıdır.
  • Klavye Erişilebilirliği: Sayfadaki tüm işlevler klavye ile açılabilmeli, klavye hiçbir pencerede (modal, pop-up) kapana kısılmamalıdır (No Keyboard Trap). Modallar açıldığında odak modalın içine hapsedilmeli, Escape tuşu ile kapatılabilmelidir.
Etiketler

Bir Cevap Yazın