Angular sitenizin herkes tarafından erişilebilir olmasını mı istiyorsunuz? Doğru yerdesiniz.
Uygulamanızı erişilebilir hale getirmek, özel ihtiyaçları olanlar da dahil olmak üzere tüm kullanıcıların uygulamayı kullanabilmesi ve içeriği anlayabilmesi anlamına gelir. Dünya Sağlık Raporu'na göre bir milyardan fazla insan (dünya nüfusunun yaklaşık% 15'i) bir çeşit engele sahip. Bu nedenle erişilebilirlik, tüm geliştirme projelerinde öncelikli bir konudur.
Bu yayında, codelyzer'ın erişilebilirlik kontrollerini Angular uygulamasının derleme sürecine nasıl ekleyeceğinizi öğreneceksiniz. Bu yaklaşım, kod yazarken erişilebilirlik hatalarını doğrudan metin düzenleyicinizde yakalamanıza olanak tanır.
Erişilemeyen öğeleri tespit etmek için Codelyzer'ı kullanma
codelyzer, TSLint üzerinde çalışan ve Angular TypeScript projelerinin bir dizi linting kuralına uyup uymadığını kontrol eden bir araçtır. Angular komut satırı arayüzü (CLI) ile oluşturulan projelerde varsayılan olarak codelyzer bulunur.
codelyzer, bir Angular uygulamasının en iyi uygulamalara uyup uymadığını kontrol etmek için 50'den fazla kurala sahiptir. Bunlardan yaklaşık 10'u erişilebilirlik ölçütlerini zorunlu kılmaya yöneliktir. Codelyzer tarafından sağlanan çeşitli erişilebilirlik kontrolleri ve bunların gerekçeleri hakkında bilgi edinmek için Codelyzer'daki yeni erişilebilirlik kuralları makalesine bakın.
Erişilebilirlik kurallarının tümü şu anda deneyseldir ve varsayılan olarak devre dışıdır. TSLint yapılandırma dosyasına (tslint.json) ekleyerek bunları etkinleştirebilirsiniz:
{
"rulesDirectory": [
"codelyzer"
],
"rules": {
...,
"template-accessibility-alt-text": true,
"template-accessibility-elements-content": true,
"template-accessibility-label-for": true,
"template-accessibility-tabindex-no-positive": true,
"template-accessibility-table-scope": true,
"template-accessibility-valid-aria": true,
"template-click-events-have-key-events": true,
"template-mouse-events-have-key-events": true,
"template-no-autofocus": true,
"template-no-distracting-elements": true
}
}
TSLint, tüm popüler metin düzenleyiciler ve IDE'lerle çalışır. VSCode ile kullanmak için TSLint eklentisini yükleyin. WebStorm'da TSLint varsayılan olarak etkindir. Diğer düzenleyiciler için TSLint README dosyasını inceleyin.
Codelyzer'ın erişilebilirlik kontrolleri ayarlandığında, kod yazarken TypeScript dosyalarındaki veya satır içi şablonlardaki erişilebilirlik hatalarını gösteren bir pop-up görürsünüz:
Tüm projede (harici şablonlar dahil) linting işlemi gerçekleştirmek için ng lint komutunu kullanın:
Codelyzer'ı tamamlama
Angular uygulamanızda erişilebilirlik uygulamalarını zorunlu kılmak için kullanabileceğiniz bir diğer araç da Lighthouse'tur. Codelyzer ve Lighthouse arasındaki temel fark, kontrollerinin ne zaman yapıldığıdır. Codelyzer, uygulamayı çalıştırmadan geliştirme sırasında statik olarak analiz eder. Bu sayede, geliştirme sırasında metin düzenleyicinizde veya terminalde doğrudan geri bildirim alabilirsiniz. Bunun aksine, Lighthouse uygulamanızı gerçekten çalıştırır ve dinamik analiz kullanarak bir dizi kontrol gerçekleştirir.
Her iki araç da geliştirme akışınızın faydalı bir parçası olabilir. Lighthouse, gerçekleştirdiği kontroller sayesinde daha iyi kapsama alanına sahiptir. Codelyzer ise metin düzenleyicinizde sürekli geri bildirim alarak daha hızlı yineleme yapmanıza olanak tanır.
Sürekli entegrasyonunuzda erişilebilirlik kontrollerini zorunlu kılma
Sürekli entegrasyon (CI) sürecinize statik erişilebilirlik kontrolleri eklemek, geliştirme akışınız için büyük bir iyileştirme olabilir. Codelyzer ile, her kod değişikliğinde (ör. her yeni çekme isteği için) ng lint komutunu çalıştırarak belirli erişilebilirlik kurallarını veya diğer uygulamaları kolayca zorunlu kılabilirsiniz.
Bu sayede, kod incelemesine geçmeden önce bile CI'nız erişilebilirlik ihlali olup olmadığını size söyleyebilir.
Sonuç
Angular uygulamanızın erişilebilirliğini artırmak için:
- Codelyzer'da deneysel erişilebilirlik kurallarını etkinleştirin.
- Angular CLI'yi kullanarak projenizin tamamında erişilebilirlik lint'i gerçekleştirin.
- Codelyzer tarafından bildirilen tüm erişilebilirlik sorunlarını düzeltin.
- Çalışma zamanında erişilebilirlik denetimleri için Lighthouse'u kullanabilirsiniz.