WCAG uyumluluğu için erişilebilirlik denetimi nasıl yapılır?

WCAG (web içeriği erişilebilirlik yönergeleri), dünya çapında web konsorsiyumu (W3C) tarafından oluşturulmuştur ve erişilebilirlik için küresel olarak en çok tanınan standarttır.

Bu makalede, WCAG 2.1 standardına uygunluğu doğrulamak için bir denetim gerçekleştirmek için gereken görevleri özetliyoruz.

Erişilebilirlik, web sitenizin içeriğine ve işlevselliğine daha geniş bir kitle tarafından erişilebilmesini sağlamakla ilgilidir.

Örneğin:

• Geçici erişilebilirlik engeli - Birisi gözlüklerini kaybetti!
• Cihaz sorunları – Cep telefonu gibi kısıtlayıcı bir cihazdalar
• Durumsal – Parlak güneş ışığı, karanlık oda vb.
• Kalıcı sakatlık - Görme, işitme, bilişsel sorunlar vb.
• Bant genişliği sorunları – Çok yavaş bir bağlantı

Gördüğünüz gibi, göz önünde bulundurmanız gereken birçok engellilik türü var.

WCAG yönergeleri aşağıdakilere ayrılmıştır:

Her bölüme geçmeden önce, test yapmak için ihtiyaç duyacağınız şeylerin bir listesi:

1. Algılanabilir

• Yalnızca metin içeren bir dizi tarayıcı (örn. Lynx)
• Alt etiketleri, başlıkları vb. kontrol etmek için bir araç (örn. ScreamingFrog)
• NVDA gibi bir ekran okuyucu
• Bir web sitesi erişilebilirlik testi aracı
• Chrome geliştirme araçları
• Çeşitli cihazlara erişim

Bu, içeriğin çeşitli biçimlerde erişilebilir olduğundan emin olmakla ilgilidir. Örneğin, birisi içeriği görebilir, dinleyebilir, içeriği anlamak için dokunmayı kullanabilir vb. Buna menüler ve düğmeler gibi kullanıcı arayüzü öğeleri de dahildir.

WAVE erişilebilirlik aracı, bu alandaki sorunları bulmak için kullanılabilecek birçok araçtan biridir:

Yukarıdaki örnekte sayfa oldukça iyi çalışıyor. Yalnızca renk kontrastı sorunları olan 1 hata ve 5 hata var.

Tek hata, bu sayfanın dili belirtmemesidir.

Ama sayfada çok güzel şeyler var. Örneğin, yeşil renkle vurgulanmış 2 öğeyi gördüğünüz sağdaki resimde, bunların ikisi de ekran okuyucunun bu içeriği anlamasına yardımcı olmak için 'ARIA' etiketlerini kullanır. Daha sonra bu konuda daha fazla açıklayacağız.

Şimdi yönergeleri ve başarı kriterlerini gözden geçirelim.

Yönerge 1.1 - Metin olmayan içeriğe metin alternatifleri sağlama

Metin olmayan içeriğe metin alternatifleri var mı?

Bir ekranda metin olmayan içeriğiniz olduğunda, bu öğelerin her biri için açıklamalar olduğunu doğrulamanız gerekir.

Örnekler vermeden önce, öğelere ek açıklamalar sağlamanın bir yolu olan ve yalnızca standart HTML'nin mümkün olmadığı durumlarda kullanılması gereken ARIA'yı tartışmak istiyorum.

HTML kullandığınızda otomatik olarak klavye kontrolü, odak vb. alırsınız ve bu tercihtir ancak ARIA yedek olarak kullanılabilir.

ARIYA nedir?

ARIA (erişilebilir zengin internet uygulamaları), standart HTML kullanılarak yeterince tanımlanamayan içeriği tanımlamanın bir yoludur. Ana amacı ekran okuyucular içindir. Standart HTML kullanabiliyorsanız, o zaman bu en iyi yaklaşımdır çünkü otomatik olarak öğeye ve klavye kontrolüne odaklanma sağlayacaktır. Bu mümkün olmadığında ARIA alternatiftir.

Açıklayıcı Görüntüler

Tanımlayıcı bir görüntü, bir anlam ifade eden bir şeydir. Örneğin, bir Toyota Prius arabasının resmi.

Resmi göremiyorsanız, bu resmin neyi temsil ettiğini ve Alt etiketinin geldiği yeri açıklamanın bir yolu olması gerekir.

WordPress gibi platformlarda, görseli yüklerken alt etiketini ekleyebilirsiniz:

SEO amaçları için alakalı anahtar kelimelerin dahil edildiğinden emin olmak için bu alt etiketi sık sık güncelleriz, ancak bunun ötesine geçmemiz gerekiyor.

Çığlık atan kurbağa, web sitenizdeki tüm resimlerin bir analizini yapacak ve hangi resimlerin alt etiketi, yinelenen alt etiketleri, çok uzun alt etiketleri veya çok kısa alt etiketleri olmadığını gösterecektir!

