Web Erişilebilirliği Nedir? WCAG ve Kapsayıcı Tasarım Anlatıldı

Web erişilebilirliği, web sitelerini ve uygulamaları engelli insanların kullanabilmesi için geliştirmek demektir — ister görme engelli olup ekran okuyucu kullanın, ister fareyi kullanamayın, ister düşük görme ya da renk körlüğünüz olsun, ister işitme engeli ya da bilişsel veya öğrenme güçlüğü olsun. Pratikte bu, görseller için metin alternatifleri, yeterli renk kontrastı, doğru etiketli formlar ve her şeyin yalnızca klavyeyle çalışması gibi şeylere iner. Bunun uluslararası standardı WCAG'dir; W3C tarafından yayımlanan Web İçeriği Erişilebilirlik Yönergeleri.

Erişilebilirlik çoğu zaman a11y olarak kısaltılır — “a”, ardından 11 harf, ardından “y”.

Yapay zekayla geliştirirken erişilebilirlik neden önemli

Yapay zeka oluşturucular, doğru görünen uygulamalar üretmekte iyidir. Erişilebilirlik ise çoğunlukla ekran görüntüsünde görmediğiniz şeylerle ilgilidir: bir düğmenin gerçekten düğme olup olmadığı, bir giriş alanının ekran okuyucunun okuyabileceği bir etiketi olup olmadığı, menüye Tab tuşuyla ulaşıp ulaşamadığınız.

Bu yüzden sormak önemlidir:

• Kolayca gözden kaçar. Özel biçimlendirilmiş bir açılır liste mükemmel görünebilir ve fare olmadan kullanılamaz. Bunu test etmezseniz fark etmezsiniz.
• Erken doğru yapmak daha ucuzdur. Erişilebilir bileşenleri ilk istemden isteyin; maliyeti neredeyse sıfırdır. Bitmiş bir uygulamaya sonradan eklemek, her ekrana dokunmak demektir.
• Herkese yardımcı olur. Altyazılar gürültülü ortamlardaki insanlara, iyi kontrast güneş ışığında telefon kullanan insanlara, net etiketler herkese formları daha hızlı doldurmada yardımcı olur.
• SEO ile örtüşür. Doğru başlıklar, açıklayıcı bağlantılar ve alternatif metinler arama motorlarının sayfalarınızı anlamasına da yardımcı olur — bkz. yapay zekayla oluşturulan web siteleri için SEO.
• Zorunlu olabilir. Faaliyet gösterdiğiniz yere ve hizmet verdiğiniz kişilere bağlı olarak, erişilebilirlik yasal bir yükümlülük olabilir.

Günlük bir benzetme

Bir binanın girişini düşünün.

Merdivenler birçok insan için işe yarar. Bir rampa tekerlekli sandalye kullanıcıları için işe yarar — ve bebek arabalı ebeveynler, arabalarıyla gelen kurye işçileri ve valizli yolcular için de. Otomatik kapılar, net tabelalar, asansör düğmelerinde Braille yazı ve iyi aydınlatma, her biri birilerinin önündeki bir engeli kaldırır.

Web erişilebilirliği, dijital alanlar için aynı fikirdir: uygulamanızın rampaları, tabelaları ve tırabzanları. Ve tıpkı bir bina gibi, rampayı planlara eklemek, beton döküldükten sonra eklemekten çok daha kolaydır.

WCAG kısaca

WCAG, W3C'nin Web Erişilebilirliği Girişimi tarafından yayımlanır. Güncel sürüm WCAG 2.2'dir ve Ekim 2023'te ilk kez yayımlanmıştır. Geriye dönük uyumludur: WCAG 2.2'yi karşılayan içerik, 2.1 ve 2.0'ı da karşılar; W3C en güncel sürümün kullanılmasını önerir. WCAG 2.2 ayrıca uluslararası bir standart olarak onaylanmıştır: ISO/IEC 40500:2025. Çok farklı bir WCAG 3 ise bitmiş bir standart değil, erken bir taslak olarak geliştirilmektedir.

WCAG, POUR olarak akılda tutulabilen dört ilkeye göre düzenlenmiştir:

Her yönergenin test edilebilir başarı ölçütleri vardır ve üç düzeyde yer alır:

• A düzeyi — asgari. Bunları karşılamamak bazı insanları tamamen engeller.
• AA düzeyi — standart hedef; çoğu yasa ve politikanın işaret ettiği düzey.
• AAA düzeyi — en yüksek düzey. Bazı yerlerde hedeflemeye değer, ama W3C bunun tüm siteler için zorunlu tutulmasını önermez; çünkü bazı içerikler buna uyamaz.

