Kodlayıcı ile Angular uygulamanızın erişilebilirliğini denetleyin

Angular sitenizi herkes için erişilebilir hale getirmek mi istiyorsunuz? Doğru yerdesiniz.

Minko Gechev

Zama Khan Mohammed

Uygulamanızı erişilebilir hale getirmek, özel ihtiyaçları olan kullanıcılar da dahil olmak üzere tüm kullanıcıların uygulamanızı kullanabilmesi ve içeriği 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 öncelikli bir konudur.

Bu gönderide, codelyzer uygulamasının erişilebilirlik kontrollerini Angular uygulaması için derleme işlemine nasıl ekleyeceğinizi öğreneceksiniz. Bu yaklaşım sayesinde, kod yazarken erişilebilirlik hatalarını doğrudan metin düzenleyicinizde yakalayabilirsiniz.

Erişilemeyen öğeleri tespit etmek için Codelyzer'ı kullanma

codelyzer, TSLint'in üzerine yerleştirilmiş ve Angular TypeScript projelerinin bir dizi linting kuralına uyup uymadığını kontrol eden bir araçtır. Angular komut satırı arayüzü (KSA) ile oluşturulan projeler varsayılan olarak codelyzer'ı içerir.

codelyzer, bir Angular uygulamasının en iyi uygulamalara uyup uymadığını kontrol etmek için 50'den fazla kurala sahiptir. Bu kurallardan yaklaşık 10 tanesi erişilebilirlik ölçütlerini zorunlu kılmak içindir. 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.

Şu anda tüm erişilebilirlik kuralları deneyseldir ve varsayılan olarak devre dışıdır. Bu kuralları 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ü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:

Form öğesi etiketleme hatasını gösteren bir Codelyzer pop-up'ı.

Projenin tamamında (harici şablonlar dahil) linting yapmak için ng lint komutunu kullanın:

Codelyzer'ı destekleme

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, uygulamayı geliştirme sırasında ç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ı 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 yararlı parçaları olabilir. Lighthouse, yaptığı kontroller sayesinde daha iyi kapsama sahiptir. Codelyzer ise metin düzenleyicinizde sürekli geri bildirim alarak daha hızlı iterasyon yapmanıza olanak tanır.

Sürekli entegrasyonunuzda erişilebilirlik kontrollerini zorunlu kılma

Sürekli entegrasyonunuza (CI) statik erişilebilirlik kontrolleri eklemek, geliştirme akışınız için mükemmel bir geliştirme olabilir. Codelyzer ile her kod değişikliğinde (örneğin, her yeni çekme isteği için) ng lint'ü çalıştırarak belirli erişilebilirlik kurallarını veya diğer uygulamaları kolayca uygulayabilirsiniz.

Bu sayede, kod incelemesine geçmeden önce bile CI'niz erişilebilirlik ihlali olup olmadığını size bildirebilir.

Sonuç

Angular uygulamanızın erişilebilirliğini iyileştirmek için:

1. Codelyzer'da deneysel erişilebilirlik kurallarını etkinleştirin.
2. Angular CLI'yi kullanarak projenizin tamamında erişilebilirlik lint'i gerçekleştirin.
3. Kodlayıcı tarafından bildirilen tüm erişilebilirlik sorunlarını düzeltin.
4. Çalışma zamanında erişilebilirlik denetimleri için Lighthouse'u kullanmayı düşünün.