Website Erişilebilirliği: Önce Neyi Düzeltmeli
Erişilebilirlik çalışmasının uzun bir kontrol listesi ve gerçek engellerin çoğunu oluşturan kısa bir listesi vardır. Kısa listeden başlamak gerçek kullanıcıları hızla sitenize alır; tam denetimle başlamak genelde kimsenin uygulamadığı bir belge üretir.
Bu rehber önce neyi düzelteceğinizi, bir öğleden sonrada kendinizin nasıl test edebileceğinizi ve overlay eklentilerinin neden satıldıkları kısayol olmadığını ele alıyor.
En büyük etkiyi yaratan düzeltmeler#
Bunlar insanların işlerini biraz zorlaştıran değil tamamen engelleyen bariyerlerdir. Daha uzun bir listedeki hiçbir şeyden önce bunları düzeltin.
- Klavye erişimi. Her etkileşimli öğeye Tab ile ulaşılabilsin, Enter ya da Space ile çalıştırılabilsin, mantıklı bir sırayla ve görünür bir odak halkasıyla. Siteyi yalnız fareyle kullanabiliyorsanız bu listedeki hiçbir şeyin önemi yok.
- Metin alternatifleri. Bilgi taşıyan görsellerde anlamlı alt metin; dekoratif olanlarda boş alt. Eksik alt ile boş alt aynı şey değildir.
- Form etiketleri. Her alana bağlı gerçek bir <label>. Yer tutucu metin etiket değildir — yazmaya başlayınca kaybolur ve güvenilir biçimde okunmaz.
- Kontrast. Gövde metni 4,5:1, büyük metin ve denetimler 3:1, gerçek arka plana karşı ölçülmüş.
- Başlıklar. Tek H1, atlanmış seviye yok. Ekran okuyucu kullanıcıları en çok başlıkla geziyor.
- Bağlantı metni. On dört kez tekrarlanan "devamını oku", ekran okuyucu kullanıcısına on dört özdeş hedef verir. Nereye gittiğini söyleyin.
- Hata mesajları. Alanın yanında, metin olarak, ne yapılacağını anlatarak — yalnız renkle değil, yalnız kırmızı çerçeveyle değil.
Bir öğleden sonrada kendiniz test edin#
Sorunların çoğunu bulmak için özel yazılım gerekmiyor. Bu beş geçiş orta ölçekli bir sitede bir iki saat sürer ve gerçek engellerin çoğunu bulur.
| Test | Nasıl | Neyi yakalar |
|---|---|---|
| Yalnız klavye | Fareyi çıkarın, her sayfada Tab ile gezin | Tuzaklar, görünmez odak, erişilemeyen denetimler |
| %200 yakınlaştırma | Sayfa zoom’u değil tarayıcı yazı boyutu | Kırpılan metin, yatay kaydırma, bozulan düzen |
| Ekran okuyucu | Ana şablonlarda VoiceOver ya da NVDA | Eksik etiketler, anlamsız bağlantılar, duyurulmayan değişiklikler |
| Otomatik tarama | Tarayıcıda axe ya da Lighthouse | Kontrast, eksik alt, ARIA hataları — sorunların yaklaşık %30’u |
| Gri tonlama | Tarayıcı filtresi ya da işletim sistemi ayarı | Yalnız renkle aktarılan her şey |
Otomatik araçlar erişilebilirlik sorunlarının kabaca üçte birini bulur. Başlangıç noktasıdır, geçme notu değil — Lighthouse’ta 100 alan bir site klavyeyle hâlâ kullanılamaz olabilir.
En çok soruna yol açan kalıplar#
Erişilebilirlik genelde özel bileşenlerde kırılır, çünkü yerleşik öğeler hazır davranışla gelir ve özel olanların bunu yeniden yazması gerekir.
- Div’lerden kurulmuş özel açılır listeler, klavye desteği ve rol olmadan. Yerleşik <select> bedava ve her yerde çalışıyor.
- Odağı hapsetmeyen, Escape ile kapanmayan ve arka planı kaydırılabilir bırakan modaller.
- Duraklatma denetimi olmadan otomatik ilerleyen karuseller — yalnız engelli kullanıcılara değil neredeyse herkese düşmanca.
- Erişilebilir adı olmayan yalnız ikonlu düğmeler. Etiketsiz bir X "düğme" olarak okunur.
- Footer’a ulaşmanın yolu olmayan sonsuz kaydırma.
- Div çorbası: düğme ve bağlantı yerine tıklanabilir div’ler — tek hamlede hem klavye desteğini hem anlamı kaldırıyor.
- prefers-reduced-motion’u yok sayan hareket.
En ucuz erişilebilirlik stratejisi, iş için doğru yerleşik HTML öğesini kullanmaktır. Her özel yedek, bedava gelen davranışı yeniden yazma sözüdür.
Overlay eklentileri neden çözüm değil#
Erişilebilirlik overlay’leri tek bir betikten uyumluluk vaat eder. Bunu veremezler, çünkü alttaki sorunlar yapısaldır: bir betik bir görselin ne gösterdiğini bilemez, alanın amacına uyan bir form etiketi yazamaz ve özel bir bileşendeki klavye tuzağını onaramaz.
Ayrıca insanların zaten kullandığı ve ayarladığı yardımcı teknolojiye karışırlar; bir dizi engelli örgütünün bunlara karşı uyarmasının sebebi budur. Onları bilmeye değer, çünkü savunulabilir bir gerekçeyle reddedebilesiniz.
- Doğru alt metin üretemezler, çünkü görselin bağlamdaki anlamını bilmezler.
- Kendi yazmadıkları bileşenlerdeki klavye tuzaklarını düzeltemezler.
- Kullanıcının kendi ekran okuyucu ayarlarıyla sık sık çakışırlar.
- Hukuki riski kaldırmazlar — alttaki engeller hâlâ oradadır.
- O para bu sayfanın başındaki yedi düzeltmeye harcansa daha iyi olur.
Sık sorulan sorular
Erişilebilirlik hukuken zorunlu mu?
Pek çok yargı alanında kamu kurumları için evet ve giderek özel işletmeler için de — Avrupa Erişilebilirlik Yasası, ABD’de web sitelerine uygulandığı biçimiyle ADA ve başka ülkelerdeki karşılıkları. Yükümlülükler ülkeye ve sektöre göre değişir, o yüzden yerel duruma bakın. Pratik durum şu: neredeyse her düzenleme WCAG 2.2 AA’yı işaret ediyor.
Erişilebilirlik yapıma ne kadar ekler?
Baştan tasarlanınca çok az — çoğunlukla anlam, kontrast ve odak durumları konusunda disiplin. Bitmiş özel bir siteye sonradan eklendiğinde ciddi bir proje olabilir, çünkü düzeltmeler kozmetik değil yapısaldır. Bu fark, konuyu yayından sonra değil brief’te gündeme getirmenin bütün gerekçesidir.
WCAG A, AA ve AAA arasındaki fark ne?
Bunlar uygunluk seviyeleridir. A asgaridir ve gerçek engelleri yerinde bırakır; AA düzenlemelerin genelde istediği ve çoğu kurumun hedeflediğidir; AAA ise her içerik için ulaşılabilir olmayan ölçütler içerir — örneğin bazı marka paletlerinin karşılayamayacağı 7:1 kontrast şartı. AA’yı hedefleyin ve AAA’yı hedef değil ölçüt bazında bir iyileştirme olarak görün.
Erişilebilirlik SEO’ya yardım eder mi?
Dolaylı ve gerçekten eder. Düzgün başlık yapısı, açıklayıcı bağlantı metni, alt nitelikleri, gerçek anlamsal işaretleme ve hızlı, sabit sayfalar ikisine de yarıyor. Ama örtüşme kısmi: bir site iyi sıralanıp klavyeyle hâlâ kullanılamaz olabilir. Erişilebilirlik çalışmasını insanlar siteyi başka türlü kullanamadığı için yapın ve SEO faydasını yan etki olarak alın.
website erişilebilirlikwcagerişilebilir web tasarımekran okuyucuklavye erişimierişilebilirlik testi
