Erişilebilirlik İçin Lint ve CI Geçitleri

Testler kod yazıldıktan sonra çalışır, ancak bir kod denetleyicisi siz yazarken sorunları bildirir. Bir sorunu ne kadar erken yakalarsanız düzeltmek o kadar kolay olur.

React projelerinde eslint-plugin-jsx-a11y ESLint eklentisi, JSX kodunuzu yaygın erişilebilirlik hataları açısından doğrudan düzenleyicinizde denetler.

jsx-a11y; alt özelliği olmayan bir görseli, href özelliği olmayan bir bağlantıyı veya etkileşimli olmayan bir öğedeki tıklama işleyicisini yakalar.

alt özelliğini eklediğinizde uyarı kaybolur. Düzeltme küçüktür ve kod daha yayına alınmadan bunu görmüş olursunuz.

Kod denetleyicisi oluşturulmuş sayfayı değil, kaynak kodu okur. Renk karşıtlığını veya odak sırasını ölçemez; bu nedenle axe taramalarını tamamlar, onların yerini tutmaz.

CI kapısı, kod birleştirilebilmeden önce geçilmesi gereken bir kontroldür. Erişilebilirlik testiniz başarısız olursa çekme isteği doğrudan engellenir.

Bir kapı olmadan başarısız bir denetim, herkesin görmezden geldiği bir uyarıdan ibarettir. Kapı, erişilebilirliği kibar bir öneri olmaktan çıkarıp bir gereksinime dönüştürür.

Bir CI iş akışı bağımlılıkları kurar, ardından kod denetimi ve test komutlarınızı çalıştırır. Sıfır olmayan bir çıkış kodu işi otomatik olarak başarısız kılar.

Derleme kırmızı olduğunda yazar, günlükte başarısız olan kuralı ve öğeyi tam olarak görür. Geri bildirim döngüsü haftalar değil, dakikalar sürer.

Yanlış nedenlerle bozulan bir kapı devre dışı bırakılır. Testleri kararlı ve kapsamı sınırlı tutun; böylece ekip kırmızı bir derlemenin gerçek bir sorun anlamına geldiğine güvenir.

En güçlü kurulum bunları bir araya getirir: kod yazarken kod denetimi, testlerde axe ve birleştirme sırasında CI kapısı. Her katman, diğerlerinin gözden kaçırdığı şeyleri yakalar.

Kod yazarken kod denetimi yapın, testlerinizde axe çalıştırın ve CI'da birleştirmeleri kapıdan geçirin. Bu güvenlik katmanları birlikte, erişilebilirlik gerilemelerinin hiçbir zaman yayına alınmamasını sağlar. 🚦