Görselin detaylarının yanında görselleri de görebilirsiniz:

Dekoratif görüntü

Dekoratif bir görüntü, tasarımı geliştirmek için orada bulunan ancak görüntüde açıklamaya değer hiçbir şey olmayan bir görüntüdür!

Dekoratif resimler, 'img' etiketini kullanmak için iyi bir neden olmadıkça CSS arka plan özelliğini kullanmalıdır. Bir ekran okuyucu, CSS arka plan özelliğini görürse, görüntüyü yok sayması gerektiğini bilir.

Avustralya'daki Acil Durum Doktorum web sitesinde arka plan resmi olarak tanımlanan bir resim örneği:

İşte bunun arkasındaki kod:

Bu görüntü <img> olarak listelenmediğinden, ekran okuyucularının bunun bir görüntü olduğunu bilmesini sağlamak için role=img kullanır. Görüntünün iyi ve doğru bir tanımını vermek için 'Aria etiketini' kullanır. Ayrıca görüntüyü 'arka plan görüntüsü' olarak tanımlar.

Not: Bir arka plan resmi için 'img' etiketini kullanırsanız, boş bir alt etiketi tanımlamanız gerekir, örneğin alt=” “

Arka plan rengi yerine ne zaman <img> kullanmalısınız?

Bir resim içeriğin önemli bir parçasıysa <img> kullanın. Örneğin, bir ürün resminiz varsa bu <img> olur. Ayrıca, sadece dekorasyon amaçlı kullanılan arka plan resimleri olan resimleriniz de olabilir ve bunları resim olarak tanımlamak mantıklı değildir (Google tarafından dizine eklenecektir).

Yukarıdaki örnekte, görüntülenen görüntünün img olarak tanımlanması gerekip gerekmediğini, ancak bunun bir stok fotoğraf olup olmadığını sorgulayabilirsiniz ve bunun yerine onu bir arka plan görüntüsü olarak tanımlamaya karar verdiler, bu sorun değil.

Not: <img> bir HTML etiketidir ancak arka plan görüntüsü, kullandığınız bir CSS stilidir.

Kullanıcı Arayüzü Kontrolleri

Ne olduğunu açıklamak için bir metin gerektiren çeşitli UI kontrolleri vardır.

Örneğin, bir düğme veya form denetimi.

Bir işlevi tamamlamaya yardımcı olmak için bir düğme kullanılır. Yalnızca bir simgeye sahip bir düğme ve düğmede metin bulunan bir düğme olabilir. Her ikisi de farklı şekilde ele alınabilir.

ARIA'yı kullanarak 'role=button' tanımlayabilirsiniz, ancak standart HTML ile <button> etiketini kullanabilirsiniz. Hangisini kullanmalısınız?

İşte, düğmenin ne yaptığını açıklamak için bir 'aria etiketi' oluşturmamızı gerektiren, içinde yalnızca bir X bulunan bir düğme örneği.

<button aria-label=”Kapat” onclick=”myDialog.close()”>X</button>

Test etmeniz gereken tipik UI kontrollerinin bir listesi:

Form kullanıyorsanız, her alanın doğru şekilde etiketlendiğinden emin olmanız gerekir. İşte iyi bir etiketleme örneği:

<label for=”fname”>Ad:</label><br>

<input type=”metin” id=”fname” name=”fname”><br>

<label for=”lname”>Soyadı:</label><br>

<input type=”metin” id=”lname” name=”lname”>

</form>

Not: Formlar için şunları da sağlamalısınız:

• Zorunlu alanları açıkça işaretleyin. Bir alan zorunluysa, html'de doğru şekilde etiketlenmesi gerekir.
• Kullanıcı için talimatlar vardır (genellikle formun en üstünde)
• Kullanıcılar bir form alanını doldururken hata yaptıklarında yardım alırlar (örn. yanlış tarih formatı, girmeniz gereken budur).

Captcha

Bu, nasıl uygulandığına bağlı olarak çok sorunlu olabilir. Örneğin, resimler gösterildiğinde ve hangi resmin trafik ışıklarını içerdiğini belirlemeniz istendiğinde!

Uygulamayı inceleyeceğiz ve ilgili önerilerde bulunacağız.

multimedya içeriği

Video/Ses, videonun/sesin ne hakkında olduğunu belirlemek için en azından bir açıklamaya ihtiyaç duyar.

Bağlantılar

Bağlantıların sayfada açıkça öne çıkmasını (örneğin farklı renk) ve ilgili bağlantı metni ve bağlantı açıklamasını kullandıklarından emin olmak istersiniz.

Yönerge 1.2 – Zamana dayalı medya

Bu alan, daha erişilebilir hale getirilmesi gereken video ve ses içeriğinin sağlanmasıyla ilgilidir.

Yalnızca önceden kaydedilmiş ses veya yalnızca video için kullanılabilir transkripsiyon var mı ?

