Temel erişilebilirlik denetimi nasıl yapılır?

Yayınlanan: 2017-08-09

Son zamanlarda erişilebilirlik hakkında çok şey öğreniyorsunuz, ancak şimdi sitenizi kendiniz kontrol etmek ve iyileştirmeniz gereken yerleri görmek istiyorsunuz. Bunu nasıl yapacaksın? Erişilebilirlik denetiminin zamanı geldi! Bu eğitici yazıda, sizi daha erişilebilir bir siteye sahip olma yolunda ilerletecek temel bir erişilebilirlik denetiminin iplerini göstereceğim.

Genel bakış serimden hatırlayacağınız gibi, erişilebilir bir web sitesi algılanabilir, çalıştırılabilir, anlaşılabilir ve sağlamdır. Sitenizin erişilebilirliğin dört temel direğine de ulaştığından emin olmak için yapılan testler kodlamayı içermez, bu yüzden endişelenmeyin. Bir veya iki Chrome uzantısı yükleyebiliriz, ancak bana daha sonra teşekkür edeceksiniz. Başlayalım!

NOT: Bu eğitici, Chrome Denetçisini veya sağlanan tarayıcının temel geliştirici araçlarını nasıl kullanacağınızı bildiğinizi varsayar.

algılanabilir

tablet ile güneş gözlüğü volan erişilebilirlik denetimi kadın tarafından düzeni

Algılanabilir ile başlayın çünkü siteniz kullanıcı tarafından algılanamıyorsa, var olduğunu bilmiyorlar. Burada üç şeye odaklanacağız: metin alternatifleri, başlıklar ve renk.

Sitenizdeki dekoratif olmanın ötesinde her resim için (yani, yalnızca bir geliştirme değil, bilgilerin hayati bir parçasıdır), resmin bir alt niteliği olmalıdır. Bunu, görüntünün kaynak kodunu inceleyerek ve özniteliği arayarak kontrol edebilirsiniz. Eğer oradaysa, harika! Şimdi özniteliğin değerinin kullanışlı olduğundan emin olmamız gerekiyor. Alt özelliği, görseli görme engelli kullanıcıları bilgilendirecek şekilde tanımlamalıdır. Bu, sitenize SEO anahtar kelimeleri yerleştirmek için bir fırsat DEĞİLDİR. Açıklamanızı kısa, öz ve faydalı yapın. Site içeriğinin kendisi için daha uzun açıklamalar kaydedilmelidir.

Görüntülerle birlikte gitmek, video ve ses içeriğidir. Her iki durumda da, içeriğin bir tür altyazısını veya transkripsiyonunu sağlamanız gerekir. Videolarınızda altyazı özelliği etkinleştirilmiş veya önceden altyazılı olmalıdır. Bunu test etmek, sitenizde bir video başlatmak ve altyazıları kontrol etmek kadar basittir.

Son olarak, renklerimizi test etmemiz gerekiyor. Bunu yapmak için gri tonlama modunu etkinleştiren bir Chrome uzantısı yükleyeceğiz. Kurulduktan sonra sitenizi tekrar yükleyin ve uzantıyı açın. Okunması zor alanlara dikkat edin. Bunlar, sorunlarınızın kontrast açısından olduğu yerdir. Buradan, gri tonlamayı devre dışı bırakın ve puanlarınızı kontrol etmek için Snook renk kontrastı denetleyicisini kullanın. Elinizde yoksa, onaltılık değerlerinizi almak için denetçiyi kullanmanız gerekir. 4.5'ten (veya büyük metinler için 3.0) daha düşük herhangi bir şeyin bir sorun olduğunu unutmayın.

çalıştırılabilir

Bir sonraki adım, sitenin çalışır durumda olduğundan emin olmaktır. Bu, klavye işlevselliğini test edeceğimiz anlamına gelir. Bunu yapmak için sitenizi açın. Sayfa yüklendikten sonra sekme tuşuna basın. Ne oluyor? Umarım, bir atlama bağlantısı açılır. Değilse, en azından sayfadaki ilk bağlantının etrafında bir ana hatınız olmalıdır. İdeal olarak, özel stile sahip :focus durumlarına sahip olursunuz, ancak minimum minimum, tarayıcının sağladığı şey olmalıdır. Oradan, sayfada göründükleri sırayla bağlantıdan bağlantıya gittiğinizden emin olmak için sekme tuşuna basmaya devam edin. Odağınız etrafta zıplamaya devam ederse, çözülmesi gereken bir sekme dizini sorununuz var demektir. Form eklentileri genellikle burada suçludur.

bir durumda cep telefonunda pazen volan erişilebilirlik denetimi adam tarafından düzeni

