Lintowanie i bramki CI dla dostępności
Wykrywaj problemy, zanim trafią do przeglądu.
Lintowanie i bramki CI dla dostępności to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Wykrywaj problemy jeszcze wcześniej
Testy uruchamiają się po napisaniu kodu, ale linter sygnalizuje problemy już podczas pisania. Im wcześniej wykryjesz problem, tym taniej można go naprawić.
Poznaj jsx-a11y
W projektach React wtyczka eslint-plugin-jsx-a11y dla ESLint sprawdza kod JSX pod kątem typowych błędów dostępności bezpośrednio w edytorze.
npm install --save-dev eslint-plugin-jsx-a11yCo wykrywa linter
jsx-a11y wykrywa między innymi obraz bez właściwości alt, kotwicę bez href oraz obsługę kliknięcia przypisaną do elementu nieinteraktywnego.
<img src="logo.png" />Ostrzeżenie lintera w praktyce
Dodaj właściwość alt, a ostrzeżenie zniknie. Naprawa jest niewielka, a problem został zauważony, zanim kod trafił do użytkowników.
<img src="logo.png" alt="Company logo" />Linting także ma ograniczenia
Linter analizuje kod źródłowy, a nie wyrenderowaną stronę. Nie potrafi zmierzyć kontrastu ani kolejności fokusu, dlatego uzupełnia skanowanie za pomocą axe, ale go nie zastępuje.
Czym jest bramka CI
Bramka CI to kontrola, która musi zakończyć się powodzeniem, zanim kod będzie można scalić. Jeśli test dostępności zakończy się niepowodzeniem, żądanie pull request zostanie po prostu zablokowane.
Dlaczego bramki mają znaczenie
Bez bramki nieudany audyt jest tylko ostrzeżeniem, które wszyscy ignorują. Bramka zmienia dostępność w wymaganie, a nie uprzejmą sugestię.
Uruchamianie w GitHub Actions
Przepływ pracy CI instaluje zależności, a następnie uruchamia polecenia lintowania i testowania. Niezerowy kod wyjścia automatycznie kończy zadanie niepowodzeniem.
- run: npm run lint
- run: npx playwright testSzybkie wykrywanie, szybkie naprawianie
Gdy proces budowania kończy się niepowodzeniem, autor widzi w dzienniku dokładną regułę i element, które spowodowały błąd. Pętla informacji zwrotnej trwa minuty, a nie tygodnie.
Uważaj na niestabilną bramkę
Bramka, która przerywa proces z niewłaściwych powodów, zostanie wyłączona. Testy powinny być stabilne i mieć odpowiednio określony zakres, aby zespół ufał, że czerwony wynik oznacza rzeczywisty problem.
Wielowarstwowa ochrona
Najskuteczniejsza konfiguracja łączy wszystkie elementy: lintowanie podczas pisania kodu, axe w testach i bramkę CI przy scalaniu. Każda warstwa wykrywa problemy, których nie zauważają pozostałe.
Szybkie sprawdzenie
Zastanów się, co linter kodu może, a czego nie może wykryć.
Podsumowanie: a11y nie podlega negocjacjom
Lintuj podczas pisania kodu, uruchamiaj axe w testach i zabezpieczaj scalanie za pomocą CI. Razem te mechanizmy ochronne nie dopuszczają do wdrożenia regresji dostępności. 🚦
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Lintowanie i bramki CI dla dostępności” jest bezpłatna?
Tak — pełny tekst „Lintowanie i bramki CI dla dostępności” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Lintowanie i bramki CI dla dostępności”?
Wykrywaj problemy, zanim trafią do przeglądu. Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Lintowanie i bramki CI dla dostępności”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Co automatyzacja może wykryć, a czego nie
- Skanowanie za pomocą axe DevTools i Lighthouse
- Podłączanie axe-core do testów Playwright
- Lintowanie i bramki CI dla dostępności