Accessibility Inspector voert geautomatiseerde WCAG 2.1 Level AA-controles uit op elke webpagina en produceert een gecategoriseerd rapport van toegankelijkheidsproblemen. Detecteer onvoldoende kleurcontrastverhouding, ontbrekende afbeeldingsalttekst, onjuiste ARIA-rollen en -attributen, ontbrekende formuieerlabels, toetsenbordnavigatieproblemen en ontbrekende landmarkgebieden — met eenklik-elementmarkeringen voor elk gevonden probleem.
Webtoegang is niet optioneel — het is een wettelijke vereiste in veel rechtsgebieden en essentieel voor de 15% van de wereldbevolking met een handicap. Toch zijn toegankelijkheidsproblemen onzichtbaar tijdens normale ontwikkeling en testen. Een knop ziet er misschien goed uit, maar is volledig ontoegankelijk voor schermlezerssoftware omdat het een gestijlde div zonder rolattribuut is. De tekst kan voor u leesbaar zijn, maar kan niet aan contrastervereisten voldoen voor gebruikers met verminderd zicht. Accessibility Inspector brengt deze onzichtbare problemen automatisch aan het licht. Het controleert tientallen WCAG 2.1 Level AA-criteria, inclusief kleurcontrastverhouding (minimaal 4,5:1 voor normale tekst, 3:1 voor grote tekst), ontbrekende alttekst op afbeeldingen, ontbrekende labels op formuierinvoeren, onjuiste ARIA-rollen en -attributen, ontbrekende documentlandmarken (nav, main, footer) en toetsenbordenfocusindicatoren. Elk probleem bevat het betrokken element, het specifieke WCAG-criterium dat is geschonden en een aanbeveling voor het repareren ervan. Klik op een willekeurig probleem om het element op de pagina te markeren.
Voert geautomatiseerde controles uit tegen WCAG 2.1 Level AA-succescriteria, inclusief perceivability, operability, understandability en robustness-categorieën. Elke controle toont het specifieke criterium (bijvoorbeeld 1.4.3 Contrast, 1.1.1 Non-text Content) en slaag-/faalsatus.
Berekent de contrastverhouding tussen tekst- en achtergrondkleuren voor elk tekstelement op de pagina. Markeert elementen onder 4,5:1 voor normale tekst of 3:1 voor grote tekst (18px+ of 14px+ vet). Toont de werkelijke verhouding en het minimum vereiste.
Scant elk img-, svg- en afbeeldingsrolelement. Markeert ontbrekende altattributen, lege alt op niet-decoratieve afbeeldingen en te generieke alttekst ("afbeelding", "foto"). Suggereert of elk afbeelding beschrijvende alt, lege alt (decoratief) of rol="presentation" nodig heeft.
Controleert op onjuist ARIA-rolgebruik (rollen op verkeerde elementen), ontbrekende vereiste ARIA-attributen (bijvoorbeeld aria-label op pictogramknoppen), dubbele ID's waarnaar aria-labelledby verwijst, en ontbrekende landmarkgebieden (geen main, geen nav). Beveelt semantische HTML-alternatieven aan.
Zorgt ervoor dat elk formuierinvoer (tekst, e-mail, wachtwoord, selectievakje, selecteer) een bijbehorend label heeft — via een labelelement met overeenkomende for/id, aria-label of aria-labelledby. Gelabelde invoeren zijn ontoegankelijk voor schermlezerssoftware.
Problemen zijn ingedeeld als Fouten (moeten repareren — barrières voor toegang), Waarschuwingen (moeten repareren — potentiële barrières) en Passes (bevestigd toegankelijk). Foutentelling wordt prominent weergegeven. Klik op een willekeurig probleem om het betrokken element op de pagina te markeren.
Voordat u een nieuwe pagina of functie start, voert u de Accessibility Inspector uit om problemen vroeg op te vangen. Ontbrekende alttekst, gelabelde formuliervelden en contrastschendingen zijn gemakkelijk tijdens ontwikkeling aan te passen, maar duur om in productie te ontdekken.
Veel rechtsgebieden vereisen WCAG 2.1 Level AA-compliance (ADA in de VS, EAA in de EU). Voer de inspector uit op uw openbare pagina's om nalevingsgaten te identificeren voordat zij juridische risico's worden.
Neem toegankelijkheidscontrole op als onderdeel van uw QA-proces. Na visueel QA en functioneel testen, voert u de Accessibility Inspector uit om te verifiëren dat de implementatie geen toegankelijkheidsregressies introduceert.
Voer de inspector uit op uw huidige site tijdens een teamvergadering om echte toegankelijkheidsproblemen aan te tonen. De visuele markeringen en duidelijke uitleg helpen ontwikkelaars begrijpen hoe toegankelijke markup eruitziet en waarom het belangrijk is.
Controleer pagina's met widgets van derden, ingesloten inhoud of door gebruikers gegenereerde HTML. Deze bronnen introduceren vaak toegankelijkheidsproblemen (ontbrekende alttekst, contrastschendingen) waarvoor u als pagina-eigenaar nog steeds verantwoordelijk bent.
Open het floating dock van DevSuite Pro en klik op het Accessibility Inspector-pictogram. Het gereedschap scant de pagina-DOM op toegankelijkheidsproblemen.
Er verschijnt een gecategoriseerd rapport met Fouten (rood), Waarschuwingen (geel) en Passes (groen). Elke sectie geeft specifieke problemen met betrokken elementen en WCAG-criteria referenties.
Klik op een willekeurig probleem om het betrokken element op de pagina met een gekleurde rand te markeren en ernaar te scrollen. De verbinding tussen het rapport en het DOM-element is onmiddellijk.
Elk probleem bevat een specifieke aanbeveling: "Voeg alttekst toe met beschrijving van de afbeeldingsinhoud", "Verhoog tekenkleurcontrast naar minstens 4,5:1", "Voeg een labelelement met for='email' toe".
Breng wijzigingen aan in uw code, herlaad de pagina en voer de audit opnieuw uit. Het foutentelling moet afnemen naarmate problemen worden opgelost. Streef naar nul fouten.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
