Angular sitenizi herkes için erişilebilir hale getirmek mi istiyorsunuz? 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ğini anlayabilmesi anlamına gelir. Dünya Sağlık Raporu'na göre bir milyardan fazla kişi (dünya nüfusunun yaklaşık% 15'i) bir çeşit engelliliğe sahip. Bu nedenle erişilebilirlik, tüm geliştirme projeleri için bir önceliktir.
Bu gönderide, codelyzer'ın erişilebilirlik kontrollerini Angular uygulaması için derleme işlemine 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 kod çözücü kullanımı
codelyzer, TSLint'in yanı sıra Angular TypeScript projelerinin bir dizi hata analizi kuralını izleyip izlemediğini kontrol eden bir araçtır. Angular komut satırı arayüzü (KSA) ile oluşturulan projeler varsayılan olarak kodlayıcı içerir.
codelyzer, bir Angular uygulamasının en iyi uygulamaları izleyip izlemediğini kontrol etmek için 50'den fazla kurala sahiptir. Erişilebilirlik ölçütlerini uygulamak için bunlardan yaklaşık 10 tanesi vardır. Kodlayıcı tarafından sağlanan çeşitli erişilebilirlik kontrolleri ve bu kontrollerin gerekçeleri hakkında bilgi edinmek için Codelyzer'da Yeni Erişilebilirlik kuralları makalesine göz atı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 entegre geliştirme ortamlarıyla çalışır. VSCode ile kullanmak için TSLint eklentisini yükleyin. WebStorm'da TSLint varsayılan olarak etkindir. Diğer düzenleyenler için README TSLint'i kontrol edin.
Codelyzer'ın erişilebilirlik kontrolleri ayarlandığında, siz kodlama yaparken TypeScript dosyalarındaki veya satır içi şablonlardaki erişilebilirlik hatalarını gösteren bir pop-up görürsünüz:
Projenin tamamında (harici şablonlar dahil) hata analizi gerçekleştirmek için ng lint komutunu kullanın:
Kod çözücü takviyesi
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 gerçekleştirildiği zamandır. Codelyzer, geliştirme zamanında uygulamayı çalıştırmadan statik olarak analiz eder. Bu sayede, geliştirme sırasında metin düzenleyicinizde veya terminalde doğrudan geri bildirim alabilirsiniz. Buna karşılık Lighthouse, uygulamanızı çalıştırır ve dinamik analizi kullanarak bir dizi kontrol gerçekleştirir.
Her iki araç da geliştirme akışınızın yararlı parçaları olabilir. Lighthouse, yaptığı kontroller sayesinde daha geniş bir kapsama sahiptir. Codelyzer ise metin düzenleyicinizde sürekli geri bildirim alarak yinelemeleri daha hızlı yapmanıza olanak tanır.
Sürekli entegrasyonunuzda erişilebilirlik kontrollerini zorunlu kılma
Sürekli entegrasyonunuza (CI) eklenen statik erişilebilirlik denetimleri, geliştirme akışınızı önemli ölçüde iyileştirebilir. Codelyzer ile her kod değişikliğinde (ör. her yeni pull isteği için) ng lint komutunu çalıştırarak belirli erişilebilirlik kurallarını veya diğer uygulamaları kolayca uygulayabilirsiniz.
Böylece, siz kod incelemesine geçmeden önce bile CI'nız herhangi bir erişilebilirlik ihlali olup olmadığını söyleyebilir.
Sonuç
Angular uygulamanızın erişilebilirliğini iyileştirmek için:
- Kodlayıcıda deneysel erişilebilirlik kurallarını etkinleştirin.
- Angular KSA'yı kullanarak projenizin tamamında erişilebilirlik analizi yapın.
- Kodlayıcı tarafından bildirilen tüm erişilebilirlik sorunlarını düzeltin.
- Çalışma zamanında erişilebilirlik denetimleri için Lighthouse'u kullanabilirsiniz.