Video transkripsiyon, videonuzun sesinin metne çevrilmesidir. Deşifre, videoda görüntülenen görseller gibi şeyleri açıklayan ses bilgilerini içermez. Bu ayrı olarak işlenir.

Transkripsiyon ipucu!

Rev.com, sesiniz/videonuz için altyazı/transkripsiyon oluşturmak için harika bir hizmettir. Zoom videosu için canlı altyazı hizmeti bile sağlıyorlar.

Önceden kaydedilmiş ses için altyazı var mı?

Altyazı, kullanıcının ne söylediği hakkında kullanıcıyı bilgilendirmek için videonun içinde görünen bir metindir.

Sesli açıklama veya medya alternatifi (önceden kaydedilmiş) var mı?

Bir video izlerken altyazılar videoda gösterilenleri açıklamak için yeterli olmayabilir. Sesli açıklamanın da gerekli olduğu yer burasıdır.

Örneğin, bir sesli açıklama, biri konuşurken arka planda neler olduğunu açıklayabilir, böylece kullanıcılara bir bağlam sağlar.

İşte sesli açıklama içeren bir transkripsiyon örneği.

Bu, web sitenizin ziyaretçisi için harika ama aynı zamanda SEO için de iyi!

Erişilebilir bir oyuncu seçmeyle ilgili ipucu:

Kullandığınız video oynatıcının erişilebilirlik için gerekenleri desteklediğinden emin olmak istiyorsunuz:

1. Altyazıları destekler
2. Sesli açıklama açılıp kapatılabilir
3. Medya oynatıcıda anahtar kelime kontrolü kullanılabilir
4. Medya oynatıcı farklı cihazlarda ve tarayıcılarda çalışır
5. Tüm kontrollere erişilebilir.

Canlı ses için altyazı var mı?

Web sitenizde genellikle canlı video veya ses içeriği bulunmaz, ancak bunu yaptıysanız, kullanıcıların kişi konuşurken görüntülenen altyazıları görebilmesi için eşzamanlı altyazı oluşturmanız gerekir.

Canlı videonuza ve sesinize otomatik olarak altyazı eklemek için kullanılabilecek araçlar vardır.

Önceden kaydedilmiş senkronize medya için sesli açıklama var mı?

Bu, video ve ses içeren medya içindir. Medyaya eşlik eden sesli bilgi istiyoruz.

Yönerge 1.3 – Uyarlanabilir – Bilgileri yazılım tarafından anlaşılabilecek bir formatta sunun.

Bir şeye bakarak görsel olarak yorumlayabileceğiniz şeyin, ekran okuyucu gibi yazılımlar tarafından doğru şekilde yorumlanabilmesi için programlı olarak tanımlandığından emin olmanız gerekir.

İçeriğin mantıklı bir yapısı var mı ve bu yapı içindeki her bir içerik parçasıyla olan ilişkisini anlamak kolay mı?

Bir web sayfasını görüntülediğinizde normalde başlıklar, paragraflar, kalın içerik, tablolar vb. görürsünüz. Bir tablonun ayrıntılarını görüntülediğinizde ise başlıkları görürsünüz ve hangi satırın hangi başlıkla ilgili olduğunu açıkça görürsünüz.

İşte incelemeniz gerekenler:

• İçerik alt başlıklara ayrılmış mı?
• Uygun olduğunda listeler, tablolar vb. kullanılıyor mu?
• İçerik boyunca diğer yapısal öğeler için kullanılan doğru HTML var mı?
• Gerektiğinde kullanılan etiketler ve alternatif metinler var mı (örn. formlarda?)

Uç

İyi bir başlangıç ​​noktası, geçerli html'yi kontrol eden bir doğrulama aracı kullanarak web sitenizi test etmektir (örn. W3.org html doğrulayıcı).

Burada, gerekli alanları kırmızı olarak gösteren bir form örneği verilmiştir. Bu görsel bir kullanıcı için sorun değil, peki ya braille ekranı kullanan biri?

Bu sorunu aşmak için, zorunlu bir alan olan soyadı etiketine 'zorunlu' kelimesi de eklenir.

 <label for="lastname" class="required">Soyadı (gerekli): </label>
<input type="text" size="25" value=""/>
<stil türü="metin/css">
  .gereklidir {
    kırmızı renk;
  }
</style>

Mantıklı bir içerik sırası var mı?

• Bir web sayfasını görüntülediğinizde bir gezinme çubuğu, ardından bazı içerik, başlıklar, alt başlıklar, metin paragrafları göreceksiniz. Bunun mantıklı bir sırayla sunulduğundan emin olmak istersiniz.
• Bölümlerin önemini belirtmek için başlık stillerini kullanın. İçerik sayfasını tanımlamak için genellikle yalnızca bir <h1> stiliniz vardır ve ardından birden fazla H2, H3 vb. olabilir.
• Gezinmeyi içerikten ayrı tutun (örn. gezinmeyi <nav> kullanarak tanımlayın)
• Geçerli html kullan

İşte mantıklı olan tipik bir başlık yapısı:

