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: