Harika tasarım, web sitesi erişilebilirliğini nasıl etkiler?

Geniş erişilebilirlik disiplinine bir başlangıç ​​noktası mı arıyorsunuz? Dijital ürünlerinizi daha fazla kullanıcı için kapsayıcı hale getirerek geliştirmek için tasarım sürecinize uygulayabileceğiniz gerçek uygulamaları ve araçları inceleyeceğiz.

Erişilebilirlik nedir?

Erişilebilir web siteleri, daha geniş bir kullanıcı yelpazesinin web sitenizdeki içerikle sorunsuz bir şekilde etkileşim kurmasını sağlar. Konuya ister UI ister UX perspektifinden yaklaşalım, odak noktamız farklı bir kitleye uygun kaliteli bir ürün yaratmaktır.

Bu çeşitli izleyici kitlesi “kalıcı, geçici veya durumsal herhangi bir sakatlık yaşayan herkesi kapsar; örneğin, yalnızca bir kola sahip olmak kalıcı bir durumdur, yaralı bir kola sahip olmak geçicidir ve bir bebeği bir kolda tutmak durumsaldır - her durumda, kullanıcı, görevleri yalnızca tek elle tamamlayabilir.” (Avinash Kaur, 2018).

Erişilebilirlik neden önemlidir?

Tasarımcılar olarak, durumları, yetenekleri veya bağlamları ne olursa olsun tüm kullanıcıların erişebileceği şekilde tasarım yaptığımızdan emin olmak bizim sorumluluğumuzdur. Sonuç olarak, web, ister bilişsel engelli, ister görme engelli, isterse fiziksel engelli olsun, herkesi kapsayan bir alan olabilir.

Erişilebilir bir web sitesi oluşturmak, büyük miktarda bütçe veya değişiklik gerektirmez. Ek özellik veya içerik gerektirmediğinden erişilebilirlik, bir tasarım projesinin başlangıcında eğitim ve farkındalık yoluyla sağlanabilir.

İş için de önemli olduğu tartışılabilir: araştırmalar, erişilebilir web sitelerinin daha iyi arama sonuçlarına sahip olduğunu, daha büyük bir kitleye ulaştıklarını, SEO dostu olduklarını, daha hızlı indirme sürelerine sahip olduklarını, iyi kodlama uygulamalarını teşvik ettiklerini ve her zaman daha iyi kullanılabilirliğe sahip olduklarını gösteriyor.

Erişilebilirliği nasıl sağlarız?

Çeşitli yetenekler, yaşlar ve cihazlarla ilgili deneyim düzeylerine göre tasarım yaptığınızdan emin olmak için belirli ayarlamalar yapmanız ve bir çerçeve izlemeniz gerekir.

Erişilebilirlik, dijital ürünlere uyacak şekilde sürekli gelişen bağımsız bir disiplindir. Ancak aynı şekilde yazılım çözümleri de büyüyor. Bu, konuyla ilgili her şeyi kapsayamayacağımız anlamına gelir, ancak bu makaleyi faydalı bulursanız, 2. bölümü yapabiliriz!

5 büyük alana derin bir dalış yapacağız:

1. Renk kontrastı
2. Alternatif yazı
3. Odak durumları
4. Formlar
5. tipografi

Renk kontrastı

Metin ve arka plan arasında yeterli renk kontrastı olmasını sağlamak, görme güçlüğü çeken kullanıcılara yardımcı olur. Bu, beklenenden daha fazla sayıda kullanıcıyı etkiler ve genellikle bir sorun olarak göz ardı edilir. Bununla birlikte, 12 erkekten 1'i renk körüdür ve diğerleri az gören veya kördür.

Başlangıç ​​olarak, erişilebilirlik yönergeleri, rengin hiçbir zaman bilgi aktarmanın tek yolu olmaması gerektiğini belirtir. Başka bir deyişle, rengi farklı algılayan ve renk temelli talimatlarımızı kaçırabilecek kullanıcılar için ek bir ipucu olmalıdır.

Metin ve arka plan arasında iyi bir kontrast sağlamak için, izlenecek iyi bir oran minimum 4,5'e 1'dir. Bu, az gören veya renk körlüğü olan kullanıcıların ikisi arasında ayrım yapabilmesi için netlik sağlar.

4,5'e 1 kontrast oranı, AA uygunluk düzeyine bağlıdır (üç düzeyden: A, AA ve AAA), ancak bu, yazı tipi boyutuna ve ulaşmak istediğiniz uyum düzeyine göre değişir. Daha büyük yazı tipleri, 18 punto (veya 14 punto kalın) ise, yalnızca 3'e 1 oranında daha küçük bir kontrast oranı gerektirir.

Bu minimum oranlar, bir logo veya marka adı içindeki metinler için geçerli değildir, ancak bu kullanışlı aracı kullanarak kontrast oranınızı kendiniz kontrol etmenizde fayda var.

Alternatif yazı

