Erişilebilir web tasarım, yalnızca yasal bir kontrol listesi değildir. Klavye kullanan, görme veya motor beceri farklılığı bulunan, geçici sakatlık yaşayan ya da parlak güneşte telefona bakan kullanıcıların aynı görevi tamamlayabilmesini amaçlar. WCAG 2.2; algılanabilir, kullanılabilir, anlaşılabilir ve sağlam deneyim için ortak bir çerçeve sunar.
Klavye ve odak görünürlüğü
Menü, modal, form, sekme ve kart bağlantıları fare olmadan kullanılabilmelidir. Tab sırası görsel sırayla uyumlu olmalı; odak göstergesi renk ve kalınlık açısından fark edilmelidir. Mobil menü açıldığında odak menü içine taşınmalı, kapandığında tetikleyici düğmeye dönmelidir.
Kontrast ve renk kullanımı
Metin ile arka plan arasında yeterli kontrast sağlayın. Hata, başarı veya seçili durum yalnızca renkle anlatılmamalıdır; ikon ve açıklayıcı metin de kullanılmalıdır. Placeholder, form etiketi yerine geçmez. Açık gri metin estetik görünebilir fakat okunamadığında işlevini kaybeder.
Başlık, bağlantı ve alternatif metin
Başlıklar görsel boyuta göre değil içerik hiyerarşisine göre sıralanmalıdır. “Buraya tıklayın” yerine hedefi açıklayan bağlantılar kullanın. Bilgi taşıyan görsellere bağlama uygun alternatif metin ekleyin; dekoratif görseller boş alt niteliğiyle ekran okuyucudan gizlenebilir.
Formlar ve hata yönetimi
- Her alanın görünür etiketi olsun.
- Zorunlu alan ve beklenen format önceden açıklansın.
- Hata mesajı yalnızca renk değişimiyle verilmesin.
- Hata sonrası odak ilgili özet veya alana taşınsın.
- Gönderim sonucunda başarı mesajı yardımcı teknolojiye bildirilsin.
Mobil hedef boyutları ve hareket
Küçük dokunma hedefleri yanlış seçimlere yol açar. Yakın kontroller arasında yeterli boşluk bırakın. Otomatik oynayan veya paralaks kullanan deneyimlerde azaltılmış hareket tercihini destekleyin. Ekran döndüğünde içeriği tek yöne kilitlememek, farklı kullanım biçimlerine alan açar.
WCAG seviyeleri ve otomatik test sınırı
Kriterler A, AA ve AAA olarak gruplanır. Birçok kurum AA seviyesini pratik hedef kabul eder; yasal kapsam ayrıca değerlendirilmelidir. Otomatik aracın “%100” göstermesi uygunluk kanıtı değildir; alternatif metnin bağlama uygunluğunu veya odak sırasını tek başına anlayamaz.
Semantik HTML neden önemlidir?
Başlık, liste, buton, bağlantı ve formu amacına uygun HTML ile kurmak yardımcı teknolojiye hazır anlam sağlar. Tıklanabilir div yerine button rol ve klavye davranışını doğal getirir. ARIA, yerel öğenin yetmediği yerde kullanılmalıdır.
Menü, modal ve akordeon
- Menü düğmesinde ad ve açık/kapalı durumu olmalı.
- Modal başlığı ilişkilendirilmeli; odak dışarı kaçmamalı.
- Escape ile kapatma ve tetikleyiciye odak dönüşü olmalı.
- Akordeon button ile açılmalı ve expanded durumu güncellenmeli.
İçerik ekibinin sorumluluğu
Editörler başlık için kalın paragraf kullanmamalı, bağlantı hedefini açıklamalı ve görsel amacını değerlendirmelidir. Video için altyazı, karmaşık grafik için yakın açıklama hazırlanmalıdır.
E-ticaret ve mobil uygulama
Varyant, sepet ve ödeme durumları ekran okuyucuya bildirilmelidir. Native uygulamada font ölçeklendirmesi, VoiceOver/TalkBack ve dokunma hedefleri gerçek cihazda test edilmelidir.
Projeye dahil etme adımları
- Kullanıcı ve yasal kapsamı belirleyin.
- Tasarım sisteminde kontrast, odak ve durumları tanımlayın.
- Prototipi klavye ve yakınlaştırmayla değerlendirin.
- Semantik kod, otomatik test ve ekran okuyucu testi yapın.
- Editörlere yayın kontrol listesi verin.
Sık sorulanlar
Estetiği kısıtlar mı?
Hayır. Net hiyerarşi, kontrast ve tutarlılık bütün kullanıcıların deneyimini iyileştirir.
Mevcut site düzeltilebilir mi?
Önce kritik şablonlar denetlenir. Temel bileşenler sorunluysa sistem seviyesinde düzeltme verimlidir.
Overlay yeterli mi?
Tek araç kod, içerik ve süreç problemlerini çözemez. Erişilebilirlik sürekli sorumluluktur.
Erişilebilirliği sonradan eklemeyin
Bilgi mimarisinden bileşen tasarımına ve geliştirmeye kadar erişilebilirliği sürecin içine yerleştiriyoruz.
Projenizi konuşalımWCAG 2.2’de pratik olarak öne çıkanlar
Odak görünümünün sabit header veya çerez paneli tarafından örtülmemesi, sürükleme hareketine alternatif verilmesi, dokunma hedeflerinin yeterli olması ve tekrar girilen bilgilerin azaltılması modern arayüzlerde önemlidir. Drag-and-drop kullanılan bir ekranda aynı görevi buton veya seçim yoluyla tamamlamak mümkün olmalıdır.
Erişilebilirlik beyanı ve kabul testi
Bilinen sınırlamaları ve geri bildirim kanalını açıklayan erişilebilirlik beyanı iyileştirme planını görünür kılar. Kabul kriterini ölçülebilir yazın: kullanıcı %200 yakınlaştırmada içerik kaybetmeden forma ulaşır, yalnız klavyeyle gönderir, hatalı alanı metin mesajıyla bulur ve başarı cevabı ekran okuyucuya bildirilir. Bu tanım ekipler arasındaki “çalışıyor” yorumunu ortak kalite ölçüsüne dönüştürür.
Denetim raporu nasıl yazılır?
Bulguda etkilenen bileşen, kullanıcı sonucu, yeniden üretme adımı, önem derecesi ve düzeltme önerisi bulunmalıdır. Aynı navigasyon bileşeni yirmi sayfada kullanılıyorsa yirmi hata değil tasarım sistemi seviyesinde bir kök bulgu açılır.
Öncelik görevin tamamen engellenmesi, kullanıcı sayısı ve bileşenin yaygınlığıyla verilir. Ödeme yapamamak kritik; dekoratif ikonun gereksiz okunması daha düşük önceliklidir. Düzeltme aynı yardımcı teknoloji ve tarayıcıyla yeniden test edilmelidir.