De YuJa EqualGround DevAssist-plug-in maakt gebruik van AI om u te helpen HTML-toegankelijkheidsproblemen rechtstreeks in de VS Code-IDE op te lossen. Zo bespaart u de tijd die nodig is voor achteraf handmatig herstel nadat websites en webapps live zijn gegaan. YuJa DevAssist controleert op basis van de WCAG 2.1- en 2.2-normen, niveau A, AA en AAA, om volledige naleving te helpen waarborgen.
YuJa EqualGround DevAssist instellen
De YuJa EqualGround DevAssist-plug-in kan worden gedownload via de EqualGround-website en worden geïnstalleerd in Visual Studio Code.
-
Ga in het zijmenu van EqualGround naar Configuratie > DevAssist.
-
Klik in stap 1 op de knop Plug-in downloaden om de EqualGround VS Code-plug-in te downloaden.
- Open Visual Studio Code.
-
Selecteer in de zijbalk het tabblad Extensies .
-
Klik op het menu Meer acties en kies Installeren vanuit VSIX.
-
Zoek het gedownloade EqualGround-plug-inbestand en selecteer Installeren om de installatie te voltooien.
- Open een willekeurig HTML-bestand om de toegankelijkheidsanalyse in realtime te starten.
YuJa EqualGround DevAssist gebruiken
YuJa EqualGround DevAssist corrigeert codefouten door snelle oplossingen voor te stellen. Als u een snelle oplossing selecteert, worden de wijzigingen direct op uw code toegepast. Suggesties voor snelle oplossingen herkent u aan een pictogram met een gele gloeilamp.
- Open Visual Studio Code.
- Open een willekeurig HTML-bestand om de toegankelijkheidsanalyse in realtime te starten. Problemen worden rechtstreeks in uw code gemarkeerd met een rode golvende onderlijning.
-
Beweeg de muisaanwijzer over een probleem voor meer informatie over het probleem en waarom het van belang is.
- Gebruik Snelle oplossing om uw code direct te corrigeren. Snelle oplossing openen:
-
Gebruik de sneltoets Ctrl +.
Opmerking: Dit is de standaardsneltoets; uw toetsbinding kan afwijken.
-
Scroll naar de onderkant van de pop-up en klik op Snelle oplossing…
-
Selecteer de regel met de fout en klik vervolgens op het pictogram met de blauwe gloeilamp.
-
Problemen die YuJa DevAssist kan oplossen
Zie de onderstaande tabel voor de verschillende WCAG 2.2-problemen die YuJa DevAssist kan oplossen.
| WCAG-richtlijn | Nummer van het WCAG-succescriterium | Probleem |
| 1.1 Tekstalternatieven | 1.1.1 Niet-tekstuele content | Afbeeldingen, pictogrammen en andere niet-tekstuele elementen missen alternatieve tekst of ARIA-labels. |
| 1.2 Op tijd gebaseerde media | 1.2.1 Alleen audio en alleen video (vooraf opgenomen) | Voor de vooraf opgenomen audio/video is geen alternatief in de vorm van een teksttranscript beschikbaar. |
| 1.2.2 1.2.2 Ondertiteling (vooraf opgenomen) | De vooraf opgenomen video heeft geen gesynchroniseerde ondertiteling. | |
| 1.3 Aanpasbaar | 1.3.1 Info en relaties | Semantische HTML wordt onjuist gebruikt (bijv. <div> in plaats van <nav>, invoervelden zonder labels, overgeslagen niveaus in de kopstructuur). |
| 1.3.4 Oriëntatie | Content is vergrendeld op een specifieke schermoriëntatie (alleen staand of liggend). | |
| 1.3.5 Doel van invoer identificeren | Formuliervelden missen autocomplete-attributen voor persoonsgegevens (naam, e-mailadres, enz.) | |
| 1.4 Onderscheidbaar | 1.4.10 Reflow | Content raakt verstoord of loopt over wanneer er wordt ingezoomd tot 400% of bij een viewportbreedte van 320px (slechte reflow). |
| 1.4.12 Tekstafstand | Tekst wordt afgekapt of overlapt wanneer de afstand wordt overschreven (regelhoogte, letterafstand of woordafstand). | |
| 2.2 Voldoende tijd | 2.2.1 Timing aanpasbaar | Tijdslimieten (sessies, quizzen) kunnen niet worden uitgeschakeld, verlengd of aangepast. |
| 2.2.2 Pauzeren, stoppen, verbergen | Automatisch afspelende of bewegende content (carrousels, animaties) heeft geen bediening om te pauzeren of te stoppen. | |
| 2.4 Navigeerbaar | 2.4.2 Paginatitel | Pagina’s missen een betekenisvol <title>-element. |
| 2.4.3 Focusvolgorde | De volgorde van de toetsenbordfocus is onlogisch en komt niet overeen met de visuele indeling. | |
| 2.4.9 Linkdoel (alleen link) | Links met vage labels zoals “klik hier” of “lees meer” zijn zonder context dubbelzinnig. | |
| 2.4.10 Sectiekoppen | Lange contentsecties missen koppen waarmee gebruikers erdoorheen kunnen navigeren. | |
| 3.1 Leesbaar | 3.1.1 Taal van de pagina | Het <html>-element mist het lang-attribuut. |
| 3.2 Voorspelbaar | 3.2.5 Wijziging op verzoek | Er zijn onverwachte contextwijzigingen bij invoer (bijv. paginadoorverwijzingen of formulierverzendingen die zonder opzet van de gebruiker worden geactiveerd). |
| 4.1 Compatibel | 4.1.2 Naam, rol, waarde | Interactieve elementen (knoppen, invoervelden, aangepaste widgets) missen naam-, rol- of waardeattributen voor ondersteunende technologieën. |