Web Erişilebilirlik Tasarımının Temelleri için Tasarımcı Kılavuzu

Web, herkesin aynı içeriğe dünyanın her yerinden erişebileceği bir yer olmalıdır. Duyarlı teknikler uzun bir yol kat etti agnostik cihaz tasarımları. Ama ne hakkında erişilebilirlik-agnostik tasarımlar?

Web erişilebilirliği yıllardan beri vardır, ancak uygulanması teknoloji ve web geliştirmede yeni gelişmeler gerektirir. Birçok geliştirici yardım etmek ister, ancak erişilebilirlik için nasıl tasarlanacağını anlamak zordur, çünkü çok hareketli parçalar var. Bu, yüksek kontrastlı metin, kör için ses sayfaları, optimize medya ve JS / CSS tarayıcıları için geri dönüşler içerir.

Bu yazıda erişilebilirlik tasarımının temellerini, ne olduğunu, neyi çözmeyi hedeflediğini ve başlamak için atabileceğiniz adımları ele alacağım. Unutmayın, bu inanılmaz derecede ayrıntılı bir konudur ve tam olarak anlaşılması aylarca veya yıllarca sürecek bir uygulama olacaktır. Ancak, faydaları çabaya değer ve web projelerinizin tümü, her ziyaretçiye erişilebilir bir içerik izlenimi bırakacak.

Erişilebilirliğe Giriş

Genel olarak konuşursak, erişilebilirlik içerik oluşturma fikridir. herkes tarafından tüketilebilir. Bu, okuyamayan kör insanları içerebilir ve bir fareyi veya klavyeyi (veya her ikisini de çalıştıramaz) fiziksel engelli kişileri içerebilir..

Ama aynı zamanda insanları da içerebilir hafif eksiklikler Görme İnsanları içerebilir disleksi veya okuduğunu anlama sorunları. Aslında, fikri “web erişilebilirliği” içerir birinin web sitesiyle etkileşimde bulunmasını veya bir web sitesini tüketmesini etkileyebilecek her olası bozulma.

Belki daha da önemlisi, burada bir Wikipedia tanımında tanımlandığı gibi web erişilebilirliğinin neler sunabileceğidir:

Yine de, Anne Gibson, List Apart yazısında, Wikipedia'nın tanımının çok belirsiz olduğunu savunuyor sadece engelliler hakkında. Bu gerçekten ilgili herkes internette dünyanın her yerinden İnternete optimum erişime sahip olmayabilir.

Birçok geliştirici, erişilebilirliğin sadece okuyamayan kör insanlar için olduğunu düşünüyor. Ancak aslında dört ana web erişilebilirliği kategorisi vardır:

1. Görsel - az görme veya zayıf
2. İşitsel - işitme engelli veya sağır
3. Bilişsel - bilgiyi anlama veya tüketme zorluğu
4. Motor - klavye veya sesli komut programları gibi özel giriş aygıtları gerektirebilecek fiziksel erişilebilirlik sorunları

Bu kategorilerin her biri, web standartları kadar hızlı değişiyor. Ancak, WCAG'a (Web İçeriği Erişilebilirlik Kuralları) kabul edilmiş bu standartlarla bir istikrar duygusu vardır..

Gibi bazı web siteleri Devlet kurumlarının bu yönergeleri izlemeleri kanunen zorunludur.. W3C üzerinden uluslararası başvuruda bulunurlar.

Web erişilebilirliğinin arkasındaki bürokrasiye bir göz atalım ve sonra bazı uygulanabilir tasarım ipuçlarına dalalım..

W3C ve Erişilebilir Tasarım

Epeyce var web erişilebilirliği ile ilgili kısaltmalar. Konuyla ilgili yepyeni iseniz bunlar karmaşık olabilir, ancak bir kez basitleştiğinde umarım daha mantıklı olurlar.

