React siteniz erişilebilir değilse aşamalı değildir. Geliştirme sırasında denetim yapmak, sorunları tespit etmenize yardımcı olabilir.
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:
- Kod düzenleyiciniz için uygun ESLint eklentisini yükleyin
- Projenize bir
.eslintrc.json
dosyası ekleyin
{
"extends": "react-app"
}
Sık karşılaşılan bazı erişilebilirlik sorunları artık gösterilmektedir.
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"]
}
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.
Ayrıca her ihlal için bir önem düzeyi atanır. Bu düzeyler şunlardır:
- Hafif
- Orta düzey
- Ciddi
- Kritik
Sonuç
- 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.
- 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. - 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.