L'Inspector d'accessibilitat executa comprovacions automatitzades de WCAG 2.1 Nivell AA a qualsevol pàgina web i genera un informe categoritzat dels problemes d'accessibilitat. Detecta ràtios de contrast de color insuficients, falta de text alternatiu en les imatges, rols i atributs ARIA inadequats, falta d'etiquetes de formulari, problemes de navegació amb el teclat i absència de regions de punts de referència (landmarks) — amb rics ressaltats d'elements per a cada problema trobat.
L'accessibilitat web no és opcional: és un requisit legal en moltes jurisdiccions i essencial per al 15% de la població mundial que viu amb alguna discapacitat. Tot i així, els problemes d'accessibilitat són invisibles durant el desenvolupament i les proves normals. Un botó pot semblar correcte però ser completament inaccessible per als lectors de pantalla perquè és un div amb estils sense l'atribut role. Un text pot ser llegible per a tu però no complir els requisits de contrast per a usuaris amb baixa visió. L'Inspector d'accessibilitat treu a la llum aquests problemes invisibles automàticament. Comprova dotzenes de criteris de WCAG 2.1 Nivell AA, incloent ràtios de contrast de color (mínim 4,5:1 per a text normal, 3:1 per a text gran), text alternatiu absent en imatges, falta d'etiquetes en entrades de formulari, rols i atributs ARIA inadequats, falta de punts de referència en el document (nav, main, footer) i indicadors de focus del teclat. Cada problema inclou l'element afectat, el criteri WCAG específic vulnerat i una recomanació sobre com solucionar-ho. Fes clic en qualsevol problema per ressaltar l'element a la pàgina.
Executa comprovacions automatitzades segons els criteris d'èxit de WCAG 2.1 Nivell AA, incloent les categories de pèrcebilitat, operabilitat, comprensibilitat i robustesa. Cada comprovació mostra el criteri específic (per exemple, 1.4.3 Contrast, 1.1.1 Contingut no textual) i l'estat de superat/fallat.
Calcula la ràtio de contrast entre el text i els colors de fons per a cada element de text de la pàgina. Marca els elements per sota de 4,5:1 per al text normal o 3:1 per al text gran (18px o més, o 14px o més en negreta). Mostra la ràtio real i el mínim requerit.
Escaneja cada element img, svg i amb el rol image. Marca els atributs alt absents, els alt buits en imatges no decoratives i el text alternatiu massa genèric ("imatge", "foto"). Suggereix si cada imatge necessita un alt descriptiu, un alt buit (per a decoració) o role="presentation".
Comprova l'ús inadequat dels rols ARIA (rols en elements equivocats), la falta d'atributs ARIA obligatoris (per exemple, aria-label en botons d'icona), els IDs duplicats referenciats per aria-labelledby i la falta de regions de punts de referència (no hi ha main, no hi ha nav). Recomana alternatives d'HTML semàntic.
Assegura que cada entrada de formulari (text, correu electrònic, contrasenya, casella de selecció, selector) tingui una etiqueta associada — ja sigui mitjançant un element label amb un for/id coincident, aria-label o aria-labelledby. Les entrades sense etiqueta són inaccessibles per als lectors de pantalla.
Els problemes es categoritzen com a Errors (s'han de corregir — barreres d'accés), Avisos (s'haurien de corregir — barreres potencials) i Passes (accessibilitat confirmada). El recompte d'errors es mostra de manera destacada. Fes clic en qualsevol problema per ressaltar l'element afectat a la pàgina.
Abans de llançar una pàgina o funció nova, executa l'Inspector d'accessibilitat per detectar problemes d'entrada. La falta de text alternatiu, els camps de formulari sense etiqueta i les violacions de contrast són fàcils de corregir durant el desenvolupament però costosos de descobrir en producció.
Moltes jurisdiccions requereixen el compliment de WCAG 2.1 Nivell AA (ADA als EUA, EAA a la UE). Executa l'inspector a les teves pàgines públiques per identificar mancances de compliment amb les que encara no t'has compromès.
Inclou la comprovació de l'accessibilitat com a part del teu procés de qualitat. Després de les proves visuals i funcionals, executa l'Inspector d'accessibilitat per verificar que la implementació no introdueix regressions d'accessibilitat.
Executa l'inspector al teu lloc actual durant una reunió d'equip per mostrar problemes d'accessibilitat reals. Els ressaltats visuals i les explicacions clares ajuden els desenvolupadors a entendre com és un marcatge accessible i per què és important.
Audita pàgines que incloguin ginys (widgets) de tercers, contingut incrustat o HTML generat per l'usuari. Aquestes fonts sovint introdueixen problemes d'accessibilitat (falta de text alternatiu, violacions de contrast) dels quals encara ets responsable com a propietari de la pàgina.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona de l'Inspector d'accessibilitat. L'eina escaneja el DOM de la pàgina a la recerca de problemes d'accessibilitat.
Apareix un informe categoritzat amb els Errors (vermell), Avisos (groc) i Passes (verd). Cada secció llista els problemes específics amb l'element afectat i les referències als criteris WCAG.
Clica en qualsevol problema per ressaltar l'element afectat a la pàgina amb una vora de color i arribar-hi per desplaçament. La connexió entre l'informe i l'element del DOM és immediata.
Cada problema inclou una recomanació específica: "Afegeix un text alternatiu que descrigui el contingut de la imatge", "Augmenta el contrast de color del text a un mínim de 4,5:1", "Afegeix un element label amb for='email'".
Fes canvis al teu codi, recarrega la pàgina i torna a executar l'auditoria. El recompte d'errors hauria de disminuir a mesura que es resolguin els problemes. L'objectiu és tenir zero errors.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