Kullanıcılar şekli, boyutu algılayamadıklarında veya uzamsal şekil veya boyutla ilgili bilgileri kullanamadıklarında içeriği anlayabilirler mi?

Bunu açıklamanın en kolay yolu bir örnekle:

Diyelim ki yazılım ürünü özelliklerinin bir karşılaştırma tablonuz var ve bir ürün bir özelliğe sahip olduğunda bu sütunda bir elmas resim görüntüleniyor. Bu yeterli değil, bu elmasın neyi temsil ettiğini belirtmek için metin eklemeniz gerekecek.

Web sitesi portre ve manzara modunda iyi çalışıyor mu?

Web sitesinin anlamını kaybetmeden portre veya manzara moduna uyum sağlayabilmesi gerekir.

Bir web sitesi duyarlı tasarımı doğru şekilde uyguladıysa, yönlendirmeyi değiştirdiğinizde farklı bir görünüm alanına uyum sağlar (yani ekran boyutlarına göre daha uygun bir görüntü seçer).

Formların girdileri doğru tanımlanmış mı?

Bunun amacı, bir formda doldurulması gereken herhangi bir alan hakkında programlı olarak yeterli bilgi olmasını sağlamaktır.

Ve mümkünse, kullanıcının her şeyi tamamlaması gerekmemesi için otomatik doldurmayı etkinleştirin!

Bir sayfadaki öğelerin amacı programlı olarak anlaşılabilir mi?

Buna bir örnek, bir web sitesinin bölümleri için ARIA 'rol' öğesini kullanmaktır.

Örneğin, logo/şirket adı vb. içeren bir banner 'rol=banner' olarak tanımlanabilir.

veya e-posta, ad, adres vb. için formlarda giriş etiketleri kullanmak.

Bunu HTML'de şu şekilde görürsünüz:

<input type="email>

Herhangi bir grafiğin metin versiyonu var mı?

Herhangi bir grafik türü içeriği varsa, bu içeriğin ne hakkında olduğunu özetleyen bir tabloya sahip olmak isteyeceksiniz.

Yönerge 1.4 – İçeriği görün ve duyun

Bu, insanların içeriği görmesini ve duymasını kolaylaştırmakla ilgilidir.

Bilgi iletmek için renk kullanıldığında metin alternatifleri var mı?

Bir formunuz olduğunu ve gerekli bir alanın kırmızı ile görüntülendiğini hayal edin.

Bu, bir ekran okuyucu için pek bir şey ifade etmez!

Ancak aşağıdaki örnekte olduğu gibi 'gerekli' kelimesini tabloya ekleyebilirsiniz:

<label for=”lastname” class=”required”>Soyadı (gerekli): </label> <input id=”lastname” type=”text” size=”25″ value=””/> <style type= ”text/css”> .required { color:red; } </stil>

Sesi 3 saniyeden fazla çalarsa duraklatmak veya durdurmak için bir mekanizma var mı?

Bir ekran okuyucu kullanıyorsanız ve bir video aynı anda otomatik olarak oynatılırsa, iki ses duyarsınız!

İdeal olarak, bu sorunu çözen otomatik video oynatma olmayacaktır.

Otomatik oynatma varsa, 3 saniyeden az olduğundan emin olun ve değilse, video oynatma sesini kontrol etmenin bir yolu olduğundan emin olun.

Arka planda metin ve resimler/renk arasında iyi bir kontrast var mı?

Tasarım ve marka oluşturmada renklerin ne kadar önemli olduğunu hepimiz biliyoruz, ancak sitenize gelen görme engelli ziyaretçiler için renkler, deneyimlerinde pek bir fark yaratmayacaktır.

Örneğin, renk körü insanlar kırmızı, turuncu, sarı ve yeşil arasında bir fark görmezler ve sizin de onlara hitap etmeniz gerekir.

Buradaki anahtar, web sitelerinde bulunan en yaygın erişilebilirlik sorunlarından biri olan kontrast oranına dikkat etmektir.

Metin rengi ile arka planı arasında yeterli kontrast var mı? Renk kontrastı denetleyicisi gibi bir araç, öğrenmenize yardımcı olabilir!

Arka plan rengi solda ve ardından metin rengi sağda. Skor ortada.

Öneri, metin büyük olduğunda (örneğin 18 punto veya 14 punto kalın) kontrastın en az 4.5:1 veya 3.1 olmasıdır.

Ayrıca, sitenizdeki önemli içerik ve bilgileri iletmek için renk dışında araçlar kullandığınızdan emin olun.

Örneğin, ana CTA'nız genellikle kullanıcıların fark etmesini sağlayan bir renk nedeniyle sayfada açılır. CTA'ları daha erişilebilir hale getirmek için boyut, yerleşim, koyuluk, kontrast kullanabilir ve renk körlüğü olan kişiler tarafından fark edilmesini sağlayabilirsiniz.

Metin daha büyük hale getirilebilir ve web siteniz hala normal şekilde çalışabilir mi?

