Erişilebilirlik testi ile web sitenizi nasıl değerlendirilir (ve iyileştirir)
Birçok kişi, web’de gezinme yeteneğini düşünüyor. Tabii ki, herhangi bir müdahale yaşamıyorsanız, modern web sitelerinde gezinmek kolaydır. Sorun şu ki, herkes Web’i aynı şekilde deneyimlemiyor. Daha da önemlisi, bazı engelliler siteyi keşfetmeyi hayal ettiğinizden daha karmaşık hale getirir. Web sitenizin tadını çıkarmak için mümkün olduğunca çok insan istiyorsanız, erişilebilirlik testi bir zorunluluktur. Bu makalede, testin neden önemli olduğu hakkında daha fazla konuşacağız. Ardından, web sitenizi dört adımda nasıl değerlendireceğinizi öğreteceğiz. Hadi çalışalım!
Erişilebilirlik testi neden önemlidir?
Erişilebilirlik testi, engelli kişiler tarafından kullanılabilmesini sağlamak için web sitenizi değerlendirme sürecidir. Örneğin, bireysel renk körlüğünün web sitenizde gezinmesini zorlaştıran bir renk paleti kullanıyorsanız, doğru erişilebilirlik testi bunu algılayacaktır. Erişilebilirliği test etmenin temel amacı, mümkün olduğunca insanların web sitenizin tadını çıkarabilmesini sağlamaktır. Bununla birlikte, bu tamamen fedakarlık arayışı değildir, çünkü bundan da yararlanırsınız. İşte nasıl:
Bu, tam tersini yapmayacak kullanıcılara ulaşmanızı sağlar. Web siteniz engelli kullanıcılar için optimize edilirse, o kadar çok kişiye ulaşabilirsiniz. İzleyici, nüfusun düşük bir yüzdesi oluştursalar bile artabilir.
Profesyonellik gösterir. Pek çok insan erişilebilirlik açısından ekstra çalışmaz. Bu, yaptığınız her iyileştirmenin daha iyi bir deneyim sunmaya kararlı olduğunuzu gösterdiği anlamına gelir. Çoğu durumda, herkes tarafından erişilebilecek bir web sitesi oluşturmak mümkün değildir. Bununla birlikte, web siteniz tasarımında basit ayarlamalar yaparak birçok insan için deneyimi geliştirmek mümkündür.
Özellikle tartışmadan önce, World Wide Web Konsorsiyumu (W3C) tarafından derlenen Web İçeriğinin (WCAG) erişilebilirliği için yönergeleri görmenizi öneririz. W3C’ye alışkın değilseniz, bu daha iyi deneyim için web standartlarını geliştirmek için çalışan uluslararası bir topluluktur. Adil olmak gerekirse, tuvalet oldukça kuru bir okuma olabilir, ancak okumak için zaman ayırmak, erişilebilirlik standartları hakkında daha fazla bilgi edinmenin en iyi yoludur. Bir sonraki bölümde, web sitenizin kullanımını test etmek ve geliştirmek için bazı somut adımları tartışacağız ve bunun neden önemli olduğunu açıklayacağız.
Erişilebilirliği test ederek (4 adımda) web sitenizi nasıl değerlendirilir (ve iyileştirir), web sitenizin tuvalete uygun olup olmadığını hızlı bir şekilde test etmek için kullanabileceğiniz birçok çevrimiçi araç vardır. Bununla birlikte, bu tür bir araç sadece kapsamlı testlerle bulabileceğiniz birçok şeyi kaybeder. Çok iyi bir başlangıç noktasıdır, ancak bunu kullanmak uygun bir erişilebilirlik testi değildir. Bunu hatırlayarak, özellikle tartışalım. Adım #1: Renk görme bozuklukları ile ilgili sorunlar için web sitenizi test edin Çoğu popülasyon, fiziksel sorunlar nedeniyle renkleri ayırt etmekte güçlük çeker. Bu kusur renk körlüğü olarak bilinir ve erkeklerde daha fazlası meydana gelir. Tahmin ettiğiniz gibi, renk körlüğü bazı durumlarda web sitesinin navigasyonunu karmaşıklaştırabilir. Örneğin, insanlar bir sayfadaki önemli öğeleri vurgulamak için web tasarımında genellikle kontrastı kullanırlar. Renk körlüğü olan biri, kullandığınız renge bağlı olarak pek çok fark görmeyebilir. Bazı aşırı durumlarda, insanlar sadece ‘tam monokromizm’ olarak adlandırılan gri bir his görebilirler. Doğal olarak, tam monokromatizm etrafında tasarlanmak neredeyse imkansızdır. Yapabileceğiniz tek şey, web sitenizi optimize etmektir, böylece kırmızı ve yeşil hedefleyen en yaygın renk körlüğü için erişilebilir, ardından mavi ve sarı. İlk adımda, web sitenizi ayrı renk körlüğü ile görülebileceği gibi oluşturmanızı sağlayan Toptal Renk Körlük Filtresi gibi bir araç kullanmanız gerekir:
Bu aracı kullanmak için, URL tipi tipi kutusunda test etmek istediğiniz URL’yi yapıştırın, ardından sağdaki menüden filtreyi seçin. Bu, üç farklı renk körlüğü türü için seçenekler içerir ve bir seçenek hepsini yakalar: En iyi sonuçlar için, test ettiğiniz sayfaları her filtreyi ayrı ayrı kullanarak oluşturabilirsiniz. Ardından, sayfanızın öğelerinden birinin belirli bir renk körlüğüne sahip kullanıcılar tarafından görmek zor olup olmadığını kontrol edin. Tekrar yapmanız gereken bir öğe bulursanız, onu daha kolay erişilebilir hale getirmenin anahtarı, genellikle doğru renk seçiminin neden olduğu kontrastı artırmaktır.
Adım #2: Kullanıcıyı genel görme bozukluklarıyla etkileyen sorunu kontrol edin, renkle ilgili olmayan birçok görsel kusur vardır. Örneğin, uzak faarlar, nesneleri görmekte zorluk çeker, bu yüzden bulanık görünüyor. Öte yandan kataraktlar, bulanık bir pencereden bakıyormuş gibi vizyonunuzu bulanık hale getirebilir. Mesafeye göre öğelere odaklanamıyorsanız, web sitesinin tasarımını dikkate alacak şekilde optimize edebilirsiniz (akılla). Öte yandan, görüşünüzü önleyen koşullardan muzdaripseniz, idare etmek daha zordur. Bununla birlikte, bir web sitesi yaşamak gibi hissettirdiğini simüle etmek için kullanabileceğiniz çok fazla araç yoktur. Favorimiz, filtreyi gördüğünüz her sayfaya yerleştirmenizi ve istediğiniz kadar değiştirmenizi sağlayan Nocoffee adlı bir krom uzantısıdır: Kötü haber şu ki, diğer tarayıcılar için nocoffees kadar işlevsellik yapan başka bir araç yok. Ancak, Google Chrome tüm ana platformlar için kullanılabilir ve geliştirici her zaman yararlıdır. Uzantıyı yükledikten sonra menünüzdeki simgeye tıklayabilir, ardından bulanıklık filtresini etkinleştirebilirsiniz. Bu şekilde, sitenizi ziyaret ettiklerinde kullanıcıların gördüklerini pratik olarak deneyimleyebilirsiniz. Çoğu durumda, deneyimlerini geliştirmek için yapabileceğiniz sadece iki şey vardır:
Birinci adımda tartıştığımız gibi kontrasttan daha iyi yararlanın.
Görme bozukluğu olan kişiler için bile metninizin okunması daha kolay olacak şekilde yazı tipinizin boyutunu artırın. Doğal olarak, sadece web sitenizin tasarımını olumsuz etkilemeden önce metin boyutu açısından yapabilirsiniz. Örneğin, bu ekran görüntüsünde, blog yayınımızın başlığını görebilirsiniz, ancak Sinopsis:
Metnin boyutunu artırabiliriz, ancak azalan sınırlar ve sonuçlar vardır. Bu, metin tabanlı problemleri içermesine rağmen, sadece resimlerimiz var – bizi bir sonraki adıma getirin.
Adım #3: Görüntünüze ‘Alt’ tanımlayıcı özniteliği Alt özniteliğinin kör kullanıcısına ekleyin – veya ‘Tag’ – görüntünün içeriğini açıklayan bir öğedir. Arama motoru bu bilgileri görüntüleri öğrenmek ve etrafındaki içeriği daha iyi anlamak için kullanabilir. Daha da önemlisi, ALT metin kör kullanıcıların içeriğinizde hangi görüntülerin olduğunu anlamalarına izin verir. Kullanıcı türü için özel olarak tasarlanmış birkaç tarayıcı vardır ve çoğu durumda, insanların gözlerinden ziyade kulaklarına güvenebilmeleri için malzemeyi sert okurlar. Kısacası, gönderinize ve sayfanıza eklediğiniz resim, açıklayıcı bir alt etiket içermelidir. Bu çiçeği alın, örneğin: Acele ediyorsanız, “çiçeği” etiket alt görüntüsü olarak yazabilirsiniz. Bununla birlikte, “tarlaların ortasında kırmızı çiçekler” gibi seçenekleri seçmek çok daha iyi olurdu. Tabii ki, çok açıklayıcı gibi şeyler var ve kısa alt etiketlerin yeterli olduğu durumlar var. Bununla birlikte, genel olarak, daha uzun bir açıklama, kullanıcı deneyimini görme bozuklukları ile geliştirecektir. Bildiğiniz gibi, WordPress ALT etiketlerinizi kolayca değiştirmenize izin verir. Görüntüyü medya kitaplığınızdan veya bir gönderi veya sayfada seçin ve Düzenle düğmesini tıklayın. Bir sonraki ekranda Alt metin alanlarını arayın ve açıklamanızı yazın:
Şimdi değişiklikleri kaydedin ve hazırsınız. Ancak unutmayın – bu, web sitenizdeki her resim için geçmeniz gereken bir süreçtir. Bu çok fazla iş gibi görünebilir, ancak zamanla bir alışkanlık olacaktır. Adım #4: Video metninizi şimdiye kadar gözden geçirin, çoğu web sitesi gözden tüketildiğinden, görsel engelliliğe tamamen odaklanıyoruz. Bununla birlikte, şimdi sitelerin bazı sayfalarında video içeriği kullanması yaygındır, bu da işitme hatalarıyla uğraşmak zorunda oldukları için sorunları gündeme getirir. Videoları optimize etmek Görme bozukluğu olan kişiler için birçok durumda işleyemezsiniz. Ancak, yapabileceğiniz tek şey sesinizin anlaşılmasının kolay olduğundan emin olmaktır. Bazı kullanıcılarınız işitme kaybı yaşayabilir, bu durumda metin kullanmalısınız. Videonuza metin eklemek, işitme bozukluğu olan kişilerin içeriğinizi yine de en iyi şekilde kullanabilmesini sağlamanın en etkili yoludur. Ancak, metin yapmak ve hatta kısa videoları tamamlamak çok fazla iş olabilir. Yapamayacağınız bir şeyse, her zaman YouTube ile kaplı metin araçları gibi özellikleri deneyebilirsiniz: Tabii ki, herhangi bir video metin özelliği gördüyseniz. Teknolojinin mükemmel olmadığını bileceksiniz. Ancak, alternatifin metni yoksa bu geçerli bir seçenektir. Videonuzu YouTube’a yüklerseniz, WordPress sadece yazınız ve sayfanızdaki herhangi bir yere bağlantıyı ekleyerek web sitenize sabitlemenize izin verir:
Bu şekilde, kullanıcınız gerekirse kapalı bir metni etkinleştirmeyi seçebilir. Ancak, içeriğinizin birçoğu video ile ilgiliyse, özel metin seçenekleri aramaya başlamanız gerektiğini unutmayın. Bu şekilde, içeriğinizin doğru bir şekilde temsil edildiğinden ve işitme kaybı olan kullanıcıların tadını çıkarabileceğinden emin olacaksınız. Sonuç erişilebilirliği, birçok insanın web sitesi tasarımlarında çalışırken düşündüğü bir şey değildir. Bununla birlikte, bu, kullanıcılarınız için en uygun deneyim sağlamak istiyorsanız dikkate alınması gereken önemli bir faktördür. Buna ek olarak, web sitenizi kullanmayı kolaylaştırmak yalnızca engelli kullanıcılara değil, aynı zamanda tüm kitlenize de fayda sağlayacaktır. Erişilebilirlik testini keşfetmenin en etkili yolu tuvaleti kontrol etmektir, böylece neye gitmeniz gerektiği fikriniz vardır. Ardından, yaşayabileceğiniz ana erişilebilirlik probleminin üstesinden gelmek için aşağıdaki dört temel adımı izleyin: Web sitenizi renk görme bozuklukları ile ilgili sorunlar için test edin.
Görüntünüze tanımlayıcı alt özellikler ekleyin. Video metninizi inceleyin. Web sitenizi nasıl daha kolay erişilebilir hale getireceğinizle ilgili sorularınız var mı? Aşağıdaki yorumlar bölümünde onlar hakkında konuşalım! E.Duzhinina / Shutterstock.com tarafından küçük resim görüntüsü.