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, bir React uygulamasını denetleyen ve erişilebilirlik sorunlarını Chrome Geliştirici Araçları konsoluna kaydeden bir kitaplıktır. Sorunları ve önem derecelerini işaretlemek için açık kaynak axe test kitaplığını kullanır.

eslint-plugin-jsx-a11y, bir dizi erişilebilirlik kuralını doğrudan JSX'inizde tanımlayan ve zorunlu kılan bir ESLint eklentisidir. Bunu, nihai oluşturulan DOM'yi (react-axe gibi) test eden bir araçla birlikte kullanmak, sitenizdeki erişilebilirlik sorunlarını bulmanıza ve düzeltmenize yardımcı olabilir.

Neden faydalı oldu?

Sorunları veya kısıtlamaları ne olursa olsun her kullanıcının içeriğine erişebilmesini sağlayan web siteleri oluşturmak çok önemlidir. React uygulamanız geliştirilirken react-axe ve eslint-plugin-jsx-a11y gibi denetleme kitaplıklarının kullanılması, ortaya çıktıkları anda erişilebilirlik sorunlarını otomatik olarak gösterir.

eslint-plugin-jsx-a11y'yi kullanma

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

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

React erişilebilirlik belgeleri, bir React bileşenindeki erişilebilirlik sorunlarını ele almayla ilgili tüm nüansları kapsar. Create React App (CRA), geliştirme sırasında bu sorunların tespit edilmesini kolaylaştırmak için varsayılan olarak ESLint için eslint-plugin-jsx-a11y eklentisini içerir.

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 gösterilmektedir.

Lint aracını kullanarak resim erişilebilirlik uyarısı

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

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

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

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

Linter&#39;da etiket erişilebilirlik hatası

Proje belgeleri, önerilen ve yüksek düzey modu arasındaki farklar hakkında bilgi sağlar.

Tepki aleti kullanma

eslint-plugin-jsx-a11y, JSX'inizdeki erişilebilirlik sorunlarını kolayca tespit etmenize yardımcı olabilir ancak nihai HTML çıktılarının hiçbirini test etmez. react-axe, Deque Labs'in axe-core test aracının etrafına bir React sarmalayıcı sağlayarak tam olarak bunu yapan bir kitaplıktır.

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

npm install --save-dev react-axe

Şu anda yalnızca index.js ürününde modülü başlatmanız gerekir:

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'));
}

Burada dinamik içe aktarma işlemi, kitaplığı yalnızca kök App bileşeni oluşturulmadan ve önyüklemeden önce üretim modunda değilken yüklemek için kullanılır. Böylece nihai üretim paketine gereksiz yere dahil edilmez.

Artık, geliştirme sırasında uygulamayı çalıştırdığınızda sorunlar doğrudan Chrome Geliştirici Araçları konsolunda görünür.

Chrome Geliştirici Araçları&#39;nda Tepki Axe

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

  • Hafif
  • Orta düzey
  • Ciddi
  • Kritik

Sonuç

  1. React ile bir site oluşturuyorsanız bileşenlerinizi derlerken sorunları tespit etmek için erişilebilirlik denetimini iş akışınıza erkenden dahil edin.
  2. Lintleme iş akışınıza erişilebilirlik kontrolleri eklemek için eslint-plugin-jsx-a11y kullanın. CRA zaten buna dahildir, ancak önerilen moda veya yüksek düzey moduna geçin.
  3. Yerel geliştirme testlerine ek olarak, nihai oluşturulan DOM'de herhangi bir sorunu tespit etmek için uygulamanıza react-axe ekleyin. Bunları üretim paketinize eklemeyin.