YuJa EqualGround DevAssist -laajennus hyödyntää tekoälyä, jotta voit korjata HTML-saavutettavuusongelmat suoraan VS Code -kehitysympäristössä. Näin säästät aikaa, jota muuten kuluisi jälkikäteiseen manuaaliseen korjaamiseen sen jälkeen, kun verkkosivustot ja verkkosovellukset on julkaistu. YuJa DevAssist tarkistaa koodin WCAG 2.1- ja 2.2 -standardien tasoja A, AA ja AAA vastaan täyden vaatimustenmukaisuuden varmistamiseksi.
YuJa EqualGround DevAssistin käyttöönotto
YuJa EqualGround DevAssist -laajennuksen voi ladata EqualGround-verkkosivustolta ja asentaa Visual Studio Codeen.
-
Siirry EqualGroundin sivupalkkivalikossa kohtaan Määritykset > DevAssist.
-
Napsauta vaiheessa 1 olevaa Lataa laajennus -painiketta ladataksesi EqualGroundin VS Code -laajennuksen.
- Avaa Visual Studio Code.
-
Valitse sivupalkista Laajennukset-välilehti.
-
Napsauta Lisää toimintoja -valikkoa ja valitse Asenna VSIX-tiedostosta.
-
Etsi ladattu EqualGround-laajennustiedosto ja viimeistele asennus valitsemalla Asenna.
- Aloita reaaliaikainen saavutettavuusanalyysi avaamalla mikä tahansa HTML-tiedosto.
YuJa EqualGround DevAssistin käyttäminen
YuJa EqualGround DevAssist korjaa koodivirheet ehdottamalla pikakorjauksia. Kun valitset pikakorjauksen, muutokset otetaan heti käyttöön koodissasi. Pikakorjausehdotukset tunnistaa keltaisesta hehkulampun kuvakkeesta.
- Avaa Visual Studio Code.
- Aloita reaaliaikainen saavutettavuusanalyysi avaamalla mikä tahansa HTML-tiedosto. Ongelmat merkitään suoraan koodiisi punaisella aaltoviivalla.
-
Saat lisätietoja ongelmasta ja sen merkityksestä viemällä osoittimen ongelman päälle.
- Käytä Pikakorjaus-toimintoa tehdäksesi koodiin välittömiä korjauksia. Avaa Pikakorjaus seuraavasti:
-
Käytä pikanäppäintä Ctrl +.
Huomautus: Tämä on oletuspikanäppäin; sinun näppäinmäärityksesi voi olla erilainen.
-
Vieritä ponnahdusikkunan alareunaan ja napsauta Pikakorjaus…
-
Valitse virheen sisältävä rivi ja napsauta sitten sinistä hehkulampun kuvaketta.
-
YuJa DevAssistin ratkaisemat ongelmat
Alla olevasta taulukosta näet, mitkä WCAG 2.2 -ongelmat YuJa DevAssist voi ratkaista.
| WCAG-ohje | WCAG-onnistumiskriteerin numero | Ongelma |
| 1.1 Tekstivastineet | 1.1.1 Ei-tekstuaalinen sisältö | Kuvilta, kuvakkeilta ja muilta ei-tekstuaalisilta elementeiltä puuttuu alt-teksti tai ARIA-nimiö. |
| 1.2 Aikasidonnainen media | 1.2.1 Vain ääni ja vain video (tallennettu) | Tallennetulla ääni- tai videosisällöllä ei ole tekstimuotoista vastinetta. |
| 1.2.2 1.2.2 Tekstitys (tallennettu) | Tallennetulta videolta puuttuu synkronoitu tekstitys. | |
| 1.3 Mukautuva | 1.3.1 Informaatio ja suhteet | Semanttista HTML:ää käytetään virheellisesti (esim. <div> elementin <nav> sijaan, kentät ilman nimiöitä, otsikkohierarkian tasoja ohitettu). |
| 1.3.4 Suunta | Sisältö lukittuu tiettyyn näytön suuntaan (vain pysty- tai vaakasuunta). | |
| 1.3.5 Syöttökentän tarkoituksen tunnistaminen | Lomakekentistä puuttuvat automaattisen täytön (autocomplete) attribuutit henkilötiedoille (nimi, sähköposti jne.) | |
| 1.4 Erotettavissa | 1.4.10 Sisällön uudelleenasettelu | Sisältö rikkoutuu tai ylivuotaa, kun sitä zoomataan 400 %:iin tai näkymän leveys on 320 px (heikko uudelleenasettelu). |
| 1.4.12 Tekstin välistys | Teksti leikkautuu tai menee päällekkäin, kun välistys ohitetaan (rivin korkeus, kirjainväli tai sanaväli). | |
| 2.2 Riittävästi aikaa | 2.2.1 Ajoituksen säädettävyys | Aikarajoja (istunnot, testit) ei voi poistaa käytöstä, pidentää tai säätää. |
| 2.2.2 Tauko, pysäytys, piilotus | Automaattisesti toistuvalla tai liikkuvalla sisällöllä (karusellit, animaatiot) ei ole tauko- tai pysäytyspainiketta. | |
| 2.4 Navigoitava | 2.4.2 Sivun otsikko | Sivuilta puuttuu kuvaava <title>-elementti. |
| 2.4.3 Kohdistusjärjestys | Näppäimistön kohdistusjärjestys on epälooginen eikä vastaa visuaalista asettelua. | |
| 2.4.9 Linkin tarkoitus (vain linkki) | Epämääräisillä nimiöillä, kuten ”napsauta tähän” tai ”lue lisää”, varustetut linkit ovat monitulkintaisia ilman asiayhteyttä. | |
| 2.4.10 Osioiden otsikot | Pitkiltä sisältöosioilta puuttuvat otsikot, joiden avulla käyttäjät voivat liikkua niissä. | |
| 3.1 Luettava | 3.1.1 Sivun kieli | <html>-elementistä puuttuu lang-attribuutti. |
| 3.2 Ennakoitava | 3.2.5 Muutos pyynnöstä | Syötteen yhteydessä tapahtuu odottamattomia kontekstin muutoksia (esim. sivun uudelleenohjauksia tai lomakkeiden lähetyksiä, jotka käynnistyvät ilman käyttäjän tarkoitusta). |
| 4.1 Yhteensopiva | 4.1.2 Nimi, rooli, arvo | Interaktiivisista elementeistä (painikkeet, syötekentät, mukautetut widgetit) puuttuvat apuvälineteknologioille tarkoitetut nimi-, rooli- tai arvoattribuutit. |