Tepki-axe ve eslint-plugin-jsx-a11y ile erişilebilirlik denetimi

React siteniz erişilebilir değilse aşamalı değildir. Geliştirme sırasında denetim yapmak sorunları tespit etmenize yardımcı olabilir.

Houssein Djirdeh

react-axe, şunları denetleyen bir kitaplıktır: Uygulamayla ilgili işlem yapıp erişilebilirlik sorunlarını Chrome Geliştirici Araçları'na kaydeder. konsolu. Açık kaynak axe kullanır test kitaplığını kullanabilirsiniz.

eslint-plugin-jsx-a11y Çeşitli erişilebilirlik kurallarını tanımlayan ve uygulayan bir ESLint eklentisi doğrudan JSX'inize gönderebilirsiniz. Bunu, nihai örneği test eden bir araçla birlikte kullanarak react-axe gibi oluşturulan DOM, erişilebilirliği bulup düzeltmenize yardımcı olabilir merak ediyor olabilirsiniz.

Neden yararlı?

Kullanıcı ne olursa olsun her kullanıcıya yardımcı olacak web siteleri oluşturmak engellilik veya kısıtlama gibi unsurlar olup olmadığını kontrol eder. Denetlemeyi kullanma sırasında react-axe ve eslint-plugin-jsx-a11y gibi kitaplıklar geliştirirken karşınıza çıkabilecek her türlü uygulama erişilebilirlik sorunlarını gidermenize yardımcı olur.

eslint-plugin-jsx-a11y'yi kullanma

React, JSX söz dizimi içinde erişilebilir HTML öğelerinin yazılmasını zaten destekler. Örneğin, Örneğin, bir cihazı bağlamak için for yerine htmlFor özelliğini kullanmanız gerekir. etiketini bir React bileşeni içindeki belirli bir form öğesine ekle

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

İlgili içeriği oluşturmak için kullanılan React erişilebilirlik belgeleri React'teki erişilebilirlik endişelerinin ele alınmasıyla ilgili tüm ince ayrıntıları kapsar. bir bileşenidir. Geliştirme sırasında bu sorunların tespit edilmesini kolaylaştırmak için React App (CRA), ESLint için eslint-plugin-jsx-a11y eklentisini içerir. varsayılandır.

CRA tarafından sağlanan önceden yapılandırılmış hata analizini etkinleştirmek için:

1. Kod düzenleyiciniz için uygun ESLint eklentisini yükleyin.
2. Projenize bir .eslintrc.json dosyası ekleyin

{
  "extends": "react-app"
}

Sık karşılaşılan bazı erişilebilirlik sorunları artık burada gösterilir.

Daha fazla erişilebilirlik kuralı olup olmadığını kontrol etmek için dosyayı otomatik olarak eklenti tarafından önerilen tüm kuralları dahil edin:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

Daha da katı bir kural alt kümesi istiyorsanız yüksek düzey moduna geçin:

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

Proje belgeler , önerilen ve yüksek düzeyli mod arasındaki farklar hakkında bilgi sağlar.

Tepki ekseni kullan

eslint-plugin-jsx-a11y, erişilebilirlik sorunlarını kolayca tespit etmenize yardımcı olabilir ancak nihai HTML çıkışının hiçbirini test etmez. react-axe bunu tam olarak bunu yapan bir kitaplık olup Deque Labs tarafından sunulan axe-core test aracı.

Başlamak için kitaplığı bir geliştirme bağımlılığı olarak yükleyin:

npm install --save-dev react-axe

Artık yalnızca index.js ürününde modülü başlatmanız yeterlidir:

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById('root'));
  });
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

CEVAP dinamik içe aktarma Burada, kitaplığın yalnızca üretim modunda değilken yüklenmesi için kullanılır: kök App bileşenini oluşturma ve başlatma. Bu şekilde, projenin gereksiz yere nihai üretim paketine eklenir.

Artık geliştirme sırasında uygulamayı çalıştırdığınızda sorunlar belirleniyor Chrome Geliştirici Araçları konsoluna.

Ayrıca her ihlal için bir önem düzeyi atanır. Bu düzeyler şunlardır:

• Küçük yaştaki bir şahıs
• Orta düzey
• Ciddi düzeyde
• Kritik

Sonuç

1. React ile bir site oluşturuyorsanız ve bileşenlerinizi oluştururken sorunları yakalamak için erkenden işe yarar.
2. Hata analizinize erişilebilirlik kontrolleri eklemek için eslint-plugin-jsx-a11y kullanın iş akışını takip edin. CRA zaten bu paketle birlikte gelir ancak önerilen veya katı kurallı moddur.
3. Yerel geliştirme testlerine ek olarak, react-axe uygulamasını kullanın. Dahil etme paketinize ekledik.