Drupal Web Sitelerini WCAG 2.1 ile Erişilebilirlik Açısından Test Etme

ABD'de her 4 yetişkinden 1'inin engelli* olduğunu biliyor muydunuz? Bu, erişilemeyen web sitelerinden etkilenebilecek şaşırtıcı bir 61 milyon insan.

Bir Drupal geliştiricisi olarak, sitenizin Web İçeriği Erişilebilirlik Yönergeleri'ne (WCAG) uygun olmasını sağlayarak fark yaratma gücüne sahipsiniz. Bu blogda, tüm kullanıcıları kapsayıcı web siteleri oluşturabilmeniz için Drupal'da WİEK 2.1 erişilebilirliğini test etmeye yönelik temel özellikleri ve en iyi uygulamaları keşfedeceğiz.

Erişilebilirlik Nedir (A11y)

Erişilebilirlik, bir web sitesini mümkün olduğu kadar çok kişi tarafından, özellikle de engelli kişiler için kullanılabilir hale getirmek anlamına gelir. A11y neyi ifade eder? A11y, "Erişilebilirlik" kelimesini ifade eder; burada 11, "A" ve "Y" arasında bulunan karakter sayısını belirtir.

WCAG ve kökenleri

WCAG, Web İçeriği Erişilebilirlik Yönergeleri anlamına gelir. Web sitesi erişilebilirliği için standartlaştırılmış bir kriter olarak kabul edilir. World Wide Web Consortium (W3C) tarafından oluşturulan WCAG yönergeleri, web sitenizi herkes için kullanılabilir hale getirmenin en iyi ve en kolay yoludur. Web sitesinin erişilebilirlik yasalarına (örneğin, bölüm 508) uymasını sağlamak için çoğu hükümet ve sağlık kuruluşu tarafından WCAG yönergelerine sıkı sıkıya uyulur.

WCAG İlkeleri

WİEK uyumluluğunu benimsemek istiyorsanız erişilebilirliğin dört ana ilkesi vardır. Bunlar , Algılanabilir, Çalıştırılabilir, Anlaşılabilir ve Sağlam anlamına gelen 'POUR' kısaltmasını takip eder.

algılanabilir

Basit bir ifadeyle, içerik kullanıcının duyuları tarafından algılanabilir olmalıdır. Bu, kendilerine sunulan bilgileri tanıyabilmeleri gerektiği anlamına gelir. Kullanıcıların ses içeriğini net bir şekilde duymalarına ve arka plan gürültüsünden ayırt edilebilir olmasını sağlamayı içerir.

çalıştırılabilir

Her şey, kullanıcıların web sitenizde rahatça gezinebilmelerini ve arayüzün kullanıcı dostu olmasını sağlamakla ilgilidir. Sitede erişilemeyen herhangi bir bölüm veya kullanıcıların tamamlayamayacakları herhangi bir adım olmamalıdır. Web içeriğinizi tasarlarken hızlı hareket eden ve yanıp sönen içerikten kaçınmalısınız. Sitede klavye olmadan gezinmek kolaylaştırılmalı, ayrıca fare kullanamayan kullanıcılar için sitenin klavyeyle erişilebilir olduğundan emin olunmalıdır.

anlaşılır

Kullanıcılar, kendilerine sunulan bilgileri işleyebilmeli ve ayrıca web sitesini nasıl kullanacaklarını ve web sitesinde nasıl gezineceklerini anlayabilmelidir. Bu, sayfaların kullanıcı dostu ve beklenen bir şekilde görünmesini sağlamak için metni net, okunabilir ve öngörülebilir hale getirmeyi içerir.

güçlü

Bu, teknolojinin gelişebileceğini ve web sitenizi gelecekteki teknolojik gelişmelerle oluşturabileceğini vurgulamaktadır. Temel kural olarak, teknoloji değişir ve gelişirse içerik de erişilebilir kalmalıdır. Ayrıca, farklı engellere sahip geniş bir kullanıcı yelpazesi tarafından anlaşılması gerekir ve yine de anlaşılması kolaydır. Örneğin site, ekran okuyucuların en yeni sürümüyle çalışacak şekilde uyumlu hale getirdi.

