Erişilebilir web sitesi kontrol listesi

Maddeleri, insanların en çok kullandığı sayfalarda kontrol et: ana sayfa, başvuru ve iletişim. Parantez içinde, başarı ölçütünün WCAG 2.2’deki numarası var. 14. madde AA düzeyi için bir şart değil, ama yardım ve destek işinde önemli. 20. madde, PDF broşürler gibi belgelerle ilgili.

Bunu biriyle birlikte yap: biriniz test etsin, öteki neyin hangi sayfada ters gittiğini not etsin. Her maddeye “evet”, “hayır” ya da “bilmiyorum” yaz. “Bilmiyorum” dediğin maddeleri web geliştiricine sor.

Algılanabilir

1. Her görselin uygun bir alternatif metni var. Alternatif metin, görseli göremeyen biri için görselin ne anlama geldiğini söyler. Görsel sadece süsse, alternatif metin boş kalır. Resimli bir düğmede alternatif metin düğmenin ne yaptığını söyler: “büyüteç” değil, “Ara”. Görselin içinde yazı varsa, örneğin bir logoda, o yazı alternatif metinde de geçer. (1.1.1)

2. Videoların altyazısı var. Canlı yayınların da, örneğin bir webinarın. Kayıtlı bir videoda kimsenin söylemediği önemli bir şey görünüyor mu, örneğin ekranda bir telefon numarası ya da bir isim? O zaman sesli betimleme de olmalı: görüntüde ne olduğunu anlatan bir ses. (1.2.2, 1.2.4 ve 1.2.5)

3. Metinlerin ve düğmelerin kontrastı yeterli. Normal metnin arka planla kontrastı en az 4,5:1, büyük metninki en az 3:1. Bir düğmeyi ya da form alanını tanımak için gereken şeyler de, örneğin çerçevesi, en az 3:1; önemli simgeler de öyle. Renk gözlüğü aracının Kontrast adımında metnin ve arka planın rengini seç: uyup uymadıklarını görürsün. Özellikle açık gri metne ve fotoğrafın üstündeki metne dikkat et. (1.4.3 ve 1.4.11)

4. Renk tek işaret değil. “Zorunlu alanlar kırmızıdır” renk körü biri için işe yaramaz, bu yüzden “(zorunlu)” gibi bir kelime ya da işaret ekle. Metin içindeki bağlantıların altını da çiz; böylece renge bakmadan onları görürsün. (1.4.1)

5. Hiçbir şey kaybolmadan yakınlaştırabiliyorsun. %200’e kadar yakınlaştır: her şey hâlâ çalışır. %400’e kadar devam et: yana kaydırman gerekmez. Ctrl ve + ile yakınlaştırırsın (Mac’te: Cmd ve +); genelde dört ila altı basışta %200’e gelirsin. Kaybolan ya da başka bir metnin veya görselin üstüne binen metne dikkat et. (1.4.4 ve 1.4.10)

6. Başlıklar gerçek başlık. Bir başlık sadece büyük ya da kalın yazı olarak değil, kodda da başlık olarak yapılmış olmalı; böylece ekran okuyucu kullananlar başlıktan başlığa atlayabilir. Başlıklar mantıklı bir sırada durur ve altlarındaki bölümün neyle ilgili olduğunu söyler. Bir sayfanın kodunu Yapı kontrolü aracına yapıştır: yapıda neyin eksik olduğunu, örneğin başlıkları görürsün. (1.3.1 ve 2.4.6)

Kullanılabilir

7. Her şey sadece klavyeyle çalışıyor. Adres çubuğuna tıkla, fareyi bir kenara koy ve Tab ile sayfada ilerle. Shift+Tab ile geri gidersin. Her bağlantıya, düğmeye ve alana ulaşırsın ve hiçbir yerde takılıp kalmazsın. Bilinen bir sorun, Tab ile bir daha çıkamadığın bir video oynatıcıdır. (2.1.1 ve 2.1.2)