Bariz olanı, görme bozukluğu olan birine yardım etmek için ekrandaki metni büyütmektir.

Ancak, bir kullanıcı metin boyutunu büyüttüğünde web sitesinin normal şekilde çalışmasını istiyorsunuz.

Örneğin, bir kullanıcı metni %400'e kadar yakınlaştırdığında hiçbir bilginin kaybolmadığından emin olmanız gerekir.

İşte W3.org'dan bir resim. Metni büyüttüğünüzde web sitenizin sağdaki gibi görünmesini istemediğinizden eminim.

WCAG 2.1 gereksinimi, herhangi bir sorun yaşamadan %200 oranında büyütebilmenizdir.

Metin resimlerinden gerekli olmadıkça kaçınılıyor mu?

Metin içeren bir logonuz olabilir (örneğin, şirket adınız) ki bu sorun değil.

Peki ya metin görüntüleri?

Bir metin resminiz varsa, en azından onu açıklayan bir etiket sağlamalısınız.

Ancak, aşağıdaki durumlar dışında bu tür resimlerden kaçınmanız daha iyi olur:

• Bu çok önemli
• özelleştirilebilir

Web sitesi duyarlı mı?

Web sayfasının tamamını görmek için aşağı kaydırmanız normaldir, ancak sağa veya sola kaydırmamanız normaldir.

Bir masaüstünden daha küçük bir cihaza geçtiğinizde, ekranın otomatik olarak ayarlanması gerekir, böylece yine de sağa veya sola kaydırmanız gerekmez.

Metin dışı içerik için yeterli kontrast var mı?

Bitişik renklerin en az 3:1 kontrast oranına sahip olması gerekir

Bu gereklilik, görece az gören kişiler içindir.

Boşluk/satır yüksekliği performans kaybı olmadan ayarlanabilir mi?

• Satır yüksekliği (satır aralığı) yazı tipi boyutunun en az 1,5 katı olmalıdır;
• Paragraftan sonraki boşluklar yazı tipi boyutunun en az 2 katı olmalıdır;
• Harf aralığı (izleme) yazı tipi boyutunun en az 0.12 katı olmalıdır;
• Kelime aralığı, yazı tipi boyutunun en az 0.16 katı olmalıdır.

İçerik, üzerine gelindiğinde veya odaklanıldığında doğru şekilde görüntüleniyor mu?

Bir öğeye odaklandığınızda (örneğin, ona sekme) veya üzerine geldiğinizde ek içerik görürsünüz.

Örneğin, bir düğmenin üzerine geldiğinizde bir açılır pencere belirir.

…veya bir alt menü görüntülenir.

Bu içeriğin olması gerekenler:

Dismisable – Örneğin, Escape'i tıklatırsanız içerik artık görüntülenmez.

Hoverable - İçeriğin üzerine geldiğinizde, fare tetikleyicinin üzerinde olduğu sürece içerik görüntülenir.

Kalıcı - Bu, her ikisinin birleşimidir. İçerik, kullanıcı kapatana, kullanıcı fareyi uzaklaştırana veya içerik artık önemli bilgiler içermeyene kadar görünür durumda kalır.

Not: Bu, bir şeyin (örneğin bir resim) üzerine geldiğinizde başlık gibi bir HTML öğesinin görüntülenmesi için geçerli değildir.

Yazı tipi okunabilir mi?

Bazı yazı tipi/yazı tipleri diğerlerinden daha okunaklı. Serif veya sans serif tercihi vardır ancak bu zorunlu değildir. Anahtar kısım, okunabilir olmasıdır.

2. Çalıştırılabilir

Bu, kullanıcıların navigasyonu ve kullanıcı arayüzünü onunla etkileşim kurarak kullanabilmesi gerektiği anlamına gelir. Örneğin, klavyeyi kullanarak kullanıcı arayüzünü 'işletebilirler'.

Yönerge 2.1 – Klavyeyle erişilebilir

Hareketlilik erişilebilirlik engelleri olan veya ekran okuyucu kullananlar da dahil olmak üzere birçok kullanıcı fare veya izleme dörtgeni yerine klavye kullanır.

Bu nedenle web sitenizdeki tüm işlevlere klavye aracılığıyla erişilebilir olmalıdır - bağlantılar, düğmeler, formlar ve diğer kontroller.

Her şeye klavyeden erişilebilir mi?

Şimdi farenizi kullanmayı bırakıp sadece klavyenizi kullanma zamanı.

Şunları kontrol ediyorsunuz:

Her şey ileri veya geri giden mantıklı bir sıra izliyor mu (ileri gitmek için sekmeyi ve geri gitmek için sekmeyi kaydırmayı kullanarak).

Belirli bir düğme, bölüm vb. üzerindeyken bu öğenin vurgulandığını görüyor musunuz? Aşağıdaki örnekte, 'makaleler' sekmesine geldiğimiz çok açık.

