Web erişilebilirliğine eksiksiz rehber
Yazan AsasWeb ekibi 5 dk okuma
Web erişilebilirliği, klavyeye, ekran okuyucuya, altyazılara veya yüksek kontrasta güvenen insanlar dahil herkesin kullanabildiği bir web sitesi inşa etmek demektir. Uluslararası standart AA seviyesinde WCAG 2.2'dir ve dört fikre dayanır: sayfalar algılanabilir, çalıştırılabilir, anlaşılabilir ve sağlam olmalıdır. İşin çoğu kozmetik değil temeldir; doğru HTML öğeleri, görünür bir odak sırası, yeterli renk kontrastı, gerçek metin alternatifleri ve net formlar. Baştan yapıldığında maliyeti düşüktür, kitlenizi genişletir, yasal riski azaltır ve aynı anda SEO'nuzu iyileştirir.
Web erişilebilirliği, engelli insanlar dahil herkesin kullanabildiği web siteleri inşa etme pratiğidir. Bu, geniş bir insan yelpazesini kapsar: fare yerine klavyeyle gezinen biri, sayfayı görmek yerine dinleyen bir ekran okuyucu kullanıcısı, güçlü kontrasta ihtiyaç duyan az gören bir kişi ve bir videoyu sesi kapalı izleyen herkes. Bu rehber, erişilebilirliğin ne anlama geldiğini, neden ilginizi hak ettiğini ve jargona boğulmadan oraya nasıl ulaşacağınızı açıklar.
Erişilebilirlik gerçekte ne anlama gelir
Uluslararası referans, WCAG olarak bilinen Web İçeriği Erişilebilirlik Yönergeleridir. Güncel sürüm WCAG 2.2’dir ve çoğu kuruluş, Avrupa Erişilebilirlik Yasası gibi yasaların atıfta bulunduğu seviye olan AA seviyesini hedefler. Yönergeleri ezberlemeniz gerekmez, ancak dayandıkları dört ilkeyi bilmek işinize yarar. Bir sayfa şöyle olmalıdır:
- Algılanabilir. İnsanlar içeriği ister görsün, ister duysun, ister hissetsin, alabilmelidir. Görsellerin metin alternatifleri, videoların altyazıları vardır ve metnin yeterli kontrastı bulunur.
- Çalıştırılabilir. İnsanlar sayfayı ellerindeki her neyse onunla kullanabilir; fareyle, yalnızca klavyeyle, bir anahtar cihazıyla veya sesle. Hiçbir şey onları tuzağa düşürmez ve hiçbir şey gerçekleştiremeyecekleri bir duyuya ya da eyleme bağlı değildir.
- Anlaşılabilir. İçerik net okunur ve arayüz öngörülebilir davranır, böylece insanlar ne şaşırır ne de kafaları karışır.
- Sağlam. Sayfa, bugünün ve geleceğin tarayıcıları ile yardımcı teknolojilerinin onu güvenilir biçimde yorumlayabileceği şekilde inşa edilir.
Bu rehberdeki pratik olan hemen her şey, bu dört fikirden birine geri döner.
Kimler için
Küçük bir kullanıcı grubu hayal etmek cazip gelir, ancak erişilebilirlik bundan daha geniştir. Her altı kişiden yaklaşık biri önemli bir engelle yaşıyor ve çok daha fazlası, kendini engelli olarak tanımlamadan erişilebilir tasarımdan yararlanıyor: yaşlı bir müşteri, geçici bir yaralanması olan biri, yavaş bir bağlantıdaki bir kişi ya da parlak güneş ışığında telefon kullanan herkes. Kenarlar için inşa etmek, deneyimi ortadakiler için de iyileştirir. Altyazılar gürültülü bir odada yardımcı olur, güçlü kontrast ucuz bir ekranda yardımcı olur ve net bir odak sırası klavyeyi tercih eden herkese yardımcı olur.
En çok önem taşıyan temeller
İyi haber şu ki en yüksek etkiye sahip iş dekoratif değil yapısaldır. Bu temelleri doğru kurarsanız AA yolunun büyük kısmını almış olursunuz.
Doğru HTML öğesini kullanın
Gerçek bir düğme, gerçek bir bağlantı ve gerçek bir liste, davranışı ve anlamı yerleşik olarak, bedavaya getirir. Onları genel amaçlı biçimlendirilmiş kutulardan yeniden inşa ederseniz odağı, klavye desteğini ve doğru duyuruyu elle geri eklemeniz gerekir ve çoğu ekip bir parçayı kaçırır. Bu, erişilebilirlikteki en yüksek getirili tek alışkanlıktır. Bunu anlamsal HTML neden hala önemli yazısında ayrıntılı olarak ele alıyoruz.
Her şeyin klavyeyle çalışmasını sağlayın
Birçok insan hiç fare kullanmaz. Her denetim yalnızca klavyeyle, mantıklı bir sırada ve gerçekten görebildiğiniz bir odak çerçevesiyle ulaşılabilir ve kullanılabilir olmalıdır. Bu aynı zamanda kendi sitenizde çalıştırabileceğiniz en hızlı manuel testtir. Ayrıntılar için klavye ile gezinme, çoğu sitenin geçemediği test yazısına bakın.
Herkesin okuyabileceği renkleri seçin
Metnin arka planına karşı yeterli kontrasta ihtiyacı vardır ve renk, anlamı iletmenin tek yolu asla olmamalıdır. Bu, en yaygın hatalardan biridir ve hedefleri öğrendikten sonra düzeltmesi en kolay olanlardan biridir. Herkesin okuyabileceği renkleri seçmek rehberimiz sayıların üzerinden geçer.
Gerçek metin alternatifleri yazın
Anlam taşıyan görsellerin, ekran okuyucu kullanıcılarının aynı bilgiyi alması için alternatif metne ihtiyacı vardır; dekoratif görsellerin ise atlanmaları için dekoratif olarak işaretlenmeleri gerekir. İyi alternatif metin, arama motorlarının görsellerinizi anlamasına da yardımcı olur. Ayrıntılar için alternatif metin: erişilebilirlik için iyi, SEO için iyi yazısına bakın.
İnsanların tamamlayabileceği formlar inşa edin
Formlar, birçok ziyaretçinin müşteri olmaya karar verdiği yerdir; bu yüzden kafa karıştıran ya da erişilemeyen bir form size doğrudan maliyet çıkarır. Etiketlenmiş alanlar, net hatalar ve mantıklı gruplama herkesin formu bitirmesine yardımcı olur. Nasıl yapılacağını erişilebilir formlar daha fazla potansiyel müşteri kazandırır yazısında anlatıyoruz.
Neden işiniz için iyidir
Erişilebilirlik çoğu zaman uyumluluk olarak çerçevelenir, ancak her şeyden önce daha büyük bir kitle ve daha iyi bir deneyimdir. Erişilebilir bir site daha fazla müşteriye ulaşır, onların daha fazlasını dönüştürür ve erişilebilirlik yasaları Avrupa Birliği genelinde ve ötesinde sıkılaşırken sizi daha az yasal riske maruz bırakır. Ticari gerekçeyi erişilebilirlik sadece uyumluluk değil, iş için iyidir yazısında ortaya koyuyoruz.
Sessiz bir kazanç daha var. Yardımcı teknolojiye yardımcı olan aynı yapı, yani anlamlı başlıklar, gerçek yer işaretleri, açıklayıcı bağlantılar ve düzgün alternatifler, arama motorlarının bir sayfayı anlamak için okuduğu şeyin ta kendisidir. Erişilebilirlik ve SEO aynı temeller üzerine kuruludur, bu yüzden yapılan iş iki kez karşılığını verir.
E-ticaret üzerine bir not
Çevrimiçi mağazaların kendine özgü baskı noktaları vardır: ürün galerileri, filtreler, varyant seçiciler ve kimseyi kaybetmemesi gereken bir ödeme adımı. Erişilemeyen bir ödeme sayfası, terk edilmiş bir satıştır. Çevrimiçi satış yapıyorsanız, çevrimiçi mağazalar için erişilebilirlik kontrol listesi en çok önem taşıyan kısımları kapsar.
Nasıl test edilir
Başlamak için bir laboratuvara ihtiyacınız yok. Kısa, tekrarlanabilir bir rutin sorunların çoğunu yakalar:
- Fareyi kenara koyun ve Tab tuşuyla tüm sayfada ilerleyin. Her şeye ulaşıp her şeyi kullanabiliyor musunuz ve nerede olduğunuzu her zaman görebiliyor musunuz?
- axe veya Lighthouse gibi otomatik bir denetleyici çalıştırın. Her şeyi yakalamaz, ancak bariz hataları hızla işaretler.
- Renk kontrastınızı AA hedeflerine göre kontrol edin.
- On dakika boyunca bir ekran okuyucu deneyin. Çoğu sistemde zaten yerleşik olarak bir tane vardır.
Otomatik araçlar sorunların belki üçte birini bulur, bu yüzden onları yukarıdaki manuel kontrollerle eşleştirin. Hedef mükemmel bir puan değil, gerçek bir insanın gerçekten kullanabildiği bir sitedir.
Nereden başlamalı
Bu size çok geldiyse temellerle başlayın: doğru HTML, çalışan bir klavye sırası ve yeterli kontrast. Yalnızca bu üçü engellerin çoğunu ortadan kaldırır. Oradan itibaren alternatif metni, formları ve gerisini tek seferlik bir proje olarak değil, istikrarlı bir alışkanlık olarak ele alın.
Yardım isterseniz, erişilebilirlik yaptığımız her şeyin içine yerleşiktir ve onu odaklanmış bir hizmet olarak da sunuyoruz. Web erişilebilirliği sayfasına göz atın ya da bir proje başlatın ve sitenizin bugün nerede durduğunu bize söyleyin.