Linting og CI-sperrer for tilgjengelighet
Stopp problemer før de når kodegjennomgangen.
Linting og CI-sperrer for tilgjengelighet er en gratis leksjon i Web Accessibility Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Web Accessibility Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
Oppdag problemer enda tidligere
Tester kjøres etter at koden er skrevet, men en linter markerer problemer mens De skriver. Jo tidligere De oppdager et problem, desto billigere er det å rette.
Bli kjent med jsx-a11y
I React-prosjekter kontrollerer ESLint-pluginen eslint-plugin-jsx-a11y JSX-koden for vanlige tilgjengelighetsfeil direkte i redigeringsprogrammet.
npm install --save-dev eslint-plugin-jsx-a11yDette oppdager linteren
jsx-a11y oppdager blant annet et image uten alt-prop, en ankerlenke uten href eller en klikkbehandler på et ikke-interaktivt element.
<img src="logo.png" />En linteradvarsel i praksis
Legg til alt-prop-en, så forsvinner advarselen. Løsningen er liten, og De oppdaget den før koden i det hele tatt ble levert.
<img src="logo.png" alt="Company logo" />Linting har også begrensninger
En linter leser kildekode, ikke den gjengitte siden. Den kan ikke måle kontrast eller fokusrekkefølge, så den supplerer axe-skanninger, men erstatter dem ikke.
Hva er en CI-portvakt
En CI-portvakt er en kontroll som må bestås før kode kan flettes inn. Hvis tilgjengelighetstesten mislykkes, blir pull-forespørselen ganske enkelt blokkert.
Hvorfor porter er viktige
Uten en portvakt er en mislykket revisjon bare en advarsel alle ignorerer. En portvakt gjør tilgjengelighet til et krav, ikke et høflig forslag.
Kjør den i GitHub Actions
En CI-arbeidsflyt installerer avhengigheter og kjører deretter lint- og testkommandoene Deres. En avslutningskode som ikke er null, får jobben til å mislykkes automatisk.
- run: npm run lint
- run: npx playwright testFeil raskt, rett raskt
Når byggeprosessen blir rød, ser utvikleren nøyaktig hvilken regel og hvilket element som mislyktes, i loggen. Tilbakemeldingssløyfen tar minutter, ikke uker.
Vær oppmerksom på ustabile porter
En portvakt som bryter sammen av feil grunner, blir deaktivert. Hold testene stabile og avgrensede, slik at teamet stoler på at et rødt bygg betyr et reelt problem.
Bygg opp flere forsvarslag
Det sterkeste oppsettet kombinerer dem: lint mens De koder, axe i testene og en CI-portvakt ved fletting. Hvert lag oppdager det de andre overser.
Rask sjekk
Tenk over hva en kodelinter kan og ikke kan se.
Oppsummering: Gjør a11y ufravikelig
Kjør lint mens De koder, kjør axe i testene, og bruk en portvakt for flettinger i CI. Sammen sørger disse sikkerhetsnettene for at tilgjengelighetsregresjoner aldri blir levert. 🚦
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Linting og CI-sperrer for tilgjengelighet» gratis?
Ja – hele teksten i «Linting og CI-sperrer for tilgjengelighet» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Web Accessibility Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Linting og CI-sperrer for tilgjengelighet»?
Stopp problemer før de når kodegjennomgangen. Du øver på Web Accessibility Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Web Accessibility Academy?
Ingen tidligere erfaring er nødvendig. Web Accessibility Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Linting og CI-sperrer for tilgjengelighet»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Web Accessibility Academy-leksjonen?
Ja. Alle Web Accessibility Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Hva automatisering kan og ikke kan fange opp
- Skanning med axe DevTools og Lighthouse
- Koble axe-core inn i Playwright-tester
- Linting og CI-sperrer for tilgjengelighet