8. Hiçbir şey fark edilmeden hareket etmiyor ya da süresi dolmuyor. Birinin bir şeyi belli bir süre içinde yapması mı gerekiyor, örneğin bir süre sonra oturumu kapatan bir danışan portalında? O zaman kişi süre sınırını kapatabilir ya da epey uzatabilir, ya da zamanında bir uyarı alır. Bu uyarıdan sonra tek bir hareketle daha fazla süre istemek için en az 20 saniyesi olur. Kendiliğinden başlayıp beş saniyeden uzun kayan görsellerin bir duraklatma ya da durdurma düğmesi vardır. (2.2.1 ve 2.2.2)

9. Menüyü atlayabiliyorsun. Menü her sayfada var. Klavyeyle ya da ekran okuyucuyla gezinirken menüyü atlayamazsan, her seferinde içinden geçmen gerekir. Bilinen bir yol, sayfanın en üstündeki “İçeriğe geç” bağlantısıdır; bu bağlantıyı bazen ancak Tab’a ilk kez basınca görürsün. Böyle bir bağlantı görmüyorsan, web geliştiricine menünün nasıl atlanabileceğini sor, çünkü başka yollar da var. (2.4.1)

10. Sayfa başlıkları ve bağlantı metinleri konuyu söylüyor. Tarayıcı sekmesi sayfanın adını verir, örneğin “Mahalle ekibine başvuru”. En önemli kısım başta durur; yani “… web sitesine hoş geldiniz | Başvuru” değil. Bir bağlantı nereye gittiğini söyler; yani sadece “buraya tıkla” değil. (2.4.2 ve 2.4.4)

11. Nerede olduğunu her zaman görüyorsun. Tab ile ulaştığın bağlantı ya da düğme belirgin bir çerçeve ya da başka bir işaret alır. Bu çerçeve, sabit bir çubuğun ya da sohbet düğmesinin arkasında tamamen kaybolmaz. Tab ile sayfada mantıklı bir sırayla, okuduğun gibi ilerlersin: yukarıdan aşağıya ve soldan sağa. (2.4.3, 2.4.7 ve 2.4.11)

12. Düğmelere kolayca basılabiliyor, sürüklemeden de. Düğmeler ve bağlantılar en az 24’e 24 CSS pikselidir (web geliştiricilerin kullandığı ölçü) ya da çevrelerinde yeterli boşluk vardır. Cümlenin ortasındaki bir bağlantı bu şarta dahil değil. Böylece eli titreyen biri yanlış düğmeye daha az basar. Sürükleyerek yaptığın şeyler, örneğin takvimde bir randevuyu taşımak, bir tıklama ya da dokunmayla da olur. (2.5.7 ve 2.5.8)

Anlaşılabilir

13. Web sitesi hangi dilde yazıldığını biliyor. Böylece ekran okuyucu kelimeleri doğru telaffuz eder. Başka dilde bir metin parçası mı var? O zaman bu da kodda belirtilmiş olmalı. Bunu ekranda göremezsin, o yüzden web geliştiricine sor. (3.1.1 ve 3.1.2)

14. Metinlerin açık bir dille yazılmış. B1 dil düzeyinde yaz. Sade dil kontrolü Hollandaca bir metindeki uzun cümleleri ve zor kelimeleri gösterir; B1 kontrol listesi de sana yardım eder. AA düzeyi için bu bir şart değil: okuma düzeyi (3.1.5) AAA düzeyine ait.

15. Menü ve yardım her sayfada aynı yerde. Bu; menü, telefon numaran, sohbet ve iletişim bağlantısı için geçerli. Böylece takılıp kalan biri yardımı yeniden bulur. Önemli olan sıradır: telefon numarası bir sayfada menünün altındaysa, diğer sayfada da orada durur. (3.2.3 ve 3.2.6)

16. Formlar ne yapman gerektiğini açıklıyor. Her alanın görünür bir etiketi var. Etikete tıklarsan alana geçersin ya da kutuyu işaretlersin; bu, küçük yuvarlak seçim düğmelerinde de işe yarar. Bir hata mesajı hangi alanın yanlış olduğunu ve nasıl düzelteceğini kelimelerle söyler. Örnek: “Doğum tarihini gün-ay-yıl olarak yaz, 03-11-1985 gibi”. (3.3.1, 3.3.2 ve 3.3.3)