anlaşılır

Ardından, okunabilir olduğundan emin olmak için sitenizi kontrol edeceğiz. Sonuçta, bir kullanıcı içeriğinizi okuyamıyorsa, ona sahip olmanın anlamı nedir? Buradaki gereksinimler oldukça basit: Sitenizin dili kodla belirlenebilir mi? Kontrol etmek için denetçinizi açın ve ana <html> etiketine bakın. Bir lang özelliği var mı? Eğer öyleyse, sen temizsin. Ayrıca, farklı bir dilde olan tüm segmentlere lang özniteliğinin uygulandığından emin olmak isteyeceksiniz.

Okunabilirlik konusunda AAA düzeyinde başka kontroller de vardır, ancak bunlar temel bir denetimin kapsamı dışındadır. Genel olarak, hedef kitleniz daha yüksek bir eğitim düzeyine sahip değilse içeriğinizi 6. sınıf okuma düzeyinde tutmak isteyeceksiniz.

Sitenizin istikrarsızlığının diğer önemli yönleri, hata mesajları ve bağlam değişikliği etrafında döner. Daha spesifik olarak, bunların eksikliği. Bir kullanıcı odak verdiğinde veya bir girişi etkinleştirdiğinde, önemli bir değişiklik meydana gelmemelidir. Kullanıcı herhangi bir şekilde uyarılmadıkça (ok simgesi, yardımcı metin vb.) sayfa atlamamalıdır. Bunlar, klavyeyle test ederken fark edeceğiniz türden şeylerdir.

Formlarınızı test ederken, aynı şey hata mesajları için de söylenebilir. Hatalar kullanıcıya net bir şekilde gösterilmeli ve hataları düzeltebilmeleri için ekranda kalmalıdır. Bu, büyük web sitelerinin bile her zaman yanlış yaptığı bir şey. Sayfanın hatalı olan kısmına odaklanmayı veya en azından bir şekilde işaretlemeyi unuturlar. Formlarınızı hatalara karşı test edin ve mesajların net olduğundan emin olun. Katı bir form eklentisi kullanmak bu konuda çok yardımcı olacaktır, ancak tüm çalışmalarınızı yapmak için eklentiye güvenmeyin. Ayrıca, bir hatayı belirtmek için yalnızca bir renk (genellikle kırmızı) kullanmadığınızdan emin olmak isteyeceksiniz. Asıl “Hata” metni özellikle kırmızı/yeşil renk körlüğü olan kişiler için çok önemlidir.

Hataların ötesinde, formlarınız ve girdileriniz net talimatlara sahip olmalıdır. Sitenizdeki her girişi gözden geçirin ve kullanıcının ne yapması gerektiğinin yeterince açık olduğundan emin olun. Örneğin, arama formlarında büyüteç dışında bir şey olmalıdır. Basit bir "arama" etiketi yeterli olacaktır. Kullanıcılarınızın etkileşimli öğelerle ne yapacaklarını bildiklerinden emin olun. Asla varsaymayın.

güçlü

klavyenin önünde grafikler ve not defteri ile volan erişilebilirlik denetimi destop tarafından düzeni

Son olarak, sitenizin sağlam olması gerekir. Bunun anlamı, sitenin ekran okuyucular gibi yardımcı teknolojilerle kullanılabilir olmasıdır. Siteniz HTML ile iyi oluşturulmuşsa, sorun değil. Chrome dahil bazı modern tarayıcıların temel HTML hatalarını düzelteceğini veya en azından düzeltmeye çalışacağını unutmayın. Sitenizin sağlamlığını test etmenin en hızlı yolu, siteyi Safari'ye yüklemek ve yerleşik bir ekran okuyucu olan VoiceOver'ı etkinleştirmektir. Siteniz çalışmıyorsa, bu sorunları çözmeniz gerekir.

toparlamak

Bu denetim öğreticisi hızlıydı, ancak mesele bu. Sitenizin erişilebilir olduğundan emin olmak o kadar uzun sürmez ve gerekli araçlar minimumdur. Hatırlanması gereken en önemli şey, kendinizi ortalama bir kullanıcı olarak kabul ettiğiniz yeteneklere sahip olmayan birinin yerine koymak istemenizdir. Bu zihniyeti koruyun ve denetimleriniz sitelerinizin daha erişilebilir olmasını sağlayacaktır.

Kaçırdıysanız, erişilebilirlikle ilgili bu seriye göz atın:

  • Erişilebilirliğe giriş: 1. bölüm
  • Erişilebilirliğe giriş: 2. bölüm
  • Erişilebilirliğe giriş: 3. bölüm