Web Erişilebilirliği (a11y): Temel İlkeler

Web dünyasında "a11y" kısaltmasını görmüşsünüzdür: "accessibility" kelimesinin baş ve son harfleri arasında 11 harf bulunduğu için bu şekilde kısaltılmış. Güzel bir detay, ama asıl mesele çok daha derin: yazdığımız her satır kod, birisinin hayatını kolaylaştırabilir ya da bir duvarın arkasında bırakabilir.

Erişilebilirlik Neden Önemli?

Dünya genelinde yaklaşık 1,3 milyar insan bir tür engellilik ile yaşıyor. Bunların bir kısmı kalıcı (görme kaybı, motor kısıtlamalar), bir kısmı geçici (kırık el, ameliyat sonrası) ve bir kısmı bağlamsal (parlak güneşte ekrana bakmak, gürültülü ortamda ses açamamak). Erişilebilir bir web sitesi bu üç grubu da kapsar. Başka bir deyişle, erişilebilirlik bir azınlık meselesi değil; hepimizin bir noktada ihtiyaç duyduğu bir zemin.

Hukuki boyutu da göz ardı etmemek gerekiyor. AB'nin Web Erişilebilirlik Direktifi ve birçok ülkedeki benzer düzenlemeler, kamu kurumlarını ve giderek artan biçimde özel şirketleri erişilebilir arayüzler sunmaya zorluyor.

WCAG: Rehberimiz

Web Content Accessibility Guidelines (WCAG), W3C tarafından yayımlanan ve bugün dünya genelinde referans alınan kılavuzdur. WCAG 2.1 ve 2.2 sürümleri dört temel ilke etrafında şekillenir; bu ilkeler POUR kısaltmasıyla anılır:

• P – Perceivable (Algılanabilir): İçerik, yalnızca tek bir duyuya bağlı olmamalı. Görsellerin alt metni olmalı, videolarda altyazı bulunmalı.
• O – Operable (İşletilebilir): Tüm işlevler klavye ile kullanılabilmeli. Fare zorunluluğu, motor engeli olan kullanıcıları dışarıda bırakır.
• U – Understandable (Anlaşılabilir): Dil sade olmalı, formlar anlamlı hata mesajları vermeli, sayfa tahmin edilebilir davranmalı.
• A – Robust (Sağlam): İçerik, farklı tarayıcılar ve yardımcı teknolojilerle (ekran okuyucular vb.) uyumlu olmalı.

WCAG uyum seviyeleri A, AA ve AAA şeklinde sıralanır. Pratikte AA hedeflenmesi beklenen standarttır.

Kod Yazarken Dikkat Edilmesi Gerekenler

Teoriden pratiğe geçmek için birkaç somut adım:

1. Anlamlı HTML kullanın. <div> yerine <button>, <nav>, <main>, <article> gibi semantik etiketler hem ekran okuyuculara hem de arama motorlarına net mesaj verir. 2. Renk kontrastına dikkat edin. WCAG AA için normal metin 4,5:1, büyük metin ise 3:1 kontrast oranı ister. Tarayıcı eklentileriyle bunu saniyeler içinde test edebilirsiniz. 3. Focus yönetimini ihmal etmeyin. Klavye ile gezinen kullanıcı, odak noktasını (focus) her zaman görebilmeli. outline: none yazıp bırakmak ciddi bir sorun yaratır. 4. ARIA'yı doğru kullanın. aria-label, aria-live, role gibi özellikler ekran okuyucuları yönlendirir; ancak anlamsız ya da yanlış kullanıldığında işleri daha da zorlaştırır. "ARIA olmadan HTML'i doğru kullan, gerektiğinde ARIA ekle" prensibi iyi bir başlangıç noktasıdır. 5. Otomatik testleri bir başlangıç noktası olarak görün. axe, Lighthouse veya WAVE gibi araçlar sorunların yaklaşık %30-40'ını yakalar. Geri kalanı için manuel test ve gerçek kullanıcı geri bildirimi şart.

Küçük Değişiklikler, Büyük Fark

Erişilebilirlik çoğu zaman büyük bir mimari değişiklik gerektirmez. Doğru alt metni yazmak, renk paletini biraz ayarlamak, bir <label> etiketi eklemek; bunların her biri biri daha iyi bir deneyim sunar. Üstelik bu iyileştirmeler SEO'yu, sayfa hızını ve genel kod kalitesini de olumlu etkiler.

Sonuç olarak erişilebilirlik, "ekstra" bir özellik değil; iyi yazılmış bir ürünün doğal çıktısıdır. Bir dahaki sprint planlamasında bir veya iki a11y görevini backlog'a almak, en anlamlı teknik borcun ödenme biçimlerinden biri olabilir.