Kazanimlar:
- Renk kontrastı, alternatif metin, klavye erişimi ve WCAG kriterlerini yapay zeka desteğiyle denetleyip iyileştirebilme
- Ekran okuyucu deneyimi, alt metin ve form etiketleri gibi erişilebilirlik metinlerini yapay zeka ile üretip doğrulayabilme
- Yapay zekanın erişilebilirlik önerilerini gerçek yardımcı teknoloji ve kullanıcı testiyle teyit etme sınırını kavrayabilme
Erişilebilirlik (accessibility, kısaca a11y), bir ürünün engelli bireyler dahil herkes tarafından kullanılabilmesidir: görme engelli bir kullanıcının ekran okuyucuyla (metni sese çeviren yardımcı yazılım) gezinebilmesi, motor güçlüğü olan birinin klavyeyle her şeyi yapabilmesi, renk körü birinin bilgiyi renge bağlı kalmadan alabilmesi. Dahil edici tasarım (inclusive design) ise daha geniştir: yaş, dil, kültür, geçici engel (kırık kol) veya bağlamsal engel (güneş altında ekran) dahil insan çeşitliliğini tasarımın merkezine koyar. Erişilebilirlik bir "ekstra" değil, temel bir sorumluluk ve çoğu ülkede yasal bir gerekliliktir. Yapay zeka bu alanda güçlü bir ön tarayıcı ve taslak üreticidir; ama gerçek erişilebilirlik yalnızca gerçek yardımcı teknoloji ve kullanıcı testiyle teyit edilir.
WCAG ve temel kontrol alanları
WCAG (Web Content Accessibility Guidelines), erişilebilirlik için uluslararası kabul görmüş ölçütler bütünüdür; genellikle AA seviyesi hedeflenir. Dört ilkesi vardır: içerik algılanabilir, arayüz kullanılabilir, bilgi anlaşılabilir ve teknik olarak sağlam olmalıdır. Pratikte en sık karşılaşılan kontrol alanları:
- Renk kontrastı: Metin ile arka plan arasındaki fark yeterli mi? (AA için normal metinde en az 4.5:1 oranı.)
- Alternatif metin (alt text): Görsellerin ekran okuyucuya anlatan metin karşılığı var mı?
- Klavye erişimi: Fare olmadan her şey yapılabiliyor mu? Odak (focus) sırası mantıklı mı?
- Yalnızca renge bağlı bilgi: "Kırmızı alanları doldurun" gibi ifadeler renk körü kullanıcıyı dışlar.
- Form etiketleri: Her giriş alanının ekran okuyucunun okuyacağı bir etiketi var mı?
- Dokunma hedefi: Butonlar parmakla rahatça basılacak büyüklükte mi?
Yapay zeka bu alanların çoğunda hızlı bir ön tarama yapabilir: bir metni verip "kontrast yeterli mi", bir görsel açıklamasını verip "alt metin öner", bir arayüz tarifini verip "klavye erişimi sorunları neler" diye sorabilirsiniz.
Dikkat: Yapay zekanın "erişilebilir görünüyor" demesi erişilebilirlik garantisi değildir. Otomatik kontrol WCAG hatalarının yalnızca bir kısmını yakalar; gerisi gerçek kullanımla ortaya çıkar.
Alternatif metin: iyi alt metnin sırrı
Alt metin, görme engelli kullanıcı için görselin yerine geçer. İyi alt metin görselin işlevini ve anlamını aktarır, dekoratif detayını değil. Bir "sepete ekle" ikonu için alt metin "alışveriş sepeti resmi" değil, "Sepete ekle" olmalıdır çünkü kullanıcı için önemli olan eylemdir. Yapay zeka alt metin taslağı üretmede iyidir, ama bağlamı bilmediği için fazla betimleyici veya alakasız metin üretebilir. Siz her alt metni "bu görsel neden burada?" sorusuyla kırpın.
Görsel
Zayıf alt metin
Güçlü alt metin
Sepet ikonu (buton)
"Sepet ikonu, gri renkli"
"Sepete ekle"
Ürün fotoğrafı
"Resim"
"Mavi kışlık mont, önden görünüm"
Dekoratif çizgi
"Süsleme çizgisi"
(boş bırak — dekoratif)
Grafik
"Grafik resmi"
"2024 satışları: her çeyrekte artış"
Dahil edici dil ve kapsam
Erişilebilirlik teknik kontrollerle sınırlı değildir; dil de dahil edicidir. Cinsiyet varsayan ("kullanıcı ve onun karısı"), yeti temelli dışlayan ("bakış atın", "kolayca duyun") veya kültürel varsayım içeren metinler bazı kullanıcıları dışlar. Yapay zeka metni bu açıdan tarayabilir, ama önerdiği "nötr" dilin doğal ve anlaşılır kaldığından siz emin olmalısınız; aşırı düzeltme metni tuhaflaştırabilir.
Üç mini vaka
Vaka 1 — Kontrast hataları erken yakalandı. Bir ekip 20 ekranın metin renklerini yapay zekaya taratıp 7 yerde kontrastın AA eşiğinin altında olduğunu belirledi. Düzeltmeler geliştirmeye gitmeden yapıldı; sonradan düzeltme maliyetinden kaçınıldı. Ama ekip yine de gerçek ekran okuyucu testini atlamadı.
Vaka 2 — Yalnızca renge bağlı bilgi düzeltildi. Bir form, hatalı alanları yalnızca kırmızı çerçeveyle gösteriyordu. Yapay zeka bunu işaretledi; ekip her hataya bir de metin ve simge ekledi. Renk körü kullanıcılar artık hatayı görebiliyordu. Ders: renk tek başına bilgi taşıyamaz.
Vaka 3 — Yapay zeka onayı yanılttı. Bir tasarımcı, yapay zeka "erişilebilir" dediği için ekran okuyucu testini atladı. Gerçek testte odak sırasının karıştığı, bazı butonların hiç okunmadığı ortaya çıktı. Ders: otomatik onay başlangıçtır; gerçek yardımcı teknoloji testi zorunludur.
Kopyalanabilir promptlar
Bu arayüz tarifini erişilebilirlik açısından ön-tara:1) yalnızca renge bağlı taşınan bilgi var mı?2) tıklanabilir her öğenin metin etiketi var mı?3) klav'ye ile erişilemeyecek öğe var mı?4) odak sırası mantıklı mı?Her sorunu ve önerisini listele. "Gerçek test gerekir" notunu ekle.Tarif: <<metin>>
Bu görseller için alt metin öner. Kural: görselin İŞLEVİNİ/anlamını aktar,dekoratif detayı değil. Buton ikonları için eylemi yaz.Dekoratif görseller için "alt metin boş bırakılmalı" de.Bağlam ve görsel açıklamaları: <<liste>>
Bu metinleri dahil edici dil açısından denetle:cinsiyet varsayımı, yeti temelli dışlayıcı ifade ("bakın", "duyun" gibi),kültürel varsayım var mı? Doğal kalan alternatifler öner; aşırı düzeltme yapma.Metinler: <<liste>>
Bu form için erişilebilir hata ve etiket metinleri yaz:her alan için görünür etiket, ekran okuyucu için açıklama, ve hatayırenkten bağımsız (metin + simge) anlatan mesaj. Ses ve ton: <<kart>>Form alanları: <<liste>>
Zayıf prompt / Güclü prompt
Zayıf: "Bu görsele alt metin yaz."
Sonuç: "Bir resim" veya aşırı betimleyici, işlevi ıskalayan metin.
Güçlü: "Bu görsellere alt metin öner; görselin işlevini/anlamını aktar; buton ikonları için eylemi yaz; dekoratif olanları 'boş bırakılmalı' diye işaretle."
Sonuç: Bağlama uygun, işlev odaklı, doğru alt metinler.
Fark: güçlü prompt işlev odağı + buton kuralı + dekoratif ayrımı getirir.
Sık yapılan hatalar
- Yapay zeka onayını erişilebilirlik garantisi sanmak. Gerçek test yerine geçmez.
- Yalnızca renge bilgi yüklemek. Renk körü kullanıcılar bilgiyi kaçırır.
- Alt metinde işlevi değil görüntüyü anlatmak. Buton ikonu için eylem yazılmalı.
- Erişilebilirliği sona bırakmak. Wireframe aşamasında başlanmazsa sonradan yamak pahalı olur.
- Aşırı düzeltilmiş dil. Doğallığı kaybeden kapsayıcı dil de anlaşılırlığı bozar.
Özetle
Erişilebilirlik, ürünün herkes için kullanılabilir olmasıdır; bir ekstra değil, temel ve çoğu yerde yasal bir sorumluluktur. Yapay zeka kontrast, alt metin, klavye erişimi ve dahil edici dil taramasında hızlı bir ön kontrol ve taslak üretici olarak değerlidir. Ama otomatik onay, WCAG hatalarının yalnızca bir kısmını yakalar; gerçek erişilebilirlik ekran okuyucu ve gerçek yardımcı teknoloji kullanıcılarıyla test edilerek teyit edilir. Modeli ön tarayıcı olarak kullanın, kanıtı gerçek testten alın.
Uygulama görevi
- Bir arayüz tarifini ilk prompt ile erişilebilirlik açısından ön-tarayın.
- Yalnızca renge bağlı bilgi veya etiketsiz öğe varsa düzeltin.
- Ekranınızdaki görseller için ikinci prompt ile işlev odaklı alt metinler üretin.
- Metinlerinizi üçüncü prompt ile dahil edici dil açısından denetleyin.
- Mümkünse bir ekran okuyucu ile gerçek testi deneyin ve otomatik taramanın kaçırdıklarını not edin.
Kontrol listesi
- [ ] Kontrast, klavye erişimi ve etiketleri ön-taradım.
- [ ] Yalnızca renge bağlı bilgi bırakmadım.
- [ ] Alt metinleri işlev odaklı yazdım, dekoratifleri boş bıraktım.
- [ ] Dahil edici dil denetimi yaptım, doğallığı korudum.
- [ ] Otomatik onayı erişilebilirlik garantisi saymadım.
- [ ] Gerçek yardımcı teknoloji testini planladım/uyguladım.