• W3C (Dünya Çapında Web Konsorsiyumu) - Protokoller, diller ve düzenlemeler için web standartlarını tanımlayan uluslararası bir grup. Tüm resmi erişilebilirlik kuralları bu organizasyona girmektedir..
• TİÖ (Web Erişilebilirlik Girişimi) - Erişilebilirlikle ilgili her şeyi kapsayan resmi bir program. Bu şemsiye terim, modern erişilebilirlik için tüm kuralları, kuralları ve teknikleri içerir.
• WCAG (Web İçeriği Erişilebilirlik Yönergeleri) - Tasarımcıların web sitelerini erişilebilirlik düzeyine göre derecelendirmelerine yardımcı olacak bir grup standart ve kural.
• ARYA (Erişilebilir Zengin İnternet Uygulamaları) - JavaScript / Ajax ve benzeri teknolojilere dayanan erişilebilir zengin uygulamaların nasıl oluşturulduğunu tanımlayan özel bir standart. Bu yazı hakkında daha fazla bilgi için Anna Monus.

Aralarında WAI şemsiyesi altında başka kurallar var. ÜALD kullanıcı aracıları için ve ATAG web geliştirme araçları için. Şimdilik, WAI’nin önerileri ve WAI’nin WETAG ismi altında belirtilen kurallar ile ilgili önerilere en çok ilgi göstermelisiniz..

Daha fazla bilgi edinmek için harika bir kaynak, W3C’nin engelli WRC’den engellilerin İnternet’e nasıl eriştiğiyle ilgili öykülerini paylaşıyor. Tüm karmaşık sorunları anlamak, bunları nasıl çözeceğimizi bir an önce anlamak zor olabilir. Fakat En iyi kaynak, günlük olarak bu sorunlarla karşılaşan insanlardan geliyor..

Anlamanız gereken bir diğer önemli konu, WCAG uygunluğu. Bu ile ilgilidir bir web sitesinin erişilebilirlik düzeyi çok çeşitli faktörleri kapsayan. Seviyeler ile uyumluluk dayanmaktadır A, AA ve AAA derecelendirme sistemi. Bunu bir web erişilebilirliği kontrol aracıyla kontrol edebilirsiniz. En iyi skor AAA'dır..

Bu yönergeler hakkında daha fazla bilgi için, W3C'nin WCAG 2.0'ı Anlamaya Giriş makalesine bakın. Ayrıca daha fazla ayrıntı için bu ilgili bağlantılara bir göz atın:

• WCAG 2.0 Basitleştirilmiş
• Bölüm 508 WCAG Performansı

Erişilebilir Tasarımın Adımları

Pratik erişilebilirlik ipuçları için A11Y proje web sitesini ziyaret etmenizi şiddetle tavsiye ederim. A11Y (aynı zamanda bir numeronymdir) GitHub'da barındırılan ücretsiz bir açık kaynaklı projedir, erişilebilir web tasarımı için teknikler sunmak.

Açılır pencereler, sekmeler, akordeonlar, düğmeler ve modal pencereler gibi öğeler için erişilebilirlik öğelerinin kontrol listesine veya hatta bir dizi tasarım desenine göz atabilirsiniz (diğer öğeler arasında).

Bunların hepsini öğrenmek ve aynı anda uygulamak zordur. Adım adım ilerleyin ve kafanız karışırsa daha fazla araştırma yapmaya istekli olun.

Başlamak için A11Y'nin nasıl yapıldığını ve hızlı ipuçlarını inceleyin. İçeriğe atla bağlantıları ve yüksek kontrastlı renk şemaları gibi belirli önerilere çarpacaksınız. Bu tekniklerin her birinin kendi ayrıntı düzeyi vardır, bu nedenle uygulama çoğunlukla neyin işe yaradığını görmek için test yapmakla ilgilidir..

Otomatik bir içerik okuyucusu kullanıyor olabilecek kör kullanıcıları düşünün. Ayrıca bir ses tercümanı, hatta bir fare yerine tuşları kullanarak internette gezinmek için özel bir klavyeye sahip olabilirler. Bu nedenle uygun anlamsal HTML (Bu makaleye bir göz atın) gibi özellikleri ile çok önemlidir tabindex ve erişim anahtarı.

Dalmak istiyorsanız, erişilebilirliğe hazır bir tema seçmeyi düşünün. Mimariyi inceleyebilir ve tasarımınızı projenize uyacak şekilde özelleştirebilirsiniz.

Erişilebilirlik Test Araçları

Başlamak istiyorsanız, bir erişilebilirlik alanı seçin ve deneyin. O zaman başarı seviyenizi ölçmek için test araçlarını kullanabilirsiniz..

