Basit Adımlarla Engelleri Ortadan Kaldırabiliriz

Merhabalar, bu makalemizde web uygulamalarını engelli kullanıcılar için nasıl daha kolay kullanılabilir hale getirebileceğimizden bahsetmeye çalışacağım.

Web ortamında artık çok sayıda kitleye erişebilir durumdayız. Buna istinaden her kullanıcıya hitap edebilecek web uygulamaları yazmak, gelişen tarayıcı ve cihazlar ile mümkün kılınmıştır.

Şimdi hep birlikte kodlama yaparken dikkat edilmesi gereken unsurları gözden geçirelim.

Peki nedir bu basit unsurlar?

Font Boyutları

Alınması gereken temel önlemlerden biri font boyutlarıdır. Font boyutlarının standartlardan biraz daha büyük olması gerekmektedir. Aynı zamanda rahat okunabilir bir font seçimi tercih edilmelidir. Tabi ki font boyutu kullanıcıyı çok rahatsız edecek boyuta getirilmemelidir.

Hatta mümkün ise kullanıcıya okuma alanındaki metnin boyutunu kendisinin ayarlamasını sağlamak çok daha olumlu sonuçlar verecektir.

Renk Seçimleri

En önemli etkenlerden bir tanesi de renk seçimleri ve uygun kontrast. Gerek uygulamanın arayüzü, gerekse font ve görsellerin renkleri birbirinden rahatlıkla ayırt edilebilmelidir. Zıt renkleri tercih etmek daha okunabilir, ayırt edilebilir bir ekran oluşturmanızı sağlayacaktır.

Daha Az Animasyon

Animasyon her zaman hoşumuza gitmiştir. Ancak görme engelli kullanıcılarımız için bu animasyonlar çok da hoş olmayacaktır. Elbette basit animasyonları kullanarak uygulamamıza bir hareket kazandırabiliriz. Hızlı animasyonların yerine daha yavaş animasyonlar tercih etmeliyiz.

Ses ve Video Öğeleri

Eğer uygulamamız üzerinde önceden kaydedilmiş bir ses dosyası ya da video varsa içeriğin tamamının ya da detaylı özetinin metinsel alternatifi kullanıcıya sunulmalıdır. Eğer öğe video ise videoda alt yazı bulunması da çok büyük önem taşımaktadır. Örneğin görme engelli bir kullanıcımız video öğesinin içeriğinden faydalanabilmesi için okuyabileceği ya da ekran okuyucu programlar aracılığı ile dinleyebileceği metin biçimi sağlanmalıdır.

Etkileşim Gösteren Objeler

Uygulama üzerinde mouse ile yapılabilecek her işlem klavye ile de yapılabilmelidir.

Aşağıdaki birinci örneğin kullanımı yalnızca mouse ile tıklandığı zaman tetiklenebilen bir yazım biçimidir. İkinci örnekte ise işleme klavye ile erişilebilecektir.

Klavye Kilidi

Aslında bir çoğumuzun karşılaştığı ve genellikle de hoşlanmadığı bir durumdur. Özellikle güvenlik için yapılmış olan bu uygulama aslında bazı engelli kullanıcılar için tam anlamıyla bir kabus olmaktadır.

Örneğin; Şifre isteyen bir alanda klavye ile girişe müsaade edilmeyip ekranda çıkan bir mini klavye ile tıklanarak şifre girişini sağlayan uygulamalar.

alt ve title Özellikleri

Genellikle <img> <a> ve <input> etiketleri için kullanılmaktadır.

<img> etiketi için “title” ve “alt” özellikleri eklenmesi gerekmektedir. alt görselin yüklenememesi durumunda ekranda görünecek metinsel ifadedir. title ise görsel üzerinde mouse ile durulduğu zaman açılan tooltipte yer alan metinsel ifadedir.

Aynı şekilde <a> ve <input> etiketlerinde de title özelliğinin kullanılıyor olması mouse ile üzerinde durulduğu zaman açılan tooltip’in görüntülenmesini sağlar.

Focus ve Focus Sırası

Focus; uygulamamızın etkileşim gösterme potansiyeli olan alanları ifade etmektedir. Bunlar: input, button, link vb öğelerdir.

Klavyeden “Tab” tuşuna bastıkça sırasıyla bu elemanlar üzerinde focus gerçekleşir yani imleç ilgili alanına odaklanır. Herhangi bir öğe focus olma durumunda bir focus efekti gelir. Bu focus efektini genellikle CSS aracılığı ile kaldırılır.

Örneklerimize input üzerinden devam edelim.

Aşağıdaki görselde input focus durumunda.

Ancak bu efekt kaldırıldığı zaman şöyle bir görüntü oluşmaktadır.

Bu durumda kullanıcı hangi inputa focus olduğunu bilemeyeceğinden dolayı erişilebilirlik adına doğru bir kodlama olmayacaktır.

Sayfamızda bir form olduğunu varsayalım. Her input için “tabindex” değeri vermek kullanıcı tarafından daha kolay bir kullanım sağlayacaktır.

HTML yapımıza göre bazı durumlarda form inputlarımızı olması gereken sıraya ekleyemeyebilir. İsim — Soyisim — Doğum Yeri — Mail Adresi diye 4 inputumuzun olduğunu varsayalım. Her inputa sırasıyla “tabindex” değeri vermek; “Tab” tuşuna basıldıkça sırayla doğru inputlara odaklanmamızı sağlayacaktır.

aria-label

aria-label, geçerli olan elementi metin olarak tanımlamak için kullanılmaktadır. Ekranda gözükmeyecek olan bu metinsel ifade tüm tarayıcılar ve ekran okuyucular tarafından desteklenmektedir.

aria-labelledby

aria-labelledby, aria-label gibi geçerli olan elementi tanımlamak için kullanılır. aria-label ile arasındaki fark ekranda görünür olan metinlerin tanımlanmasında kullanılıyor olmasıdır.

Engelsiz bir uygulama herkesin elinin altında

Yukarıda bahsettiğimiz tüm detaylar bütün kullanıcılar için faydalı olmakla birlikte Google tarafından da sitemizin değerinin daha da artmasını sağlayacaktır. SEO açısından da önemli olan bu standartlar sitenizin Google’da üst sıralarda yer almasında faydalı olacaktır.

Nasıl test edebilirim?

Erişilebilirlik ile ilgili bir çok test ortamı bulunmaktadır. Bu testlere ücretli ya da ücretsiz erişebilirsiniz. Bu testleri sizin için ücretli olarak da yapan firmalar da vardır. Ben genellikle https://wave.webaim.org/ üzerinden testlerimi ücretsiz olarak gerçekleştiriyorum.

Yukarıda anlattığım tüm detaylar kendi kullandığım yöntemler ve araştırmalarım sonucunda sizlerle paylaştıklarımdır. Her şeyden öte olan engelli kullanıcıların da kolaylıkla bizler gibi bu içeriklerden faydalanabiliyor olması.

Bu konu hakkında hepimizin daha da duyarlı olmasını yorumlarınızı ve önerilerinizi bekliyorum. Zaman ayırıp okuduğunuz için teşekkür ediyorum.