Web uygulamalarınızın herkes tarafından erişilebilir olduğundan emin olmak, kullanıcı deneyimini iyileştirmenin ve yasal uyumluluğu sağlamanın önemli bir parçasıdır. Bu makalede, WICK-A11Y (özel bir Cypress erişilebilirlik eklentisi) ve Cypress kullanarak erişilebilirlik bariyerlerini nasıl tespit edip ortadan kaldıracağınızı adım adım öğreneceksiniz. Cypress’in gücüyle WICK-A11Y’nin yeteneklerini birleştirerek, uygulamalarınızın engelli kullanıcılar için de kapsayıcı ve kullanışlı olmasını sağlayabilirsiniz.
Daha fazla bilgi için fatihsoysal.com sitesini ziyaret edebilirsiniz.
WICK-A11Y ve Cypress: Temel Kavramlar Nelerdir?
Öncelikle, iki önemli aracı tanıyalım: WICK-A11Y ve Cypress. WICK-A11Y, Cypress için özel olarak geliştirilmiş, WCAG (Web Content Accessibility Guidelines) standartlarına uygunluğu kontrol eden bir erişilebilirlik test eklentisidir. axe-core altyapısını kullanır, ancak standart cypress-axe’den farklı bir API ve daha fazla özelleştirilebilir kural yapılandırması sunar. Cypress ise JavaScript tabanlı, güçlü bir end-to-end ve bileşen test çerçevesidir.
Bu iki aracı birlikte kullanmanın avantajı, erişilebilirlik testlerini otomatikleştirip geliştirme sürecinize (CI/CD) entegre edebilmenizdir. Bu sayede, manuel testlere kıyasla çok daha hızlı, tutarlı ve tekrarlanabilir bir test süreci elde edersiniz. WICK-A11Y, geliştiricilere kod değişikliklerinin erişilebilirliği nasıl etkilediğini erken aşamalarda görme ve sorunları anında düzeltme imkanı tanır.
Cypress’te WICK-A11Y Nasıl Kullanılır?
WICK-A11Y’i Cypress projenize entegre etmek ve kullanmak için resmi dokümantasyondaki adımları izlemeniz gerekir. Kurulum ve kullanımı, standart cypress-axe’den farklıdır.
İlk adım, paketi projenize eklemektir:
npm install wick-a11y --save-dev
Ardından, Cypress’in support/e2e.js (veya support/component.js) dosyasında eklentiyi import edip yapılandırmanız gerekir. WICK-A11Y, kendi özel komutunu (cy.checkAccessibility()) sunar ve kullanımı aşağıdaki gibidir:
describe('Erişilebilirlik Testleri', () => {
it('Ana sayfanın erişilebilir olduğunu doğrula', () => {
cy.visit('/');
// WICK-A11Y'nin özel komutu ile erişilebilirlik kontrolü
cy.checkAccessibility();
});
});
cy.checkAccessibility() komutu, sayfayı tarar, erişilebilirlik ihlallerini tespit eder ve testi bu ihlallerde başarısız kılar. WICK-A11Y, test sonuçlarını ayrıntılı ve okunabilir bir şekilde konsolda raporlar, hangi elementin hangi WCAG kuralını ihlal ettiğini ve nasıl düzeltileceğine dair bilgiler sunar.
Gerçek Dünya Senaryoları ve Vaka Çalışmaları
WICK-A11Y’nin gücü, kural yapılandırması ve özelleştirilmiş test senaryoları ile ortaya çıkar. Örneğin, bir e-ticaret sitesinin önemli bir iş akışını test edelim.
Senaryo: Sepete Ürün Ekleme Akışı
Sepete ürün ekleme işleminin her adımının (ürün listesi -> ürün detayı -> sepet) erişilebilir olduğundan emin olmak istiyoruz.
describe('Sepet Erişilebilirlik Testi', () => {
it('sepete ürün ekleme akışı erişilebilir olmalıdır', () => {
// 1. Ürün listesi sayfasını kontrol et
cy.visit('/urunler');
cy.checkAccessibility();
// 2. Bir ürünün detay sayfasına git ve kontrol et
cy.get('a.urun-linki').first().click();
cy.checkAccessibility();
// 3. Ürünü sepete ekle ve sepet sayfasını kontrol et
cy.get('[data-testid="sepete-ekle-btn"]').click();
cy.visit('/sepet');
cy.checkAccessibility();
});
});
WICK-A11Y, belirli kuralları devre dışı bırakma veya yalnızca belirli kuralları çalıştırma gibi ileri düzey yapılandırmalara da izin verir. Bu, projenizin özel ihtiyaçlarına göre testleri şekillendirmenizi sağlar.
İleri Düzey Teknikler ve İpuçları
Kural Yapılandırması: WICK-A11Y, axe-core’un tüm kural setini destekler. Test senaryonuzu özelleştirmek için hangi kuralların çalıştırılacağını veya yok sayılacağını yapılandırabilirsiniz.
CI/CD Entegrasyonu: WICK-A11Y testlerinizi, her bir “pull request” veya yapıda otomatik olarak çalışacak şekilde CI/CD işlem hattınıza (örn: GitHub Actions, Jenkins) entegre edin. Bu, ana kod tabanına erişilebilirlik hataları sızmasını engellemek için bir güvenlik ağı oluşturur.
Dinamik İçerik için Bekleme: Sayfanızda dinamik olarak yüklenen içerikler (API’den gelen veriler, gecikmeli bileşenler) varsa, cy.checkAccessibility() komutunu çalıştırmadan önce bu elementlerin yüklenmiş olduğundan emin olmak için Cypress’in cy.wait() veya cy.get() ile assertionlarını kullanın.
WICK-A11Y, otomatikleştirilmiş erişilebilirlik testi sürecinizi merkezileştirmek ve güçlendirmek için güçlü bir araçtır. Daha fazla bilgi ve en güncel kullanım talimatları için resmi GitHub deposunu ziyaret etmenizi önemle tavsiye ederiz.
Daha fazla bilgi için fatihsoysal.com sitesini ziyaret edebilirsiniz.
Öğrenme Yol Haritası
Yeni Başlayanlar İçin:
Temel Cypress kavramlarını öğrenin. WICK-A11Y’nin GitHub sayfasını inceleyin ve kurulum adımlarını takip ederek basit bir test oluşturun.
Orta Seviye İçin:
WICK-A11Y ile kural yapılandırmasını ve hariç tutma seçeneklerini deneyin. Test senaryolarınızı karmaşık kullanıcı akışları üzerinde çalıştırın.
İleri Seviye İçin:
Erişilebilirlik testlerinizi CI/CD işlem hattınıza entegre edin. Manuel erişilebilirlik denetimleri ile otomatik WICK-A11Y test sonuçlarınızı nasıl harmanlayacağınızı öğrenin.
Sonuç
WICK-A11Y, Cypress tabanlı projeler için güçlü ve özelleştirilebilir bir erişilebilirlik test çözümüdür. Doğru kurulum ve kullanımla, geliştirme yaşam döngünüzün erken aşamalarında erişilebilirlik hatalarını yakalayabilir, daha kapsayıcı ürünler geliştirebilir ve yasal uyumluluğu artırabilirsiniz. Unutmayın, otomatik testler manuel testlerin yerini tutmaz, ancak onları güçlü bir şekilde destekler.
Daha fazla bilgi için fatihsoysal.com sitesini ziyaret edebilirsiniz.
Sıkça Sorulan Sorular
- WICK-A11Y ücretsiz mi? Evet, WICK-A11Y açık kaynaklı ve ücretsizdir.
- WICK-A11Y ile cypress-axe arasındaki fark nedir? WICK-A11Y, `axe-core` altyapısını kullanan ancak daha farklı bir API ve kurulum süreci sunan özel bir Cypress eklentisidir. Kullanım şekli ve yapılandırma seçenekleri farklılık gösterebilir.
- Hangi tarayıcılarda çalışır? Cypress’in desteklediği tüm tarayıcılarda (Chrome, Firefox, Edge, Electron) çalışır.
- WICK-A11Y tüm erişilebilirlik sorunlarını tespit eder mi? Hayır, hiçbir otomatik araç %100 kapsama sağlayamaz. Özellikle mantık, klavye gezintisi akışı ve ekran okuyucu anlamlandırması gibi konularda manuel testler ve kullanıcı testleri şarttır.
- WICK-A11Y’nin raporları nasıl yorumlanır? Konsol çıktısı, başarısız olan her kural için ihlalin yaşandığı HTML elementini, düzeltme önerilerini ve ilgili WCAG kriterlerini gösterir. Bu çıktıyı düzeltme işlemleri için bir kılavuz olarak kullanabilirsiniz.
Yazar: Fatih Soysal