WCAG'a neden uymalısınız?

Aşağıda WCAG uygulamasının avantajlarından birkaçı verilmiştir.

• Erişilebilir bir web sitesi, markanıza karşı iyi niyet oluşturur ve arama motoru optimizasyonunu geliştirir. Siteniz arama motoru sonuçlarında daha üst sıralarda yer alacaktır.
• Erişilebilir bir web sitesi, geniş bir yelpazedeki insanların içeriğinize erişmesini engelleyen engelleri etkili bir şekilde kaldırmış olacağınız için daha fazla katılım, erişim ve elde tutma sağlar.
• WCAG, herhangi bir web sitesinin parçası olarak uygulandığında, standart olarak kabul edilir.

WCAG 2.0/2.1 Başarı Kriteri: En Yaygın Olarak Uygulanan

1. Sitedeki her giriş alanının uygun bir etiketi vardır
2. Dekoratif içerik, yardımcı teknoloji tarafından göz ardı edilebilecek şekilde uygulanır. Örneğin, ekran okuyucular tarafından göz ardı edilen dekoratif resimler
3. Önceden kaydedilmiş tüm ses/video içeriği için altyazılar sağlanır
4. Ses içeriği için işaret dili tercümesi sağlanır
5. Anlamlı bir içerik dizisi, örneğin herhangi bir sayfadaki başlıkların sıralı bir düzende yerleştirilmesi
6. Kullanıcı, videoları otomatik olarak oynatmak için sesi duraklatabilir veya durdurabilir veya ses düzeyini genel sistem ses seviyesinden bağımsız olarak kontrol edebilir.
7. Metin ve metin resimlerinin kontrast oranı 4,5:1 ve büyük ölçekli metin ve resimlerin kontrast oranı 3:1'dir. Kontrast oranı, dekoratif içerik veya logo veya marka adı için geçerli değildir.
8. Düşük veya hiç arka plan sesi yok. Önceden kaydedilmiş ses/video herhangi bir arka plan gürültüsü içermiyor
9. İçeriğin tüm işlevlerine klavye arabirimi aracılığıyla erişilebilir. Anahtar kelime tuzağı olmayacak.
10. Kullanıcılara içeriği okumaları ve kullanmaları için yeterli zaman sağlamak
11. İçerik zamana dayalıysa, kullanıcının zaman kısıtlamasını duraklatmasına veya ayarlamasına izin verilir.
12. Otomatik döngüler gibi hızlı hareket eden herhangi bir içerik olması durumunda, kullanıcıya onu duraklatma veya durdurma seçenekleri sunulur.
13. Kimliği doğrulanan kullanıcının oturumu sona erdiğinde, kullanıcı yeniden kimlik doğrulamasının ardından veri kaybı olmadan oturuma devam edebilecektir.
14. Sayfa başlıkları, başlıklar ve etiketler web sayfasının konusunu açıklayacaktır.
15. Klavye odağı görünür ve iyi vurgulanır
16. Odaklanabilir bileşenler, anlamı ve çalışabilirliği ifade eden bir sırayla odak alacaktır.
17. Web sayfasının her bölümüne, bölüm başlığı eşlik eder
18. Dekoratif görseller dışında tüm görsellerde anlamlı Alternatif metin bulunur
19. Ses, video, formlar, açılır menüler, bağlantı metni, URL'ler ve alternatif metne klavye ve ekran okuyucuyla erişilebilir
20. İçerik netliği, sayfanın yakınlaştırma düzeyine göre uyum sağlar. İçerik, maksimum yakınlaştırma seviyesinde bile net bir şekilde görülebilir
21. Yardım içeriğine sahip üstbilgi ve altbilgi menüsü, sitedeki tüm sayfalarda bulunmalıdır.
22. Siteler, vurgulu ve odak durumlarının uygun şekilde uygulanmasına sahiptir

