Angular sitenizi herkes için erişilebilir hale getirmek ister misiniz? Doğru yer burası!
Uygulamanızı erişilebilir hale getirmek, özel ihtiyaçları olanlar da dahil olmak üzere tüm kullanıcıların uygulamanızı kullanabilmesi ve içeriği anlayabilmesi demektir. Dünya Sağlık Raporu'na göre bir milyardan fazla insan (dünya nüfusunun yaklaşık% 15'i) bir şekilde engellidir. Bu nedenle, erişilebilirlik tüm geliştirme projelerinde bir önceliktir.
Bu yayında, Angular uygulamasının derleme işlemine codelyzer erişilebilirlik denetimlerini nasıl ekleyeceğinizi öğreneceksiniz. Bu yaklaşım, kod yazarken erişilebilirlik hatalarını doğrudan metin düzenleyicinizde yakalamanızı sağlar.
Erişilemeyen öğeleri algılamak için codelyzer'ı kullanma
codelyzer, TSLint'in üzerinde yer alan ve Angular TypeScript projelerinin bir dizi hata analizi kuralı uygulayıp uygulamadığını kontrol eden bir araçtır. Angular komut satırı arayüzü (KSA) ile ayarlanan projelerde varsayılan olarak codelyzer bulunur.
codelyzer'da, bir Angular uygulamasının en iyi uygulamalara uygun olup olmadığını kontrol etmek için 50'den fazla kural bulunur. Bunlardan yaklaşık 10 tane erişilebilirlik ölçütü uygulama kuralı vardır. Codelyzer tarafından sağlanan çeşitli erişilebilirlik denetimleri ve bunların gerekçeleri hakkında bilgi edinmek için Codelyzer'da Yeni Erişilebilirlik Kuralları makalesine bakın.
Şu anda tüm erişilebilirlik kuralları deneyseldir ve varsayılan olarak devre dışıdır. Bunları TSLint yapılandırma dosyasına (tslint.json) ekleyerek 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. Bu kodu VSCode ile kullanmak için TSLint eklentisini yükleyin. WebStorm'da TSLint varsayılan olarak etkindir. Diğer düzenleyiciler için TSLint BENİOKU özelliğini kontrol edin.
Codelyzer'ın erişilebilirlik denetimleri ayarlandığında, siz kodlama yaparken TypeScript dosyalarındaki veya satır içi şablonlardaki erişilebilirlik hatalarını gösteren bir pop-up alırsınız:
Projenin tamamında (harici şablonlar dahil) hata analizi gerçekleştirmek için ng lint komutunu kullanın:
Kodlayıcıya takviye
Lighthouse, Angular uygulamanızda erişilebilirlik uygulamalarını zorunlu kılmak için kullanabileceğiniz başka bir araçtır. Codelyzer ile Lighthouse arasındaki temel fark, kontrollerin ne zaman yapıldığıdır. Codelyzer, geliştirme zamanında uygulamayı çalıştırmadan, statik olarak analiz eder. Bu sayede, geliştirme sırasında metin düzenleyicinizden veya terminalden doğrudan geri bildirim alabilirsiniz. Buna karşılık, Lighthouse, uygulamanızı ç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ı parçaları olabilir. Lighthouse, yaptığı kontrollerle daha iyi kapsama sahipken codelyzer, metin düzenleyicinizden sürekli geri bildirim alarak daha hızlı iterasyon yapmanızı sağlar.
Sürekli entegrasyonunuzda erişilebilirlik kontrollerini zorunlu kılma
Sürekli entegrasyonunuza (CI) statik erişilebilirlik denetimleri eklemek, geliştirme akışınız için harika bir gelişme olabilir. Codelyzer ile her kod değişikliğinde (örneğin her yeni pull 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ı söyleyebilir.
Sonuç
Angular uygulamanızın erişilebilirliğini iyileştirmek için:
- Codelyzer'da deneysel erişilebilirlik kurallarını etkinleştirin.
- Angular KSA'yı kullanarak projenizin tamamında erişilebilirlik satırlarına alma işlemi 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 kullanmayı düşünün.