Online Pazarlama Bloğu

Website Accessibility Optimization - Erişilebilirlik Optimizasyonu

April 12, 2020 • ☕️ 4 dk okuma • 🏷 SEO, Yazılım

Web Accessibility yapar mısınız?

İngiltere’den gelen emailde aynen böyle yazıyordu. South Hams’de bulunan bir turizm bürosu “web accessibility” hizmeti için kod yapısının tam uyum içinde olmasını istedi. Hızlı bir araştırma yaptım. Avrupa Birliği Parlementosu tarafından 2016 yılında bir yönerge yayınlamış. Gelişmiş bazı ülkelerde yasal zorunluluk olarak devreye girdi. O bazı ülkelere ilgili yazıda ulaşabilirsiniz. https://en.wikipedia.org/wiki/Web_accessibility. SEO süreçlerine benzemesi sebebiyle ekipte yazılım ve SEO kası bulunan bir kişi ile projeye başladık.

Website Accessibility Optimization Nedir

Web Accessibility - Erişilebilirlik Optimizasyonu Nedir?

Ben bu sürecin ismine “Erişilebilirlik Optimizasyonu” diyorum. Engelli kullanıcıların, online arayüzlerde zorluk çekmeden deneyimlerini tamamlayabilmesi için yapılması gereken süreçlerin bütünü. Sadece web’i kapsamıyor aslında uygulama tarafında da belirli regülasyonları telefon cihaz üreticilerine yaptırıyorlar.

Erişilebilirlik optimizasyonu 6 farklı segmenti kapsıyor:

  • işitsel
  • bilişsel
  • nörolojik
  • fiziksel
  • konuşma
  • görsel

Web Accessibility Örnekleri

Sağırlar için Web Accessibility

İşitme engenliler için sesli görüntü deneyimi için altyazı, caption çözümleri sağlanması gerekiyor. Bazı durumlarda, işaret dili devreye giriyor.

Örnek:

Youtube ve Google ürünlerinin bu konuda sağlam politikaları var. Youtube sesi algılayıp, altyazı desteği verebiliyor. Arayüzde bu süreçler hakkında kolay entegre edeceğiniz çözümler var. Bu bağlamda mevcut videoları tekrar editlemek yerine, örneğin bir videoya yazı eklemek bunu doğru saniyeye denk getirmek yerine, Youtube’a yükleyip, kendi arayüzü üstünden geliştirmeleri yapmanın çok daha kolay bir süreç olduğunu gördük.

Kör, görme engelli için Web Accessibility

Sanırım, en detaylı çalışma bu gruba yapılıyor. Çünkü kör olmanın alt fraksiyonları daha fazla. Renk körlüğü, az görme durumları, farklı çözümlere gereksinim duyuyor.

Screen reader (ekran okuyucu), körlerin işlevsel bulduğu bir ekipman. Bu bilgilerin eklenmesi standart hale geliyor:

  • videonun oluşturulma şekli;
  • videonun siteye nasıl eklendiği;
  • transkript;
  • sesli açıklama;
  • caption.

  • Bonus Bilgi: Caption ile Transkript arasındaki fark nedir? Transkript bir ses & video’ya ait düz metin. Caption ise bunun zamana dayalı versiyonu.

    Video oynatıcı için bir takım kurallara dikkat etmek gerekiyor:

  • Mouse & klavye ile kontrol edilebilir olması -durdurma, hızlandırma, ses v.s
  • Caption ekleme, çıkarma
  • Asla otomatik başlamamalı
  • Patlayan ışık olmamalı (PS4'den bilirsiniz Epilepsi'ye davet çıkarıyor)
  • Burada çok detaylı bir fact sheet bulabilirsiniz: https://www.accessibilityoz.com/factsheets/video/video-factsheet/

    Renk körlüğü?

    Erkeklerin %8 inde kadınların %1’inden az bulunuyormuş. Aşağıdaki görseli göremeyenler için sitedeki görsel ve textlerin optimizasyonuna ihtiyacınız var. Renk körlüğü web accessibility

    Renk kodlarının standart yapıda olması gerekiyor. Örneğin beyaz arka plana beyaz yazı 1:1 oranında. Siyah yazının beyaz arka planda olması ise 21:1 oranında veriliyor. Işık hassasiyeti olan kullanıcıya göre sitedeki tüm text yapısı (görsellerdekiler dahil) erişilebilir hale getirilmesi lazım. Örneğin saf kırmızı nedir? Size bir örneği:

    Bu saf kırmızıdır.

    (#FF0000) ile yapıldı. Saf kırmızı dediğimiz şey tam olarak bu renk kodunda ve arka planında olmalı. Parlaklık ve iki renk (yazı rengi-arkaplan rengi) uyumunun standartından bahsediliyor. Detaylı bilgi: https://webaim.org/articles/contrast/

    İnsan gözüne okunaklı gelen nesnelerin parlaklık ve arkaplan rengi uyumuna hiç bu kadar dikkat ettiniz mi? Bu aşağıdaki iki örnek sadece görme kaybı olan kişilerin değil, okuma zorluğu bulunan, yaşlandıkca görme bozukluğu yaşayan bir çok kişi için anlamlı:

    Renk körü ErişilebilirlikOptimizasyonu Renk körü ErişilebilirlikOptimizasyonu

    SEO’dan bildiğiniz alt_tag etiketleri, görünmez olarak bir açıklama sunuyordu görsel hakkında. Kör, screen reader kullanan kişiler için bu etiket yine çok anlamlı ve standartlardan birisi.

    FONT BÜYÜKLÜĞÜNÜN DE BİR STANDARTI VAR.

    Okunabilir yazı için 18pt veya 14pt, (koyu) bold yazın. Örnek olarak:
  • Grİ (#949494) 18 pt beyaz arka plan
  • Pembe (#C86ff1) 14 pt + koyu arkaplan beyaz

  • Facebook videolarında caption bulunma durumunda %12 daha fazla izlenme alınıyormuş ki bu 2016 yılı çalışması: https://www.3playmedia.com/2016/02/12/captions-increase-viewership-for-facebook-video-ads-by-12/

    Web Accessibility (Erişirebilirlik Araçları)

    Yine SEO’dan aşina olduğunuz crawler toolları, web erişirebilirlik süreci için çok faydalı. Sayfa bazlı belirli kriterleri baz alarak, size standartı sağlayıp sağlamadığınızı teyit edebiliyorsunuz:

    Contrast testi için: https://color.a11y.com/?wc3 Best Practices içeren tool https://www.webaccessibility.com/results Buton contrast’ını kontrol edebileceğiniz bir tool https://www.aditus.io/button-contrast-checker/

    ** Bu kaynaklar işinize yarayabilir: **

    The World Wide Web Consortium (W3C) geliştirdiği bir çok uluslarası standart gibi bu konuda da belirli başlıkları bir araya getirmiş. https://www.w3.org/WAI/fundamentals/accessibility-intro/

    Yeliz Yeşilada’nın Web Erişilebilirliği ile ilgili kısa sunumu: https://ocw.metu.edu.tr/pluginfile.php/11489/mod_resource/content/4/Web-Erisilebilirligi-1.pdf