Sekme tuşu kullanılarak her şeye erişilebilir mi ve odaktayken enter tuşuna bastığınızda eylemi etkinleştirir mi?

Not: Bir açılır pencere belirirse, bunda da gezinebilmeniz gerekir.

Başlığı atlayabilir misin?

Bir ekran okuyucu kullandığınızda, her sayfada aynı başlığı okumasını istemezsiniz. Bu seni deli ederdi. Bu nedenle, 'İçeriğe geç bağlantısına' sekme yapabilmeniz gerekir, enter tuşuna basın, ardından bir sonraki sekmeniz bu bölümü atlayacaktır.

Aşağıdaki web sitesine ilk geldiğinizde sekmeye tıkladığınızda, 'İçeriğe geç' bağlantısındasınız. Enter'a basarsanız, doğrudan içeriğe gidersiniz.

İkinci bir sekmeye basarsanız, 'Navigasyona atla' bağlantısına gidersiniz. Bunun üzerine enter tuşuna basarsanız navigasyona yönlendirilirsiniz.

Sekmeye tekrar basarsanız, 'navigasyona atla'ya geçersiniz. Bunu seçerseniz, doğrudan navigasyona atlarsınız.

Kısayol olarak kullanılan bir karakter, noktalama işareti, sayı veya sembol varsa, bu kısayolu devre dışı bırakmanın veya yazdırılamayan bir veya daha fazla karakterle değiştirmenin bir yolu olmalıdır. Diğer tek istisna, kısayolun yalnızca öğeye odaklanıldığında kullanılabilir olmasıdır.

2.1.2 Klavye (klavye tuzağı) ile çıkmaza girdiğiniz durumlar var mı?

Web sitesinde bir yere giden yolu sekmelersiniz ve ileri veya geri sekme yapamazsınız.

Bu klavye kapanı olarak bilinir. Şarkı ilerledikçe…bir tuzağa yakalanır, geriye bakamaz….

Bir harf kullanılarak uygulanan klavye kısayoluna bir alternatif var mı?

Navigasyon için klavyeye güvenen biriyle karakter tuşu kısayoluna sahip olmak iyi değildir çünkü yanlışlıkla tuşa basabilirler.

Bu yüzden bir alternatif sunmamız gerekiyor.

a) Bu karakteri başka bir kısayola yeniden eşleme yeteneği

b). Kapatmak

c). Yalnızca buna odaklandığınızda etkindir. Bu, kısayolu kullanırsanız, aslında üzerinde olmadığınız sürece hiçbir şey olmayacağı anlamına gelir!

Kılavuz İlke 2.2 – Yeterli zaman

Bir formu doldurmak için bir zaman sınırı belirlediğinizi, ancak yalnızca erişilebilirlik ihtiyacı olmayan kullanıcılar olarak kabul ettiğinizi hayal edin. Bu süre sınırı çok kısa olabilir.

Zamanlama ayarlanabilir mi?

Zamanlamayı kapatmak idealdir, ancak bunu uzatabilmek (yani zaman sınırına neredeyse ulaşıldığında) veya yeni zamana ayarlayabilmek sorun değil.

Web sitesi kullanıcısı, hareket eden, yanıp sönen veya otomatik olarak güncellenen içeriği duraklatabilir, durdurabilir veya gizleyebilir mi?

Hareket ediyorsa/yanıp sönüyorsa veya titriyorsa ve:

a). otomatik olarak başlar

b). 5 saniyeden fazla sürer

c). diğer içeriklerle paralel olarak sunulur

Sonra duraklatma, durdurma veya silme için bir mekanizma var.

Otomatik güncelleme içeriğiyle aynı sorun.

Kılavuz İlke 2.3 – Nöbetler ve fiziksel reaksiyonlar

Bu kılavuz, nöbet veya fiziksel reaksiyona neden olabilecek hiçbir şeyin tasarlanmadığından emin olmak içindir.

Ekrandaki 'yanıp sönmeler' yönergelere uygun mu?

Birinci kural, yanıp sönen nesnelerden kaçınmaktır, ancak bu mümkün değilse, herhangi bir saniyede 3 defadan fazla yanıp sönmediğinden veya genel veya kırmızı yanıp sönme eşiklerinin altında yanıp sönmediğinden emin olun.

Kılavuz İlke 2.4 – Gezinilebilir

Bu, web sitesinde gezinmeyi kolaylaştırmakla ilgilidir.

Tekrar eden blokları atlayabilir misin?

Bir ekran okuyucu kullandığınızı ve her yeni sayfaya geçtiğinde navigasyonu okuduğunu hayal edin. Şimdi bu eğlenceli olmazdı. Bu yüzden bunları atlayabilmeniz gerekir. Bunun örneğini daha önce vermiştim.

Tüm sayfaların başlığı doğru mu?

Tüm sayfalarda iyi açıklayıcı başlıklara ihtiyacınız var. Bu erişilebilirlik için iyidir, aynı zamanda SEO için de iyidir.