17. Hiçbir şeyi iki kez doldurman gerekmiyor. Bir form birden fazla adımdan mı oluşuyor? O zaman daha önce doldurdukların zaten oradadır ya da onları aktarabilirsin, örneğin “Posta adresim, ev adresimle aynı” diye bir onay kutusuyla. Bir hata mesajından sonra da doldurdukların silinmez. Yeni bir şifreyi kontrol için bir kez daha yazdırmak ise olur. (3.3.7)

18. Bir şeyi hatırlamadan ya da bakıp yazmadan giriş yapılabiliyor. Test et: bir şifreyi kopyala, giriş alanına yapıştır ve bir şifre yöneticisinin onu doldurmasına izin verilip verilmediğine bak. Şifre yöneticisi, şifreleri saklayan bir programdır. SMS ile gelen bir giriş kodunu da yapıştırabilmen gerekir. Bu çalışmıyorsa ve bir şey hatırlamadan giriş yapmanın başka bir yolu da yoksa, giriş şarta uymuyor. (3.3.8)

Sağlam

19. Kod, yardımcı teknolojiye sayfada ne olduğunu söylüyor. Yardımcı teknoloji, ekran okuyucu gibi, insanların bir web sitesini kullanmasına yardım eden yazılımdır. Özel yapılmış düğmelerin ve menülerin bir adı ve rolü var (4.1.2). “Mesajın gönderildi” gibi bir mesaj, kodda mesaj olarak belirtilmiştir; böylece ekran okuyucu, sen oraya gitmeden onu sesli okur (4.1.3). Bunu kendin görmen zor: web geliştiricine sor.

Belgeler

20. PDF’ler ve diğer belgeler de erişilebilir. Bir PDF için de bir web sayfasıyla aynı şartlar geçerli. Bu yüzden önce bunun gerçekten PDF olması gerekip gerekmediğini düşün. Sıradan bir web sayfası çoğu zaman daha iyi bir seçimdir, örneğin küçük ekranda daha iyi çalıştığı için. Çok sayıda eski PDF’in varsa, önce eskimiş olanları kaldır.

Dikkat et

• Tam bir denetim de yaptır. Bir web sitesi bütün maddeleri geçip yine de insanları zorlayan yerler içerebilir. Tam bir resim için bir erişilebilirlik uzmanı web siteni WCAG’nin bütün şartlarına göre test eder.
• Bir test programının göremediğini kendin değerlendir. Otomatik test programları örneğin alternatif metnin eksik olup olmadığını görür, doğru olup olmadığını görmez. Bunu bir insan değerlendirir.
• Çözüm olarak bir eklenti kullanma. Web siteni tek seferde erişilebilir yapmayı vaat eden eklentiler var. Bu olmaz, hatta bu eklentiler yeni sorunlar da çıkarabilir.
• Sitenin hitap ettiği insanlarla test et. Bir danışandan ya da bir deneyim uzmanından (ervaringsdeskundige) web sitende randevu istemesini rica et. Nerede sorun çıktığını yanında izle. Tek bir kişi engeli olan herkes adına konuşamaz, bu yüzden mümkünse farklı engelleri olan insanları davet et.
• Bulduklarını yazıya dök. Bir erişilebilirlik beyanına neyin zaten iyi olduğunu ve neyi daha iyileştireceğini yaz. Erişilebilirlik beyanı hazırla aracıyla birkaç adımda Hollandaca bir beyan hazırlarsın.

Daha fazla bilgi

• Web siteni erişilebilir yapmak: kurumun için adımlar.
• WCAG nedir?
• Her ilkenin açıklaması: algılanabilir, kullanılabilir, anlaşılabilir ve sağlam.
• W3C’nin Easy Checks sayfası ↗ (İngilizce): adım adım daha fazla basit kontrol.