Bu işlemden bahsetmeye değer sinir bozucu olabilir. Dikkate alınması gereken çok şey var ve WCAG kuralları, aşırı bilgi yüklemesiyle sonuçlanabileceğinizi anlamak için çok zor.

Önemli olan sadece hareket etmeye devam etmektir. Bir erişilebilirlik alanı seçin ve odak noktanız yapın. Ardından, çalışmalarınızı düzenlemenize ve geliştirmenize yardımcı olması için bu araçları kullanın.

Örneğin, WCAG’ın kontrast özellikleriyle çalışmayı deneyebilirsiniz. okunabilirliği arttır. Renklerinizi seçtikten sonra, birlikte çalışıp çalışmadıklarını görmek için bu ücretsiz kontrast oranı denetleyicisini kullanın.

Ne yazık ki, WCAG 2.0 yönergeleri o kadar kafa karıştırıcıdır ki gereklilikleri anlamakta zorluk çekebilirsiniz. Ama ne kadar çok deneyirseniz o kadar çok şey öğreneceksiniz ve o kadar çok anlayacaksınız.

Zaten çevrimiçi olan bir siteyi test etmek için WAVE'a göz atın. Bu bir ücretsiz görsel denetleyici Bu, hataları, uyarıları, kontrast sorunlarını ve bir web sitesinin diğer özelliklerini gösterir. Kenar çubuğunda görsel bir görünüm ve sorunların bir listesini alırsınız.

Cynthia Says web sitesinde başka ücretsiz bir uygulama var. A, AA, AAA WCAG başarı derecelendirme web sitelerini kontrol edin, ve devlet uyumu için bölüm 508.

Açık kaynak kullanıyorsanız ve bunlara bir göz atın GitHub'da ücretsiz erişilebilirlik test araçları.

• HTML CodeSniffer
• Otomatik Erişilebilirlik Test Aracı
• WCAG Doğrulayıcı

Tarayıcı Eklentileri

Tarayıcı eklentileri, erişilebilirlik testi için en hızlı ve en kolay yöntemleri sağlar. Gerçekten yararlı sonuçlar almak için bunları herhangi bir web sitesindeki herhangi bir bilgisayardan çalıştırabilirsiniz..

Firefox için AInspector erişilebilirlik için olması gereken bir kabul edilir. Bu her şeyi kontrol eder ve WAVE test cihazından çok daha ayrıntılıdır.

Mozilla kullanıcıları ayrıca ücretsiz bir eklenti olan WCAG Contrast Checker'ı beğenebilirler..

Chrome kullanıcıları AInspector'a sahip değildir, ancak resmi olarak Google tarafından oluşturulan Erişilebilirlik Geliştirici Araçları'na sahiptir. Bu erişilebilirlik kurallarını kontrol etmek için denetçi penceresine ilave araçlar ekler..

Chrome kullanıcılarının ayrıca renk kontrastı için parlaklık denetleyicileri ve bazı diğer ücretsiz uzantıları vardır.

Ne yazık ki Safari kullanıcıları için fazla bir şey bulamadım, ancak Opera için WCAG 2.0 uyumluluğunu kontrol eden bir uzantı buldum. Google’da yeterince arama yapmak istiyorsanız, orada daha fazla araç bulabilirsiniz..

Daha fazla okuma

Web erişilebilirliğini öğrenmek konusunda ciddiysen, uzun bir yola hazırlanın. Kolay değil ama çok tatmin edici.

Şimdiye kadar, web erişilebilirliğinin gerçek tanımı, neden var olduğu ve geliştiricilerin web sitelerini geliştirmek için ne yapmaları gerektiğine dair ufak detaylar hakkında daha fazla bilgi edinmelisiniz. Bir sonraki adım, bu ilkeleri iş akışınıza dahil etmek için daha fazla araştırma ve uygulama yapmaktır..

Daha fazla bilgi için aşağıdaki yayınlara göz atın ve doğrudan kaynaktan bilgi edinmek istiyorsanız WCAG kurallarına uyduğunuzdan emin olun..

• İşaretleme ile HTML Tablosu Erişilebilirliği Nasıl Geliştirilir
• Engelli Kullanıcılar İçin Erişilebilir Tasarım
• Web Sitesine Erişilebilirliği Geliştirmek için 6 İpucu
• Sitenizin Görme Engellilere Erişilebilir Olmasını Sağlayın