Makale Bu 8 Erişilebilir Tasarım Hatasından Kaçınarak Şefkati Eyleme Dönüştürün

Erişilebilir tasarım, yaş ve yetenekten bağımsız olarak tüm bireylerin benzersizliğine saygı duyar. Tüm insanların sizin gibi olmadığını kabul etmekle başlar.

Farklı kullanıcılara en iyi şekilde hizmet verebilmek için her türden insanı anlamak ve onlarla empati kurmak zorunludur. WCAG 2.0 AA yönergelerine uyulması, içeriği körlük ve görme bozukluğu, sağırlık ve işitme kaybı, öğrenme güçlüğü, bilişsel sınırlamalar, sınırlı hareket, konuşma engelleri veya ışığa duyarlılık dahil olmak üzere daha geniş bir yelpazedeki engelli kişiler için erişilebilir hale getirir. Web sitenizi ziyaret eden her kullanıcıya hizmet verdiğinizden emin olmak için bu sekiz erişilebilir tasarım hatasından kaçının.

1. Klavye Tuzakları

Yardımcı teknoloji kullanan bazı kişiler, ekranda görünen eylemlere güvenirler. Bu nedenle iyi tasarım, navigasyonla ilgili tüm içeriğin görünür olmasını sağlar. Kullanıcıların içeriği anlamalarına ve gezinme hakkında bilinçli seçimler yapmalarına yardımcı olmak için öğeleri mantıksal olarak (sol üstten sağ alta) sıraladığınızdan emin olun.

İpuçları:

• Ana içerik: Kullanıcıların ana içeriğe erişmek için üst düzey gezinmeyi kolayca atlamaları için bir yol sağlamayı düşünün.
• Kullanıcı Arabirimi kalıpları: Geçiş, Sekmeler, Tablolar, Modal Pencereler ve ARIA öznitelikleri gibi yaygın kalıpların semantiğini takip edin.
• Fareyle üzerine gelme kullanımı: Bir fareyle üzerine gelme durumunun arkasındaki metni veya eylemleri gizlemeyin. Yalnızca klavye kullanan bir kullanıcı bir içeriğin/düğmelerin var olduğunu göremezse, sayfada gezinemez.

İyi Bağlantıları Atla Örnek #1

İyi Bağlantıları Atla Örnek #2

2. Yetersiz Renk Kontrastı

Yetersiz renk kontrastı, insanların görsel olarak bilgi alma yeteneğini etkiler. Metnin okunabilir olmasını sağlamak için metin ile arka planı arasında yeterli kontrast olduğundan emin olun. Metin ve metnin arka planı arasındaki kontrast oranı en az 4,5 ila 1 olmalıdır. Ancak, metniniz en az 24 piksel veya 19 piksel kalınsa, minimum değer 3 ila 1'e düşer.

İpuçları:

• Renk paletleri: Ana renklerin bilincinde olun. Ayrıca, renkleri seçerken renk kontrastı gereksinimlerini göz önünde bulundurun.
• Yalnızca renge güvenmeyin: Anlamı iletmek ve tutarlı olmak için şekil, renk ve metin kombinasyonlarını (tek başına değil) kullanın. Renkleri kolayca ayırt edemeyen kişilerin içeriğinizi anlayabilmesi için en az iki gösterge sağlayın.
• İstisnalar: İçeriğin anlamını anlamak için gerekli olmayan veya salt "dekorasyon" olan metinler, metin görüntüleri, resimler ve logolar.

Yetersiz Kontrast Örneği

3. Görüntülerdeki Metin

Okunması amaçlanan metin resimlerini kullanmaktan kaçının. Görüntü tabanlı metin sunumu yerine CSS ile biçimlendirilmiş gerçek metni kullanın. Metin görsellerinin kullanılması gereken durumlarda, alternatif metin görselde sunulan metnin aynısını içermelidir.

İpuçları:

• Diyagramlar, çizelgeler, tablolar: Veri görselleştirmelerinde gerçek metin kullanın. Gerçek metin mümkün değilse, görüntü tarafından aktarılan temel bilgilerin metinsel bir temsili esastır. Örn: Uzun açıklama veya liste görünümü.
• İstisnalar: İyi açıklayıcı metin alternatiflerine sahip logolar, marka öğeleri ve grafikler.

Resimdeki İyi Metin Örneği

4. Gizli Odak Durumları

