Geliştirme

Site erişilebilirliği: kimin için ve neden

Erişilebilirlik yalnızca engelli bireyler için gerekli değildir. Kontrast, klavye, alan etiketleri ve alternatif metin — ve bunu baştan kurmanın neden daha ucuz olduğu.

Erişilebilirlik genellikle "sosyal sorumluluk" kategorisine bırakılır: faydalı ama gelirle ve bizim durumumuzla ilgili değil. Bu yanlış bir çerçevedir. Erişilebilirlik gereksinimlerinin büyük kısmı her ziyaretçinin karşılaştığı sıradan durumları tarif eder ve bu gereksinimlerin karşılanmaması her gün size talep kaybettirir.

Gerçekte kimin ihtiyacı var

Erişilebilirlik, sitenin ideal olmayan koşullarda kullanılabilmesiyle ilgilidir. İdeal olmayan koşullar herkesin başına gelir.

  • Kişi telefon ekranını parlak güneşte okuyor. Beyaz zemin üzerindeki açık gri metin var olmaktan çıkıyor.
  • Kişinin faresi bozuldu veya şarjı bitti ve sayfada Tab tuşuyla geziniyor.
  • Kişi gürültülü bir yerde kulaklıksız video izliyor — ve altyazı olmadan hiçbir şey anlamıyor.
  • Kişi bir koluyla çocuk tutuyor ve küçük düğmeleri ıskalıyor.
  • Kişi elli yaşın üzerinde ve küçük yazıyı otuz yaşındaki tasarımcıdan daha zor okuyor.
  • Kişinin interneti yavaş, görseller yüklenmedi — ve ürünler yerine boş dikdörtgenler görüyor.
  • Kişi göremediği için ekran okuyucu kullanıyor.

İlk altı madde bir azınlık değildir. Sıradan bir kitlenin sıradan bir günüdür. Ve bu durumlarda yardımcı olan çözümler, son maddenin ihtiyaç duyduklarının tam olarak aynısıdır.

Erişilebilirlik özel kullanıcılar için sitenin ayrı bir sürümü değildir. Geliştiricinin ofisinden farklı koşullarda test edilmiş ana sürümün kalitesidir.

Pratikte ne anlama gelir

Kontrast

En yaygın ve en ucuz ihlal. Beyaz üzerinde açık gri metin, açık zemin üzerinde beyaz, alt zemini olmayan fotoğraf üzerine yazı — hepsi içeride okunur, dışarıda kaybolur.

Doğrulanabilir bir kriter vardır: metin ile zemin arasındaki parlaklık oranı. Uluslararası erişilebilirlik yönergeleri WCAG, normal ve büyük metin için ayrı asgari değerler belirler. Bu bir zevk meselesi değildir — kontrast bir araçla hesaplanır ve sonuç ya eşiği geçer ya geçmez.

Yalnızca metin değil, giriş alanlarının kenarlıkları, simgeler, düğme durumları da ayrıca kontrol edilir. Üzerine gelindiğinde yalnızca zar zor fark edilen bir tonla değişen düğme, yalnızca renk görme bozukluğu olanlar için değil — basitçe görünmediği için erişilemezdir.

Ve ilgili bir kural: renk anlamın tek taşıyıcısı olmamalıdır. Formdaki hata yalnızca kırmızı çerçeveyle belirtiliyorsa insanların bir kısmı onu görmez. Bir yazı da gerekir.

Klavyeyle kontrol

Kontrol bir dakika sürer: sitenizi açın ve yalnızca Tab ve Enter tuşlarıyla gezmeyi deneyin. En sık bozulan üç şey.

  1. Odağın nerede olduğu görünmüyor. Geliştirici aktif öğenin etrafındaki "çirkin" çerçeveyi kaldırdı ve yerine hiçbir şey koymadı. Sonuç olarak kişi Tab'a basıyor ve nereye geldiğini anlamıyor.
  2. Tuzaklar var. Açılır pencere açıldı ama klavyeyle çıkılamıyor. Ya da odak bir widget'a düşüp geri dönmüyor.
  3. Basılamıyor. Düğme tıklama işleyicisi olan sıradan bir blok olarak yapılmış ve klavye onun üzerine hiç gelmiyor.

Faydalı bir ayrıntı — sayfanın en başında "içeriğe geç" bağlantısı, böylece her seferinde tüm menüden geçmek gerekmez.

Alan etiketleri

Etiket kalıcı ve alanla ilişkilendirilmiş olmalıdır. Yaygın bir hata, etiket yerine alanın içindeki ipucudur: kişi yazmaya başladı, ipucu kayboldu ve artık hangi alanda olduğunu hatırlamıyor. Özellikle uzun formlarda ve telefondan doldururken acı vericidir.

