Erişebilirlik, Markanızın İş Geliştirme Fırsatıdır
Web erişebilirliği (Web Accessibility), yalnızca engelli kullanıcılar için değil; herkes için tasarım anlamına gelir. Dünya Sağlık Örgütü'ne göre %15 oranında bireyler (%1 milyar kişi) yetersiz görmektedir. Google'ın verilerine göre, %70'inden fazla kullanıcı cihazlarından erişim sağladığı mobil cihazlarda bile erişebilirlik kullanıcı deneyimini doğrudan etkiler. Erişebilir bir web sitesi, daha geniş bir kitleye ulaşır, daha uzun süre kalır ve daha yüksek dönüşüm sağlar. Google, erişebilirlik skoru olarak Core Web Vitals içinde erişilebilirlik faktörlerini değerlendirir. Bu nedenle erişebilirlik web tasarımı, yasal bir gereklilik değil; stratejik bir rekabet avantajıdır. Bu rehberde, WCAG 2.1/2.2 standartlarını, ARIA etiketlerini, semantik HTML yapılarını ve erişilebilir UI/UX tasarım ilkelerini adım adım inceleyeceğiz.
WCAG 2.1/2.2 ve POUR İlkeleri
WCAG (Web Content Accessibility Guidelines), erişebilir web içeriği oluşturmak için kabul edilmiş uluslararası standarttır. WCAG dört temel ilkeler etrafında döner: Perceivable (Algılanabilir), Operable (İşlenebilir), Understandable (Anlaşılabilir) ve Robust (Güçlü). Bu ilkeler — kısacası "POUR" — tüm erişebilirlik çabalarının temelini oluşturur.
- Algılanabilir (Perceivable): Kullanıcıların içeriği görmesi, duyması veya dokunması gerekir. Görüntüler için alternatif metin, videolar için altyazı veya transkript gereklidir.
- İşlenebilir (Operable): Kullanıcılar klavye, fare, dokunmatik ekran veya ses komutlarıyla tüm işlevlere erişebilmelidir.
- Anlaşılabilir (Understandable): Metinler anlaşılır, gezinme tutarlı ve hatalar açıklayıcıdır.
- Güçlü (Robust): İçerik tüm modern tarayıcılar tarafından doğru işlenmelidir.
WCAG seviyeleri şöyledir: A (en temel), AA (ortak), AAA (en yüksek). Çoğu kurum, AA seviyesini hedefler. AA seviyesi, Google'ın sitenizin erişebilirlik puanını etkiler.
İyi Uygulama: Semantik HTML ve ARIA Etiketleri
Semantik HTML — <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> — tarayıcılar ve ekran okuyucular için doğal bir harita çizer. ARIA (Accessible Rich Internet Applications) rolleri, dinamik içeriklerin erişilebilirliğini sağlar. Örneğin bir buton için role="button", aria-label="Menüyü kapat" ve aria-expanded="false" ekleyerek, ekran okuyucu kullanıcıları butonun durumunu anlar.
ARIA Canlı Bölgeleri (Live Regions)
Dinamik güncellenen içerikler — bildirimler, otomatik kaydetme durumu, form hataları — için aria-live ve aria-atomic kullanın. Bu özellikler, ekran okuyucunun güncellemeyi anında duymasını sağlar. Örneğin bir formda hata mesajı gösterildiğinde, aria-live="assertive" hatasını hemen duyurur.
Odak Yönetimi ve Klavye Navigasyonu
Mobil ve masaüstü kullanıcıları arasındaki fark, klavyeyle gezinme yeteneğidir. Tüm etkileşimli öğeler — bağlantılar, butonlar, form alanları, menüler — klavye ile tıklanabilir olmalıdır. Sekme sırası (Tab order), mantıklı bir sırada olmalı ve görsel odak göstergesi (focus indicator) net olmalı. Özellikle özel bileşenlerde custom dropdown, modal, carousel için tabindex yönetimi kritiktir. Bir div yerine <button> kullanmak, klavye desteğini otomatik sağlar.
Görme ve Kontrast Standartları
Metin ve arka plan renkleri arasındaki kontrast oranı WCAG AA standardına göre en az 4.5:1 (normal metin), 3:1 (büyük metin) olmalıdır. AAA standartları sırasıyla 7:1 ve 4.5:1'dir. Gri tonlarda kalmazsanız, kırmızı ve yeşil karşısında kontrastı özellikle kontrol edin — bu renk kombinasyonu renk körlüğü kullanan yüzde yetmiş kullanıcı için zorluk yaratır. Görsellerdeki önemli bilgiler yalnızca renk ile iletilmemeli; metin etiketleri, desenler ve simgeler ekleyin.
Yüksek Kontrast Modu ve Kullanıcı Tercihleri
CSS ile prefers-contrast: more ve prefers-color-scheme: dark sorguları kullanarak, kullanıcıların sistem tercihlerine göre otomatik yüksek kontrast veya karanlık mod sağlayın. Bu, özellikle yaşlı kullanıcılar için görme konforunu %40 artırabilir.
Multimedia Erişebilirliği: Altyazı, Transkript ve Ses Açıklaması
Videolar için otomatik altyazı yeterli değildir — insan onaylı altyazılar gereklidir. Google'ın otomatik altyazı doğruluğu %65'tir; bu, anlama ve tutarlılık açısından ciddi kusurlara yol açar. Ses açıklamaları (audio description), görme engelli kullanıcıların video içeriğinin görsel kısımlarını anlamalarını sağlar. Transkriptler, sadece erişebilirlik değil; SEO açısından da faydalıdır. Google, sayfa içi metin olarak işler.
Etkileşimli Medya ve Zamanlandırılmış İçerik
<video> ve <audio> etiketlerinde kontrol panelleri (captions, playback speed, fullscreen) erişebilir olmalıdır. JavaScript tabanlı video oynatıcılar, klavye kontrolü ve ARIA desteği sunmalıdır. Örneğin YouTube'un iframe'i, iç içe geçmiş bir oynatıcıyı destekler; ancak özel oynatıcılar bu desteği otomatik sağlamaz.
Mobil ve Dokunmatik Erişebilirlik
Mobil cihazlarda dokunmatik alan boyutu, erişebilirliğin en kritik unsurlardan biridir. Dokunma hedeflerinin (tıklanabilir öğelerin) minimum 44x44 CSS piksel olması, WCAG standartlarıdır. Kaydırma, yumuşak kaydırma ve kaydırma hareketleri takip etmelidir. Hareket hassasiyetini azaltma (prefers-reduced-motion) özelliği, vertigo ve sensör hipersensitivitesi kullanan kullanıcılar için hayati kadar, tüm kullanıcılar için tercih ayarıdır.
Hareket ve Titremayı Azaltma
Bazı kullanıcılar CSS animasyonlarından ve JavaScript'ten kaynaklanan hareketlerden baş ağrısı, migren veya sensör hipersensitivitesi nedeniyle etkilenirler. @media (prefers-reduced-motion: reduce) sorgusuyla tüm animasyonları ve geçişleri devre dışı bırakın. Örneğin scroll-behavior: smooth yerine scroll-behavior: auto kullanın. Bu durum, Google Lighthouse puanınızı iyileştirir.
Erişebilirlik Testleri ve En İyi Uygulamalar
Erişebilirlik, yalnızca geliştirme sonrasında değil; tasarım ve içerik aşamasında entegre edilmelidir. İş akışınıza erişilebilirlik kontrol listeleri ekleyin:
- Tasarımda renk kontrolü: Tüm renk kombinasyonlarını Color Oracle veya Stark uzantılarıyla test edin.
- Anahtar kelime denetimi: Tüm metin bağlantıları, "buraya tıkla" yerine açıklayıcı metinler içermeli.
- Yapısal denetim: Semantik HTML etiketlerini ve ARIA rolleri kontrol edin.
- Test araçları: Lighthouse Accessibility panel, axe DevTools, WAVE ve NVDA/VoiceOver ekran okuyucuları.
Ekran Okuyucu Uyumluluğu
Ekran okuyucular (NVDA, JAWS, VoiceOver, TalkBack) içerikleri farklı şekilde okur. Sayfa başlıklarının (H1-H6) mantıklı bir hiyarşiye sahip olması kritiktir. Görsel olarak gizlenmiş metin (class="sr-only") kullanarak, ekran okuyucu için ek bağlam sağlayın. Odak sırası, görsel sırayla aynı olmalı.
Sonuç ve Eylem Planı
Web erişebilirliği, yalnızca yasal bir uyumluluk arka planı — dijital inklüzyonun ve işletmenizin büyüme stratejisinin temelidir. Erişebilir bir web sitesi, daha geniş kitlelere ulaşır, Google puanlarını artırır, yasal riskleri azaltır ve markanızı daha güçlü kullanıcı merkezli bir algıya kavuşturur. Dinamik Dizayn olarak, erişebilirlik denetimlerini, WCAG uyumluluk testlerini ve ARIA entegrasyonunu web tasarım sürecinizin her aşamasında uyguluyoruz. Web sitenizin erişilebilirlik skorunu %50 artırmak için bizimle iletişime geçin.