Bu videoda WebFX Interactive ekibinden Jaci, erişilebilir web tasarımına nasıl başlayabileceğinizi açıklıyor.

Transcript:

Bir web sitesine göz atmak için gerçekten heyecanlı olsaydınız, ancak o web sitesine gittiğinizde içeriğinin hiçbirine erişemiyor olsaydınız nasıl hissederdiniz? Şahsen ben hüsrana uğrardım ve senin de hayal kırıklığına uğrayacağını düşünüyorum.

Erişilebilir web tasarımı kullanmazsanız , ABD'de engelli yaşayan dört yetişkinden biri için oluşturduğunuz senaryo budur. Bu , web sitenize eşit erişime sahip olmayan yaklaşık 61 milyon insan demektir.

Daha önce hiç yapmadıysanız, web tasarımı erişilebilirlik yönergelerini takip etmek kolay değildir, ancak başlamak için yapabileceğiniz bazı şeylerin ana hatlarını vereceğim .

Bu videonun farklı bölümlerine atlamak isterseniz, video açıklamasındaki zaman damgalarını kullanın. Şimdi, web sitesi erişilebilirliğine genel bir bakış atacağım.

Web sitesi erişilebilirliği nedir?

Web sitesi erişilebilirliği, web sitenizin engelli kişilerin kullanabileceği şekilde tasarlandığı anlamına gelir. Erişilebilir tasarımın amacı, herkesin içeriğinizle etkileşime geçebilmesi için teknolojik engelleri kaldırmaktır.

W3C olarak da bilinen World Wide Web Consortium'a göre , erişilebilir bir web sitesi işitsel, bilişsel, nörolojik, fiziksel, konuşma ve görme engelli kişiler için çalışır.

Nereden başlayacağınızdan emin değilseniz endişelenmeyin. W3C, standartlarını karşılamak için web sitenizin neleri içermesi gerektiğini söyleyen belgelere sahiptir.

Bu belgeler şunları içerir:

• Yazma Aracı Erişilebilirlik Yönergeleri (ATAG)
• Web İçeriği Erişilebilirlik Yönergeleri (WCAG)
• Kullanıcı Aracısı Erişilebilirlik Yönergeleri (UAAG)

ATAG, insanların İnternet içeriği oluşturmak için kullandığı araçlara odaklanır ve UAAG, web içeriğini oluşturan araçların erişilebilirliğine bakar.

Bu videoda, web sitesi içeriğini herkes için erişilebilir hale getirme yönergeleri olan WCAG'ye odaklanacağım .

WCAG ile üç farklı uyumluluk düzeyine sahipsiniz: A, AA ve AAA. A'dan AA'ya ve AAA'ya giderken , WCAG tarafından belirlenen daha fazla standardı takip eder ve sitenizi daha fazla sayıda insan için erişilebilir hale getirirsiniz.

Peki, erişilebilir bir web siteniz olup olmadığını nasıl anlarsınız? Bir denetim yapın!

Web sitenizin erişilebilirliğini nasıl denetlersiniz?

Kendi başınıza bir denetim yapmak zorunda değilsiniz. Denetiminizi dışarıdan yaptırmayı tercih ediyorsanız , web sitenizi analiz edebilecek ve sizin için gerekli ayarlamaları yapabilecek bir danışman ekibiyle iletişime geçin.

Şimdi, işleri şirket içinde halletmeyi tercih ediyorsanız, birçok seçeneğiniz var. Sorunları manuel olarak aramak için web sitenizin sayfalarını tarayabilirsiniz, ancak bu muhtemelen çok zamanınızı alacaktır.

Size yardımcı olacak bazı araçları kullanmak isteyebilirsiniz. Bir sayfada neyi güncellemeniz gerektiğini görmek için URL'nizi WAVE gibi bir erişilebilirlik denetleyicisine takın. Aynı anda birden çok sayfayı analiz etmek için toplu erişilebilirlik denetleyicisi de kullanabilirsiniz .

W3C web sitesinde erişilebilirlik araçlarının büyük bir listesi vardır , bu nedenle her şeyi kendi başınıza yapmanız gerekmez.

Ayrıca, erişilebilirliğiniz için beş önemli öğeden oluşan bir listemiz ve bazı erişilebilir tasarım örneklerine sahibiz - bundan sonra bahsedeceğim - bu yüzden benimle kalın.

5 web tasarımı erişilebilirlik yönergesi

Bunların WCAG yönergelerinin kısa özetleri olduğunu unutmayın. Erişilebilir tasarım için daha derinlemesine teknikler öğrenmek için W3C'nin hızlı başvuru kılavuzunu kullanmanızı tavsiye ederim .

1. Metnin okunabilir olduğundan emin olun

Önemli bilgileri ileten normal boyutlu herhangi bir metnin okunması kolay olmalıdır.

Kontrast bu konuda önemli bir rol oynar. Şu anda olduğu gibi, büyük metinler (ana başlıklar gibi) 3:1 metin-arka plan kontrast oranına ihtiyaç duyar. İçeriğinizin gövdesini oluşturan metin gibi normal (veya daha küçük) metin, 4,5:1 kontrast oranına ihtiyaç duyar.

Çok az kontrast örneği, biraz daha koyu yeşil bir arka plan üzerinde açık yeşil metin gibi görünüyor. Metni siyah veya beyaz olarak değiştirin ve web sitenizde çok daha fazla kontrast elde edin.