Sonra format gelir. Telefon belirli bir biçimde girilmeliyse bu gönderimden sonra hata olarak çıkmamalı, önceden yazılmalıdır. Hatanın kendisi tam olarak neyin yanlış olduğunu ve ne yapılması gerektiğini söylemeli, üstte genel bir satır olarak değil alanın yanında durmalıdır.

Zorunlu alanlar açıkça işaretlenir. Daha da iyisi — olmadan idare edilebilecek şeyi zorunlu yapmamak: her fazla alan gönderilen form sayısını azaltır.

Alternatif metin

Görselin metin açıklaması, görsel anlam taşıdığında gerekir: ürün fotoğrafı, şema, ekran görüntüsü, grafik. Açıklama dosya adını veya anahtar kelime yığınını değil anlamı aktarmalıdır.

Tamamen dekoratif görsellerin açıklamaya ihtiyacı yoktur — ekran okuyucunun onları atlaması için dekoratif olarak işaretlenmeleri doğrudur. Arka plan desenlerini sesli anlatmak sessiz kalmaktan kötüdür.

Ayrı bir durum görsele gömülmüş metindir. Ne büyütülebilir, ne seçilebilir, ne çevrilebilir, ne aramayla bulunabilir. Görsel olarak fiyat listesi veya kampanya koşulları kaybolmuş bilgidir.

Yapı ve anlaşılır metin

Başlıklar büyük kalın metin değil, başlık olmalıdır. Seviyeler sırayla gider — ekran okuyucular, arama motorları ve sayfayı gözleriyle tarayan insanlar onlara göre yön bulur.

Bağlantılar bağlam dışında anlaşılır olmalıdır. Arka arkaya on "devamı" bağlantısı hiçbir şey söylemez; "teslimat koşulları" söyler. Aynı kural sayfaya çaprazlama göz gezdiren herkesin hayatını kolaylaştırır.

Baştan kurmak neden daha ucuz

Fark iş hacminde değil, tam olarak neyin yeniden yapılması gerektiğindedir.

Tasarım aşamasında kontrastlı bir renk çifti seçmek sıfır ek maliyettir. Lansmandan sonra bu, paletin ve onunla birlikte eski renklerle yapılmış tüm maketlerin, bannerların ve reklam materyallerinin gözden geçirilmesi demektir.

Kodlama aşamasında düğmeler ve alanlar için doğru öğeleri kullanmak da sıfır maliyettir, basitçe doğru yoldur. Lansmandan sonra bu, arayüzün yeniden yazılması ve tüm senaryoların yeniden test edilmesidir.

Tasarım sırasında forma etiket eklemek bir dakikadır. Analitiği ve CRM entegrasyonu zaten ayarlanmış bir formu yeniden yapmak, regresyon testli ayrı bir görevdir.

Buna, erişilebilirlik çözümlerinin bir kısmının diğer göstergeleri doğrudan iyileştirdiğini ekleyin: doğru başlık yapısı aramaya yardım eder, anlaşılır etiketler ve hata ifadeleri doldurulan form payını artırır, görsellerde metinden vazgeçmek içeriği dizinlenebilir kılar. Bu hayırseverlik değil, normal uygulama kalitesidir — biz ona siteler üzerindeki çalışmanın bir parçası olarak yaklaşıyoruz.

Doğrudan gereksinimler de vardır: bazı sektörlerdeki kuruluşlar ve kamu müşterileriyle çalışan herkes erişilebilirlik standartlarına uymak zorundadır. Bu projeler için soru "gerekli mi" değil, "nasıl kanıtlanır"dır.

Bugün neyi kontrol etmeli

  1. Siteyi Tab tuşuyla gezin: odak görünüyor mu, tüm düğmelere ulaşılabiliyor mu, açılır pencerelerden çıkılabiliyor mu.
  2. Ana sayfayı güneşli bir günde dışarıda telefondan açın.
  3. Ana renkleri herhangi bir kontrast hesaplayıcısından geçirin ve WCAG eşikleriyle karşılaştırın.
  4. Form alanlarının kalıcı etiketleri ve anlaşılır hata mesajları olup olmadığını kontrol edin.
  5. Anlam taşıyan görselleri bulun ve açıklamaları olduğundan emin olun.
  6. Yalnızca görsel olarak var olan önemli bir bilgi olup olmadığını kontrol edin.
  7. Başlıkların seviye sırasıyla gidip gitmediğine ve büyük kalın metinle değiştirilmediğine bakın.
  8. Tarayıcıda sayfayı yakınlaştırın ve düzenin dağılmadığından emin olun.

İlk dört madde gerçek sorunların büyük kısmını kapatır. Kontrol sırasında nasıl düzeltileceği belli olmayan bir şey bulursanız bize yazın — somut durumu ele alalım.