Sayfa başlıklarına tek bir yerden bakmak için Screaming Frog'u kullanabilirsiniz:

Odak sırası anlamı koruyor mu?

İçeriğe göz atıyorsanız ancak mantıklı olmayan bir sırayla sekme yapıyorsanız, bunu düzeltmeniz gerekir.

Bağlantı metninden bağlantının amacını belirleyebilir misiniz?

'Buraya tıklayın' çok yararlı bir bağlantı metni değil. Bağlantının gideceği içeriği tanımlayan kelimelere sahip olmanız gerekir.

Bağlantı metni nedir?

Web sitenizdeki veya harici bir web sitesindeki başka bir sayfaya bağlantı verdiğinizde, bağlantı metni, insanları gönderdiğiniz sayfayla ilgili gördüğünüz görünür metindir. Sadece bağlantıyı göstermek yerine asıl metni göstermek daha iyidir.

Bir web sayfasını bulmanın birden fazla yolu var mı?

İşte bazı örnekler:

• Site Haritası – Bir site haritasındaki tüm sayfaların bir listesine sahip olun
• Hızlı bağlantılar – Önemli sayfalara ulaşmak için hızlı bağlantılara sahip olun
• Ara – İlgili bir sayfayı bulmak için arayın

Klavye odağı görünür mü?

Soru her şeyi söylüyor! Bu aynı zamanda daha önceki yönergelerden birinde ele alındı. Bir yere tıkladığınızda, odağın o alanda olduğunu görsel olarak görebilmeniz gerekir.

Üstbilgi, gövde ve altbilgi açıkça tanımlanmış mı?

Yardımcı teknolojilerin üstbilgi, altbilgi ve gövdeyi açıkça tanımlayabilmesi gerekir. Bu alanları tanımlayan html etiketleri vardır.

Kılavuz İlke 2.5 Giriş yöntemleri

Bu kılavuz, gezinmek için klavye veya fare kullanamayacağınız daha yeni arabirimler hakkındadır. Örneğin akıllı telefonlarda kaydırabilir, sıkıştırabilir ve yakınlaştırabilir, dokunabilirsiniz vb.

Çok noktalı veya yol tabanlı hareketleri kullanan işlevler, hareket kullanılmadan (gerekli olmadıkça) tek bir işaretçi tarafından çalıştırılabilir mi?

Yola dayalı bir hareket, belirli bir yolda hareket etmeniz gereken yerdir. Örneğin, belirli işlevlere erişmek için yukarı veya diğer işlevlere erişmek için aşağı kaydırırsınız. Çok noktalı bir hareket, işlevselliğe erişmek için iki veya daha fazla temas noktasını kullandığınız yerdir, örneğin kıstırma ve yakınlaştırma için 2 parmağınızı kullanın.

Tek bir işaretçi tarafından başlatılan bir eylemden çıkmanın kolay bir yolu var mı?

Tek işaretçi nedir?

Bu, bir ekranla tek bir etkileşim noktasıyla işlevselliğe erişebileceğiniz yerdir, örneğin dokunma, tıklama, uzun basma vb.

Aşağıdakilerden en az biri doğru olmalıdır:

• Aşağı olay yok - bir düğmeye bastığınızda tetik uygulanır
• Durdur veya Geri Al – Bir up olayı kullanırsınız (yani, işaretçi bırakıldığında işlev etkinleştirilir) ve iptal etmenin bir yolu vardır. Örneğin, parmağınızla bir şeye basıyorsunuz ve parmağınızı düz bir şekilde yukarı kaldırmak yerine ekranın başka bir yerine kaydırıyorsunuz ve işlevsellik iptal oluyor.
• Yukarı tersine çevirme – Yukarı olayı, aşağı olayını tersine çevirir
• Temel – Down olayının işlevini tamamlamak esastır.

Bir bileşenin görünen etiketi, o bileşenin programlı adıyla eşleşiyor mu?

Gören bir kullanıcı konuşma metni kullanırsa, programlı ad okunur ve bu, görünür etiketle eşleşirse daha iyi bir deneyim olur.

Hareket veya el hareketi ile çalıştırılan işlevsellik, diğer UI kontrolleri tarafından da çalıştırılabilir mi?

Kontrol etmek için bir şeyi sallar veya eğirseniz, bu işleve erişmek için başka bir UI kontrolü kullanabilir misiniz?

anlaşılır

Bu, sayfada kullanılan dilin anlaşılır olduğundan emin olmakla ilgilidir.

3.1 Okunabilir

Aşağıdakileri kapsarız:

Sayfanın dili veya sayfanın bölümleri programlı olarak belirlenebilir mi?

Herhangi bir sayfanın başında böyle bir şey görmelisiniz. 'Lang' sayfanın dilini belirtir.

<html class=”yani ie7″ lang=”en-US”>

Sayfadaki dil değişirse, bunu da tanımlayabilmeniz gerekir.

3.2 Öngörülebilir