Ekran Okuyucular

Görsel sorunları olan birçok kişi ekran büyütücüler ve ekran okuyucular kullanır. Ekran okuyucu, ekranda görüntülenen dijital metni yüksek sesle okuyan bir yazılımdır. Bazı ekran okuyucu örnekleri şunları içerir:

• JAWS (Windows) ve Dolphin Screen Reader (Windows) gibi ücretli ürünler.
• NVDA (Windows), ChromeVox (Chrome) ve Orca (Linux) gibi ücretsiz yazılımlar.
• VoiceOver (macOS, iPadOS, iOS), Ekran Okuyucusu (Windows), ChromeVox (Chrome OS'de) ve TalkBack (Android) gibi işletim sisteminde yerleşik yazılımlar (İşletim sistemi).

Üç erişilebilirlik seviyesi

WCAG 2.1'de 3 seviye başarı kriteri vardır

• A Düzeyi: WCAG 2.0'da tanımlanan 30 temel başarı kriterinin tümü karşılanır. En azından, tüm web siteleri bu uyumluluk düzeyine ulaşmalıdır.
• AA Düzeyi: Tüm A düzeyi başarı kriterleri karşılanır ve ek olarak 28 erişilebilirlik başarı kriteri karşılanır. Bu düzey, daha geniş bir erişilebilirlik yelpazesine ulaşır ve genellikle geliştirme ekiplerinin çoğu için ulaşılması gereken hedeftir.
• AAA Seviyesi: Web sitesi, 28 ek başarı kriteri dahil olmak üzere üç başarı kriterini de karşılamalıdır. Bu seviye genellikle devlet kurumları gibi özel siteler için ayrılmıştır.

WCAG uyumlu sitelerin çoğu, geniş çapta erişilebilirlik başarı kriterleri düzeyi A veya AA kapsamına girer.

Bir Drupal Web Sitesini Erişilebilirlik Testi

Aşağıdakiler, bir Drupal web sitesi için erişilebilirlik testi gerçekleştirmek için izlenen adımlardır.

1. Bir Google Chrome Lighthouse denetimi çalıştırın ve vurgulanan erişilebilirlik sorunlarını düzeltin
2. Bir Wave aracı denetimi çalıştırın
3. Klavye vurgulama odağını ve sayfanın sekme sırasını manuel olarak doğrulayın
4. Sayfayı gerekli ekran okuyucu yazılımıyla doğrulayın. Örneğin, VoiceOver
5. Geniş masaüstü, dizüstü bilgisayar, sekme ve mobil cihazlar gibi tüm çözünürlüklerde site erişilebilirliğini doğrulayın
6. W3C'nin İşaretleme ve CSS için doğrulama araçlarını kullanarak site kodunu doğrulayın
7. Kontrast gibi bir Chrome uzantı aracı veya Color Contrast Analyzer gibi bir uygulama kullanarak standartları (4:5:1) karşıladığından emin olmak için sitenin renk kontrastını doğrulayın

Drupal Erişilebilirlik Standartlarına Ulaşmaya Nasıl Yardımcı Olur?

Web geliştirme, web sitelerinin engelli kişiler için işlevsel ve erişilebilir olduğundan emin olmak için erişilebilirliği içermelidir. Drupal, erişilebilirliğe olan kararlı bağlılığıyla ünlüdür. Drupal'ın erişilebilirliği nasıl desteklediğine ve web sitelerinin daha kullanıcı dostu olmasına yardımcı olmak için hangi araç ve özellikleri sağladığına bir göz atın.

1. Drupal'da Erişilebilirlik Oluşturma

Drupal geliştirme ekibinin amacı her zaman mümkün olduğu kadar çok kullanıcı tarafından kullanılabilen bir platform oluşturmak olmuştur. Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.1 Düzey AA gereksinimleri, temel Drupal platformu geliştirilirken izlenir. Bu, görsel, işitsel, fiziksel, sözel, bilişsel ve nörolojik sistemleri etkileyenler gibi çeşitli engellerin Drupal web sitelerine erişebileceğini gösterir.

2. Varsayılan Erişilebilirlik özellikleri

• Responsive tasarımı sayesinde çeşitli ekran boyutlarına ve cihazlara uyum sağlayabilen Drupal'ın varsayılan temaları, mobil cihaz veya yardımcı teknoloji kullananlar için kullanılabilir.
• Drupal, web sitesinin yapısını anlamada ekran okuyuculara ve diğer yardımcı teknoloji araçlarına yardımcı olan anlamsal HTML biçimlendirmesi oluşturur.
• Drupal, fotoğraflara alternatif metin eklemek için bir alan içerir, bu da görme engellilerin web sitesinin içeriğini anlamalarına yardımcı olur.
• Drupal, fare kullanamayan kullanıcılar için çok önemli olan klavye gezintisini destekler.
• Yardımcı teknoloji ile kullanımı ve gezinmesi kolay olan formlar, erişilebilir Drupal tarafından oluşturulur.

3. Drupal Erişilebilirlik için Eklentiler ve Modüller Sağlıyor

Drupal, bir web sitesinin erişilebilirliğini iyileştirmek için dağıtılabilecek çeşitli erişilebilirlik modülleri ve eklentileri sağlar. Çok beğenilen birkaç erişilebilirlik modülü ve eklentisi aşağıdaki gibidir:

• Editoria11y Erişilebilirlik Denetleyicisi: Bu modül, bir web sitesini erişilebilirlikle ilgili sorunlar açısından inceler ve çözüm önerilerinde bulunur.
• CKEditor Erişilebilirlik Eklentisi: Bu eklenti, Drupal için yaygın olarak kullanılan metin düzenleyicisi CKEditor'un erişilebilirliğini geliştirir.
• Hepsi bir arada erişilebilirlik Widget'ı: Bu modül, kullanıcıların web sitesinin metin boyutunu, kontrastını ve erişilebilirlikle ilgili diğer ayarlarını değiştirmesini sağlayan bir erişilebilirlik widget'ı içerir.
• A11Y: Form yardımcıları: Bu modül, tüm Drupal web formlarının erişilebilirlik standartlarını karşılamasına yardımcı olur
• Blok ARIA Dönüm Noktası Rolleri: Bu modül, kullanıcıların bir bloğa bir ARIA dönüm noktası rolü ve/veya ARIA etiketleri atamasına izin veren blok yapılandırma formlarına ek öğeler ekler.

4. Erişilebilirlik İçin Güçlü Topluluk Desteği

Erişilebilirliğe kendini adamış geliştiriciler ve tasarımcılar, Drupal topluluğunun oldukça büyük bir bölümünü oluşturur. Topluluğun Drupal'ı engelli kişiler için daha erişilebilir hale getirme çabası, Drupal Erişilebilirlik Grubu'dur. Grup, ADA uyumlu Drupal web siteleri geliştirmek için rehberlik, araçlar ve en iyi uygulamaları sunar.

Referanslar:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Son düşünceler

Drupal, bir web sitesinin erişilebilirliğini iyileştirmek için çeşitli özellikler, araçlar ve eklentiler sağlayan etkili ve açık kaynaklı bir içerik yönetim sistemidir. Erişilebilirliğe olan bağlılığı ve erişilebilirlik odaklı topluluğunun gücü nedeniyle Drupal, engelli kişiler için kullanılabilir ve erişilebilir web siteleri oluşturmak için harika bir platformdur.
Umarım bu makale size WCAG 2.1 ile erişilebilirlik testi hakkında gerekli bilgileri sağlar. Sıfırdan erişilebilir bir Drupal web sitesi oluşturmak mı yoksa mevcut sitenizi daha erişilebilir hale getirmek mi istiyorsunuz? Bunu gerçekleştirmeyi çok isteriz! Hadi Konuşalım!