WCAG 2.2, 2.1'e dokuz başarı ölçütü ekledi; bunların arasında AA düzeyinde Hedef Boyutu (Asgari) — tıklanabilir hedeflerin genellikle en az 24 x 24 CSS pikseli olmalı, istisnalarla — ve Erişilebilir Kimlik Doğrulama (Asgari) var; bu, hafıza ya da bulmacalara dayanan giriş adımlarını sınırlar; örneğin yapıştırmaya izin verilmeden şifrenin yeniden yazılmasını gerektirmek gibi. Ayrıca eski “Ayrıştırma” ölçütünü geçersiz olduğu için kaldırdı.

Çalışılmış bir örnek: bir kayıt formu

Bir yapay zekanın üretebileceği bir kayıt formu ve bir erişilebilirlik kontrolünün bulduklarına bakalım:

Bu düzeltmelerin hiçbiri formun görünüşünü pek değiştirmez. Hepsi, bazı insanların onu kullanıp kullanamayacağını değiştirir.

Temel terimler

Sık yapılan yanlış anlamalar

• “Erişilebilirlik yalnızca görme engelli kullanıcılar için önemlidir.” Görsel, motor, işitsel, konuşma ve bilişsel engelleri ve kırık bir kol gibi geçici durumları kapsar.
• “Erişilebilir siteler sade görünür.” Erişilebilirlik birkaç şeyi kısıtlar — kontrast, odak stilleri, metin boyutu — ama iyi görünen erişilebilir siteler kuraldır, istisna değil.
• “Otomatik bir denetleyici 100 dedi, işimiz bitti.” Otomatik araçlar sorunların yalnızca bir kısmını yakalar. Alternatif metnin gerçekten anlamlı olup olmadığını ya da bir akışın ekran okuyucuyla mantıklı olup olmadığını bir insanın kontrol etmesi gerekir.
• “Bir erişilebilirlik bileşeni bizi uyumlu yapar.” Üstüne eklenen araç çubukları, kodunuzdaki eksik etiketleri ya da bozuk klavye erişimini düzeltemez. Kaynağı düzeltin.
• “Engelli kullanıcımız yok.” Bunu bilmiyor olabilirsiniz. Birçok engel görünmez; bir engelle karşılaşan insanlar genellikle yalnızca ayrılır.

Yapay zeka oluşturucunuzdan ne istemelisiniz

• “Bunu WCAG 2.2 AA düzeyinde yap.”
• “Anlamsal HTML kullan: gerçek düğmeler, bağlantılar, sırayla başlıklar ve her form alanı için etiketler.”
• “Her etkileşimli öğenin yalnızca klavyeyle çalışmasını ve görünür bir odak stilinin olmasını sağla.”
• “Tüm metin ve simge renklerinin kontrastını kontrol et — normal metin için 4,5:1, büyük metin ve simgeler için 3:1.”
• “Bilgilendirici görsellere anlamlı alternatif metin, süslemeli görsellere boş alternatif metin ekle.”
• “Form hatalarını yalnızca renkle değil, alana bağlı metin olarak göster.”
• “Animasyonlar için kullanıcının hareket azaltma ayarına uy.”
• “Otomatik bir erişilebilirlik denetimi çalıştır ve test edemediği şeyleri listele, böylece bunları elle kontrol edebileyim.”

Sonra kendiniz test edin: fareyi bir kenara koyun ve ana akışınızı yalnızca Tab, Shift+Tab, Enter ve Boşluk ile tamamlamaya çalışın. Telefonunuzun yerleşik ekran okuyucusunu ana sayfada deneyin. Tarayıcıyı %200'e yakınlaştırın ve bir şeyin bozulup bozulmadığına bakın.

Mythex'te erişilebilirlik

Mythex'in ayrı bir erişilebilirlik denetleyicisi yoktur; bu yüzden erişilebilirliği isteminizin ve testlerinizin bir parçası olarak ele alın. İlk istemden WCAG 2.2 AA isteyin, sonucu Önizlemede klavyeyle kontrol edin ve yayından önce agent'ın ana akışlarınızda tıklamasını sağlamak için /test kullanın — bkz. Uygulama Testi. SEO tarifi da anlamsal başlıklar ve anlamlı alternatif metinler ister; bu da iki hedefe birden hizmet eder.

Uygulamalı bir kontrol listesi için web sitenizi erişilebilir yapma rehberine bakın. Tasarım için yapay zekayla iyi görünümlü bir uygulama nasıl tasarlanır, yayından önce ise uygulamanızı yayından önce nasıl test edersiniz rehberlerini okuyun. W3C'nin kendi WCAG genel bakışı ise yetkili kaynaktır.

Sorular