Kullanıcı arayüzünüzün tahmin edilebilir bir şekilde çalışmasını istiyorsunuz, sürpriz yok!

Sayfalarda gezinme aynı sırada mı?

Kullanıcı gezinmede bir değişiklik yapmadıkça, bir sayfadaki gezinme konumu diğer tüm sayfalarda aynı olmalıdır.

Bileşenler, resimler vb. sayfalar arasında tutarlı bir şekilde adlandırılmış mı?

Bir sayfada bir görseliniz varsa ve başka bir sayfada aynı görsele sahipseniz, görselin aynı şekilde adlandırılmasını istersiniz.

Bir gönderide birkaç sayfanız varsa ve sayfa 1, sayfa 2, sayfa 3'ü tutarlı olarak adlandırırsanız. Bir anlam ifade etmiyorsa etiketleme aynı olmak zorunda değildir, ancak tutarlı olması gerekir.

3.3 Giriş Yardımı

Bu, kullanıcıların hatalardan kaçınmasına veya hatalardan kurtulmasına yardımcı olmakla ilgilidir:

Giriş hatası – Bir şeyi yanlış yazıyorsanız, görsel olarak yanlış olduğunu görebilirsiniz ancak aynı zamanda sorunu tanımlayan bir metin olması gerekir.

Etiketler – Kullanıcıların bir metin girmesi gerektiğinde, alanı açıklayan ilişkili bir etiket vardır.

Giriş hatası – Bir kullanıcı bir hata yaparsa, bunun nasıl düzeltileceğine dair bir öneri vardır.

Hata önleme – Göndermeden önce geri dönebilmeli, hata hakkında geri bildirim alabilmeli veya onaylayabilmelisiniz.

4. Sağlam

İçeriğinizin erişilebilir olmasının yanı sıra çeşitli tarayıcıları, teknolojileri vb. desteklemesi gerekir.

Yönerge 4.1 Uyumlu

Bu, çeşitli kullanıcı aracıları ve yardımcı teknolojilerle test etmeyi içerir. Bunun için iyi bir başlangıç ​​testi, herhangi bir hata olup olmadığını görmek için W3C işaretleme doğrulama aracını kullanmaktır (yani, html, xhml vb. yapısının/sözdiziminin doğru olduğunu doğrular).

İşte çıktının bir örneği:

Ayrıca içeriğin doğru şekilde yüklendiğinden emin olmak için birden çok tarayıcıda test etmeniz gerekir.

Ayrıca sayfayı yalnızca metin içeren bir tarayıcıya (Lynx gibi) yüklemeye değer.

Tüm veriler doğru şekilde ayrıştırılabilir mi?

İçeriğin bölümlerinde uygun başlangıç ​​ve bitiş etiketleri var mı, böylece bir bölümün nerede başlayıp nerede bittiğini belirlemek kolay mı?

Öğeler doğru şekilde yuvalanmış mı?

Öğeleri ayırt etmeyi zorlaştıran yinelenen nitelikler veya kimlikler var mı?

Tüm kullanıcı arayüzü kontrolleri yardımcı teknolojiler tarafından anlaşılabilir mi?

İşte bazı kontrol örnekleri ve çözebilmeniz gerekenler:

• Onay kutusu - işaretli mi değil mi?
• Odak - Hangi öğeye odaklanılır ve bu program aracılığıyla anlaşılabilir mi (sadece görsel olarak değil)?

Kullanıcılar, çalışmayı kesintiye uğratmayacak şekilde odaklanmayan durum mesajlarından haberdar ediliyor mu?

Bir sayfada gezindiğinizi ve o sayfadayken web sitesinin en üstünde bir satış ilan eden bir afişin karşınıza çıktığını hayal edin.

Formlar doğru şekilde tasarlanmış mı?

Formları erişilebilir kılmak için aşağıdakilerin etkinleştirildiğinden emin olmanız gerekir:

• Formda gezinmek için sekmeyi kullanabilme
• Formda gezinmek için sekmeyi kullanabilme

<form>

<label for=”fname”>Ad:</label><br>

<input type=”metin” id=”fname” name=”fname”><br>

<label for=”lname”>Soyadı:</label><br>

<input type=”metin” id=”lname” name=”lname”>

</form>

• Açıkça işaretlenmiş zorunlu alanlar. Bir alan zorunluysa, html'de doğru şekilde etiketlenmesi gerekir.
• Kullanıcı için talimatlar vardır (genellikle formun en üstünde)
• Kullanıcılar bir form alanını doldururken hata yaptıklarında yardım alırlar (örn. yanlış tarih formatı, girmeniz gereken budur).

Özet

Gördüğünüz gibi, kapsamlı bir erişilebilirlik denetimi yürütürken ele alınması gereken çok şey var. Bununla birlikte, olumlu bir marka imajı oluşturmaktan daha geniş bir kitleye ulaşmaya ve SEO'nuzu geliştirmeye kadar, bunların tümü işe yarar ve işinize getirdiği faydalar çoktur.