Saavutettavuuden lintaus ja CI-portit
Pysäyttäkää ongelmat ennen katselmointiin päätymistä.
Saavutettavuuden lintaus ja CI-portit on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Web Accessibility Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Havaitkaa ongelmat vielä aikaisemmin
Testit suoritetaan koodin kirjoittamisen jälkeen, mutta linter ilmoittaa ongelmista jo kirjoittamisen aikana. Mitä aikaisemmin havaitsette ongelman, sitä edullisempaa sen korjaaminen on.
Tutustukaa jsx-a11yyn
React-projekteissa eslint-plugin-jsx-a11y-ESLint-laajennus tarkistaa JSX-koodista yleiset saavutettavuusvirheet suoraan editorissa.
npm install --save-dev eslint-plugin-jsx-a11yMitä linter havaitsee
jsx-a11y havaitsee esimerkiksi kuvan, jolta puuttuu alt-ominaisuus, href-ominaisuudettoman ankkurin tai napsautuskäsittelijän epäinteraktiivisesta elementistä.
<img src="logo.png" />Linter-varoitus käytännössä
Lisätkää alt-ominaisuus, niin varoitus katoaa. Korjaus on pieni, ja havaitsitte sen ennen kuin koodi ehti koskaan päätyä julkaisuun.
<img src="logo.png" alt="Company logo" />Myös lintauksella on rajoituksensa
Linter lukee lähdekoodia, ei renderöityä sivua. Se ei voi mitata kontrastia tai kohdistusjärjestystä, joten se täydentää axe-tarkistuksia mutta ei korvaa niitä.
Mikä on CI-portti
CI-portti on tarkistus, jonka on läpäistävä ennen kuin koodi voidaan yhdistää. Jos saavutettavuustesti epäonnistuu, pull request estetään.
Miksi portit ovat tärkeitä
Ilman porttia epäonnistunut auditointi on vain varoitus, jonka kaikki jättävät huomiotta. Portti tekee saavutettavuudesta vaatimuksen, ei kohteliasta ehdotusta.
Suorittakaa testi GitHub Actionsissa
CI-työnkulku asentaa riippuvuudet ja suorittaa sitten lintaus- ja testikomennot. Nollasta poikkeava palautuskoodi epäonnistuttaa työn automaattisesti.
- run: npm run lint
- run: npx playwright testEpäonnistukaa nopeasti, korjatkaa nopeasti
Kun koontiversio muuttuu punaiseksi, tekijä näkee lokista täsmälleen epäonnistuneen säännön ja elementin. Palautesykli kestää minuutteja, ei viikkoja.
Varokaa epävakaata porttia
Vääristä syistä rikkoutuva portti poistetaan käytöstä. Pitäkää testit vakaina ja rajattuina, jotta tiimi luottaa punaisen koontiversion tarkoittavan todellista ongelmaa.
Rakentakaa suojakerroksia
Vahvimmassa ratkaisussa ne yhdistetään: lintaus koodatessa, axe testeissä ja CI-portti yhdistettäessä. Jokainen kerros havaitsee sen, mitä muut eivät havaitse.
Pikatarkistus
Miettikää, mitä koodilinter voi ja mitä se ei voi nähdä.
Kertaus: tehkää a11y:stä tinkimätön vaatimus
Lintatkaa koodatessa, suorittakaa axe testeissä ja asettakaa yhdistämisille portti CI:ssä. Yhdessä nämä suojakaiteet estävät saavutettavuusregressioiden päätymisen julkaisuun. 🚦
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Saavutettavuuden lintaus ja CI-portit” ilmainen?
Kyllä – oppitunnin ”Saavutettavuuden lintaus ja CI-portit” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Web Accessibility Academy-kurssin, päivitä CoddyKit PROhon. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Saavutettavuuden lintaus ja CI-portit”?
Pysäyttäkää ongelmat ennen katselmointiin päätymistä. Harjoittelet Web Accessibility Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Web Accessibility Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Web Accessibility Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Saavutettavuuden lintaus ja CI-portit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Web Accessibility Academy-oppitunnilla?
Kyllä. Jokainen Web Accessibility Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Mitä automaatio voi ja ei voi havaita
- Skannaus axe DevToolsilla ja Lighthousella
- axe-coren liittäminen Playwright-testeihin
- Saavutettavuuden lintaus ja CI-portit