Kullanıcılar ayrıca sitenizin işlevselliğini etkilemeyecek veya içeriği kaçırmalarına neden olmayacak şekilde metni yakınlaştırabilmelidir .

2. Görüntüleri görülecek ve okunacak şekilde optimize edin

Resimlere alternatif metin eklemek yalnızca yaygın bir SEO uygulaması değildir. Görüntüleri göremeyen kişilerin içlerinde ne olduğunu anlamalarına yardımcı olur.

Alternatif metin, bir görüntüde neler olup bittiğini net bir şekilde açıklayan bir metin parçasıdır. Alternatif metin, resimlerinizin yerleştirme kodlarına tam olarak uyar. Mashable'dan bu örnekte gördüğünüz gibi, sayfada resimler var ve şeylerin kod tarafına çevirdiğinizde alternatif metni görüyorsunuz.

3. Kitlenize videoları anlamaları için ek yollar sunun

Daha önce videolarınıza hiç altyazı eklemediyseniz, şimdi başlamanın tam zamanı. Ve yalnızca YouTube'un veya başka bir barındırma sağlayıcısının otomatik olarak oluşturduklarına güvenmeyin.

Vaktiniz ve sabrınız varsa, otomatik olarak oluşturulan altyazılarınıza bir göz atın ve düzenlemeler yapın. Bir yapay zekadan geldiklerinde mükemmel olmayacaklar.

Ayrıca Rev gibi bir araç kullanarak altyazı sipariş edebilir ve ardından bunları videonuza ekleyebilirsiniz.

Videolarınıza transkript eklemek onları daha erişilebilir hale getirir. Bir senaryo yazdıysanız, zaten hazırlanmış bir transkriptiniz var!

Sesli açıklamalar başka bir erişilebilirlik katmanı ekler. Bunlar, diyalog boşlukları arasında videonuzda neler olup bittiğini açıklayan ayrı ses parçalarıdır.

Bu nedenle, son alışveriş gezileri hakkında konuşan iki kişi varsa ve ardından videoda bir kişinin kıyafetlerini denediği bazı görüntüler kesilirse, sesli açıklama videoda neler olduğunu açıklayacaktır. Şöyle bir şey olabilir: Bir kadın aynanın önünde duruyor ve omzuna iki eşarp örtüyor.

Wistia gibi bir barındırma platformu, sesli açıklamalar yüklemenize olanak tanır (ve hatta videolarınızı yüklediğinizde bir video erişilebilirlik kontrol listesi bile vardır).

4. Web sitenizi fare ve klavye dostu olacak şekilde tasarlayın

İnternette gezinmek için herkes fare kullanmaz. Web siteniz bunu yansıtmalıdır.

Bu, yalnızca birinin bir klavye aracılığıyla web sitenizle etkileşime geçebilmesini sağlamanız gerektiği anlamına gelmez, aynı zamanda web sitenizin hangi bölümünün odakta olduğunu vurgulamak için dikkat çekici yollara sahip olmanızı gerektirir.

Erişilebilir tasarım örneklerinden bir başkasına baktığınızda, Keds web sitesindeki arama çubuğuna tıkladığımda, klasik yanıp sönen çizginin yazabileceğimi bildirdiğini görüyorsunuz. Arama çubuğu da tıklandığında daha belirgin hale gelir.

WCAG yönergelerini karşılamak için bu işlevsellik bir klavye kullanıldığında gerçekleşmelidir.

5. Site gezintinizi kolay anlaşılır hale getirin

Bu ipucu erişilebilirliğin ötesine geçer. Web sitenizde gezinmeyi basit ve anlaşılır hale getirmek genellikle iyi bir şeydir.

Açık bir amacı olan sayfa başlıkları ve başlıklar yazın. Bağlandığınız içerikte ne olduğunu anlamayı kolaylaştıran bağlantı bağlantı metni kullanın.

Yine, insanların bir sayfada nerede olduklarını bilmeleri için odak göstergelerini kullanın. Bir site haritası, ana gezinme veya içindekiler gibi bir web sayfasına erişmenin birden fazla yolunu sunun.

Ve bunu nasıl atlayabilirim? Tutarlı navigasyona sahip olun. Bu, bir ana gezinme başlığınız varsa, bir kullanıcı sayfadan sayfaya atladığında gerçekten değişmemesi gerektiği anlamına gelir.

At Home'un web sitesini gösteren bu örnekte, bir sayfadan diğerine tıklamama rağmen sayfanın üst kısmındaki gezinme değişmiyor.

Ve daha önce de söylediğim gibi, bu kesinlikle web tasarımı erişilebilirlik yönergelerini takip etmek için yapmanız gerekenlerin kapsamlı bir listesi değil. Bu yönergeler de değişebilir; bu nedenle , erişilebilirliğinizi değerlendirmeye hazır olduğunuzda araştırmanızı yapın .

Farklı web tasarımı ve dijital pazarlama konularını öğrenmeye devam etmek için YouTube kanalımıza ve e-posta bültenimiz Revenue Weekly'ye abone olun . Hayal kırıklığına uğramayacaksın.

Bana katıldığınız için teşekkürler!

Pazarlama bilgilerini WebFX videolarından alan 5.000 pazarlamacıya katılın.

Şimdi Abone Ol