Odak durumları, kullanıcıların gezinmelerine ve nerede olduklarını anlamalarına yardımcı olur. Onları asla saklama. Odak durumları, klavye kullanıcıları için önemlidir. Bir sayfada nerede olduklarını anlamalarına yardımcı olur. Sitenizi test etmek için sayfanızda gezinmeyi deneyin ve odak noktanızı bulun.

İpuçları:

• Odak durumları: Varsayılan odak durumlarını kaldırırsanız, bunları tarayıcınızın sağladığından daha iyi çalışan bir şeyle değiştirdiğinizden emin olun.
• Girdi durumları: Bir girdinin içine odaklandığınızda etiketlere ne olduğunu düşünün.
• Sayfa eylemleri: Eylemlerin odak yan etkilerini açıkça tanımlayın.

Gizli Odak Durumları

İyi Odaklanma Durumları

5. Kafa Karıştırıcı Hiyerarşik Yapı

Algılanabilir içerik ile program aracılığıyla belirlenebilen içerik arasında net ilişkiler oluşturun. Anlamsal olarak anlamlı sayfalar tasarlayın, böylece geliştiriciler onu tasarımdan koda çevirebilir ve bir ekran okuyucu doğru okuma sırasını belirleyebilir.

İpuçları:

• Semantik: Formlara gerekli alanları ve etiketleri ekleyin. Sütun başlıkları olan tablolar tasarlayın.
• Mantıksal Gruplamalar: İlgili öğeleri geniş alan veya arka plan renkleri ile gruplayın. İşlem şemaları veya adım adım talimatlar gibi bilgileri sırayla sunun.
• Aşamalı Açıklama: Doğrudan manipülasyon için tasarım. Doğru şeyleri doğru zamanda sunun. Aşamalı açıklama yapın.
• Yol bulma: Navigasyon için tutarlı ipuçları oluşturun. Sayfa içinde net yer işaretleri oluşturmak için başlıkları kullanın.
• Tutarlılık: Aynı olan şeyleri aynı şekilde sunmak.
• Farklılaştır: Farklı içerik türlerini ayırt edin.

Kötü Hiyerarşi

İyi Hiyerarşi

6. Aşırı Bilişsel Yük

Anlaşılması kolay olan bilgileri açıkça iletin. Bilgiyi, dikkat eksikliği hiperaktivite bozukluğu (DEHB) ve otizm veya otizm-spektrum bozuklukları ile yaşayanlar için tüketmeyi kolaylaştıracak şekilde tasarlayın.

İpuçları:

• Özlü olun: Bilgileri ayırmak için kısa cümleler ve görsel ipuçları kullanın. Ör: sayıları veya madde işaretlerini kullanarak grupları listeleyin.
• Bilişsel yükü en aza indirin: Bilgileri doğru zamanda doğru yerde sunan bir anlatı oluşturun. Bölünebilecek yoğun bilgi paragrafları sunmaktan kaçının. Uzun hat önlemlerinden kaçının.

7. Farklılaşmamış Köprüler

Bağlantılar, web'deki en yaygın öğelerden biridir ve genellikle web sitelerinde gezinmek için hayati önem taşır. Bağlantılar bağlantılar gibi görünmeli ve başka hiçbir şey olmamalıdır. Kullanıcılar, bağlantı gibi görünen ancak olmayan metinsel ifadelere veya grafiklere tıklamaya çalışırlarsa hayal kırıklığına uğrayabilirler. Bağlantılar bağlam dışında anlamlı olmalıdır.

İpuçları:

• Net olun: Sonucun tahmin edilebilir olması için belirsiz terminoloji yerine düğmeler için açıklayıcı kelimeler kullanın.
• Altı çizili olmayan bağlantılar: Bağlantı metni, çevresindeki bağlantı olmayan metinden 3:1 kontrast oranına sahip olmalıdır.
• Yalnızca renge güvenmeyin: Bağlantı, hem fareyle üzerine gelindiğinde hem de klavye odağında "renksiz bir gösterge" sunmalıdır. Ör: alt gölgeler, ölçek, geçişler/dönüşümler, renk değişiklikleri veya alt çizgi.

Kötü Köprüler

İyi Köprüler

8. Okunamayan Tipografi

Web sitelerindeki çoğu bilgi metin yoluyla iletilir, bu nedenle yazı tipi okunaklı ve okunabilir olmalıdır. Bu, az gören kişilerin karakterleri kolayca ayırt etmesine yardımcı olur. Öğrenme güçlüğü olan biri için okuma zorluğunu azaltabilir. İyi boşluklarla temiz, basit tipografi kullanın. Metnin kolayca okunmasını sağlamak için rahat karakter aralığı ve satır aralığı uygulayın.