Web'e ekran okuyucuları kullanarak erişen kullanıcılar için görüntülenen içerik her zaman doğru şekilde iletilmez. Alternatif (alt) metin, ekran okuyucunun kullanıcıya sayfada hangi resimlerin olduğunu bildirmek için kullandığı metindir.

Bu, alternatif metni braille'e, sesli açıklamaya dönüştürerek veya metni görsel olarak okuyarak yapılabilir. Bu, onu göremeyenler için görüntüde neler olduğunu doğru bir şekilde tanımlamanın önemli olduğu anlamına gelir.

Bazen alternatif metin eklemek gerekli olmayabilir. Örneğin, görüntüyü çevreleyen yeterli bağlamsal gösterge olabilir veya görüntünün estetikten başka bir işlevi yoktur.

Odak durumları

Muhtemelen farkında olmadan odak göstergelerine aşinasınız. Odak durumları, örneğin bağlantılar, menüler, düğmeler ve form alanları gibi bir öğe seçildiğinde görünen (genellikle) mavi ana hatlardır.

Bunlar, klavyeyi kullanırken kullanıcının o anda hangi öğeye odaklandığını gösterir. Genellikle bu göstergeler çirkin veya bir amaca hizmet etmiyormuş gibi görülür, ancak aslında çok önemlidirler. Pek çok kullanıcı yalnızca klavyeyi kullanmakla sınırlıdır ve ekran okuyucu kullanan görme engelli kişiler de sayfada gezinmeye yardımcı olmak için odak göstergelerine ihtiyaç duyar.

Odak göstergeleri, sayfa gezinmenizi çok az çabayla ve yine de kullanıcı için büyük bir farkla net ve erişilebilir hale getirmenin basit bir yoludur. Uygun renkler kullanarak markaya sorunsuz bir şekilde bağlanabilirler, sadece unsurların öne çıkması için kontrast oluşturmaları gerekir.

Formlar

Formlar herkes için karmaşık olabilir, ancak ek erişilebilirlik sorunları olanlar, formlar çok minimalist ve net olmadığında genellikle sorun yaşayabilir. Erişilebilirliğin üstesinden gelmek için ele alınması gereken bazı genel öğeler aşağıda listelenmiştir:

• Etiketler – alan dışındaki metin yerine etiket olarak yer tutucu metnin kullanılması, kullanıcı yazmaya başladığında metin kaybolduğundan karışıklık yaratır. Minimalizm veya estetik lehine kullanıcı için önemli talimatları atlamak, kaçınılması gereken büyük bir hatadır.
• Kenarlıklar – bir metin girişinin etrafındaki kenarlık kadar basit bir şey, bilişsel engelli kullanıcılar için önemlidir, bu nedenle nereye tıklamaları gerektiği açıktır
• Ek talimatlar – genellikle formlar, tasarımı dağıtmak için minimalist bir yaklaşım kullanır, ancak bu, kullanılabilirliği ve dolayısıyla erişilebilirliği engeller.
• Hata mesajları – bunlar birden fazla öğeyle belirtilmelidir, yaygın olarak renk kullanılır ancak buna ek olarak hatalar semboller veya metinlerle belirtilmelidir.
• İnceleme – formlar, kullanıcının herhangi bir bilgiyi düzeltmesine izin vermek için gönderilmeden önce bir inceleme süresine izin vermelidir.

tipografi

Tek bir alanda dağınık ve çok fazla olmadığında bilgiyi sindirmek daha kolaydır. Bu, erişilebilir web siteleri için de geçerlidir. Daha önce belirtildiği gibi, yazı tipi boyutu kontrast oranı için minimum gereksinimleri değiştirebilir, ancak yazı tipi boyutları 10 pt'nin altına düşmemelidir.

Gördüğünüz gibi 9 punto ile okumak zor.

Her iki metin satırı ve tek tek kelimeler arasındaki boşluk miktarını artırmak, görme engelli veya disleksi olan kullanıcılara yardımcı olabilir. Aşağıdaki minimum boşluk, bu kullanıcıların gereksinimlerinin karşılanmasını sağlar:

• Harf aralığı: x0.12 yazı tipi boyutu
• Kelime aralığı: x0.16 yazı tipi boyutu
• Satır aralığı: yazı tipi boyutunun x1.5 katı
• Paragraf aralığı: x2 yazı tipi boyutu

Sonuç

Şaşırtıcı bir şekilde, bu küçük değişiklikler erişilebilirlik üzerinde büyük bir fark yaratabilir. Web sitenizi Web İçeriği Erişilebilirlik Yönergelerine uydurmak için büyük bütçeler ve çok zaman gerektirmez, ancak bir kullanıcının deneyimini önemli ölçüde değiştirebilir ve bu nedenle işinizi de artırabilir.

Bu önerileri tasarım sürecinize eklemek ikinci doğa haline gelebilir ve daha erişilebilir web sitelerinin geleceğinin önünü açabilir - tasarımcılar olarak bu bize kalmış.

Kreatifinizle ilgili yardıma ihtiyacınız olursa bizimle iletişime geçmekten çekinmeyin.