İpuçları

• Kullanıcılara kontrol verin: Gövde kopya boyutunu daha küçük bir yazı tipi boyutuyla değiştirerek kullanıcıların kendi okuma deneyimlerini uyarlamalarını engellemeyin. Bunu, yazı tipi boyutunu %100'e ayarlayarak yapabilir ve başlıklar arasında hiyerarşi oluşturmak için göreli boyutları kullanabilirsiniz. Metin hala %200 oranında okunaklı olmalıdır.
• Alt çizgileri, italikleri ve büyük harfleri azaltın: Bu harf biçimlerinin tanınması ve okunması daha zordur.
• Uzun biçimli metni sola hizalayın: Gözün takip etmesi için doğrusal yollarla tutarlı düzenler oluşturun.

%100'de yakınlaştır

Metninizi yeniden boyutlandırın. Sayfanızın/sayfalarınızın görme engelli kullanıcılar ve az gören kullanıcılar için erişilebilir ve kullanılabilir olduğunu kontrol edin. Metni yeniden boyutlandırın ve sayfadaki her şeyin çalıştığından emin olun. %200 yakınlaştırma elde edene kadar tekrarlayın. Basit görünüyor mu? Bu.

Tipografinizi kontrol etme adımları:

1. Tarayıcınızı açın ve metni yüzde 200 olarak yeniden boyutlandırın. Görünüm'e tıklayın, Yakınlaştır'ı seçin ve ardından metin boyutunu büyütmek için Yakınlaştır'a (Ctrl/Cmd ++) tıklayın.
2. Ekrandaki içeriğin nasıl tepki verdiğine bir göz atın. Sayfadaki tüm içerik hala okunabilir olmalı ve hiçbir işlevsellik kaybolmamalıdır.
3. Etkileşimlerin hala çalışıp çalışmadığını, metnin üst üste gelip gelmediğini, önemli metnin kesilip kesilmediğini veya metnin kesilip kesilmediğini kontrol edin.

%200'de yakınlaştır

İpuçları:

1. Tarayıcınızı açın ve metni yüzde 200 olarak yeniden boyutlandırın. Görünüm'e tıklayın, Yakınlaştır'ı seçin ve ardından metin boyutunu büyütmek için Yakınlaştır'a (Ctrl/Cmd ++) tıklayın.
2. Ekrandaki içeriğin nasıl tepki verdiğine bir göz atın. Sayfadaki tüm içerik hala okunabilir olmalı ve hiçbir işlevsellik kaybolmamalıdır.
3. Etkileşimlerin hala çalışıp çalışmadığını, metnin üst üste gelip gelmediğini, önemli metnin kesilip kesilmediğini veya metnin kesilip kesilmediğini kontrol edin.

Kaynaklar

Amerika Birleşik Devletleri'nde kabaca sekiz kişiden biri engellidir. Tanım, orta derecede engellileri kapsayacak şekilde genişletilirse, bu sayı neredeyse beşte bire fırlıyor.

Bu kadar geniş bir kitleye hitap edememek, bir web sitesinin işletmeniz üzerindeki olumlu etkisini sınırlar - markanızın insanlarla rezonansa girme ve inanç uyandırma yeteneğinden bahsetmiyorum bile. Mümkün olduğunca çok sayıda tarayıcıda ve mümkün olduğunca çok kişi tarafından kullanılabilen erişilebilir bir web sitesi oluşturmak işinize yardımcı olabilir - ancak aynı zamanda yapılacak en doğru şeydir. Bu yüzden konuyla ilgili birkaç kaynak daha bir araya getirdik.

• İşletmelerin web erişilebilirliğini düşünmesinin (ve kurumsal bir davadan kaçınmanın) neden önemli olduğunu öğrenin.
• Web erişilebilirliğinin önemiyle ilgili Solving for B° Podcast'ini izleyin.

Renk Kontrastı

• Web AIM Kontrast Denetleyicisi
• Renklendirilebilir Kontrast Denetleyicisi

Yapı

• Başlıklar Haritası Chrome Uzantısı
• A11Y Proje Desen Kitaplığı

Kredi

• A11Y Projesi
• w3.org- WCAG 2.0
• w3.org- Standartlar ve Genel Bakış
• kullanılabilirlik.org
• IBM'de Erişilebilirlik Araştırması
• Pittsburgh Carnegie MüzeleriDisney.com iyi hiyerarşi