Siirry pääsisältöön
Niquelao Web-saavutettavuus ja front-end-kehitys: WCAG-standardit, saavutettavat widgetit ja Firefox-laajennukset selitettynä käytännön koodiesimerkeillä.

Osa tämän sivuston linkeistä on kumppanuuslinkkejä: ostamalla niiden kautta voimme ansaita komission ilman lisäkustannuksia sinulle. Tämä ei vaikuta suosituksiimme. Lue lisää kumppanuusilmoituksestamme. Kumppanuusilmoitus.

Accesibilidad AA Web: Comparativa de Herramientas 2026

AA-taso koostuu 50 kriteeristä (30 A-tason + 20 AA-tason); se on useimpien lainsäädäntöjen, mukaan lukien eurooppalaisen EN 301 549:n, vaatima saavutettavuuden kynnys.

  • Mikään työkalu ei yksinään havaitse kaikkia virheitä: automaattiset tarkastajat kattavat noin kolmasosan kriteereistä, joten manuaalinen tarkistus ja näytönlukijatestit ovat välttämättömiä.
  • La elección depende del flujo de trabajo: selainlaajennukset päivittäiseen kehitykseen, CI-integroidut paketit tiimeille ja ulkoiset auditoinnit virallisia sertifiointeja varten.
  • Tarvitset neljäntyyppisiä työkaluja: automaattisia tarkastajia, kontrastitarkistimia, näytönlukijoita ja rakenne-/HTML-validaattoreita.
  • Documentar cada decisión de accesibilidad (qué se probó, con qué versión y en qué navegador) on yhtä tärkeää kuin corregir el fallo para demostrar conformidad.

Mitä “AA” todellisuudessa tarkoittaa verkkosaavutettavuudessa

WCAG-taso AA on toinen kolmesta W3C:n määrittelemästä vaatimustenmukaisuustasosta (A, AA ja AAA). Jokainen taso yhdistää edellisen tason kriteerit: AA-vaatimustenmukaisuuden vakuuttamiseksi sinun on täytettävä 30-tason A-kriteerit ja 20-tason AA-kriteerit, jotka vastaavat 50:tä menestyskriteeriä. AAA-taso lisää 28 ja on harvinaista, että sitä vaaditaan täysimääräisesti, koska tiettyjä kriteerejä ei voida täyttää kaikessa sisällössä.

Käytännön ero A- ja AA-tasojen välillä on merkittävä. A-taso kattaa olennaiset asiat (vaihtoehtoiset tekstit, semanttinen rakenne, näppäimistönavigointi). AA-taso lisää suunnitteluun ja väreihin liittyviä vaatimuksia: vähimmäiskontrasti 4,5:1 normaalille tekstille ja 3:1 suurelle tekstille, tekstin skaalaus 200 %:iin ilman sisällön menetystä, tekstitykset tallennetuille videoille sekä otsikot ja tunnisteet, jotka kuvaavat kunkin kentän tarkoituksen.

Nämä kriteerit rikkoutuvat usein vanhoilla XHTML- ja CSS-sivustoilla, joissa värit ja koot on määritetty absoluuttisina pikseleinä.

La normativa que conviene citar es W3C:n virallinen WCAG 2.2 -määritys, joka sisältää täydellisen luettelon kriteereistä sekä riittävistä ja suositelluista tekniikoista. Euroopan unionissa standardi EN 301 549 harmonisoi nämä vaatimukset julkisiin hankintoihin ja Web-saavutettavuusdirektiiviin, kun taas Yhdysvalloissa vastaava viite on Section 508 ja ADA. Markkinoiden oikeudellisen kehyksen tunteminen on tärkeää: esimerkiksi monilla julkisilla asiakkailla vaaditaan nimenomaista AA-vaatimustenmukaisuutta hankintaehdoissa.

Neljä tarvittavaa työkalutyyppiä

Mikään työkalukategoria ei kata koko WCAG-kirjoa. Ammattimainen työnkulku yhdistää neljä tyyppiä, joista jokainen vastaa eri kysymyksiin.

Aiheeseen liittyvä: — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Auditores automatizados. Escanean el DOM y el CSS en busca de patrones de fallo conocidos: imágenes sin alt, campos sin etiqueta, kontraste insuficiente, encabezados saltados, attributos ARIA mal usados. Son rápidos y detectan errores repetitivos, pero su cobertura es parcial: los propios fabricantes reconocen que no pueden evaluar criterios que dependen del significado, como la calidad de un texto alternativo o la claridad de un mensaje de error.

Verificadores de kontraste. Calculan la relación de kontraste entre color de texto y fondo según la fórmula de luminancia relativa de WCAG. Son herramientas pequeñas pero críticas, porque el kontraste es uno de los fallos más frecuentes y uno de los más fáciles de medir objetivamente.

Lectores de pantalla. NVDA (Windows, ilmainen), JAWS (Windows, kaupallinen) ja VoiceOver (macOS/iOS, integrado) ovat prueba de fuego -sovellus. Un auditor puede decir que un formulario “pasa”, pero solo un lector de pantalla revela si el orden de tabulación tiene sentido o si un “aria-label” confunde más que ayuda.

Katsomisen arvoinen: — Accesibilidad gestionada: automatización combinada con revisión humana.

Rakenteen ja HTML-validaattorit. Varmista, että merkinnät ovat kelvollisia ja semanttisia. XHTML-sivustoilla validaattori havaitsee virheelliset sisäkkäiset, vanhentuneet attribuutit ja koodausongelmat, jotka sitten vaikuttavat näytönlukuohjelman tulkintaan.

Vertailu: minkä työkalun valita tilanteesi mukaan

La siguiente tabla ansioluettelo elä kriteerit de detsión para asegurar la accesibilidad AA web. No es una lista de precios (que cambian con frecuencia y dependen de la licencia), sino de encaje por escenario.

Tipo de herramientaCuándo elegirlaFortalezan pääjohtajaLimitación clave
Extensión de navegador (auditoría en vivo)Desarrollo diario, revisión de una página concretaPalaute inmediato sobre el DOM renderizadoSolo analiza lo que el navegador ha cargado; no cubre flujos completos
Suite con integración CIEquipos con despliegue continuoDetecta regresiones antes de publicarRequiere configuración y mantenimiento de reglas
Verificador de kontrasteDiseño y revisión de system de colorMedición objetiva y preciaNo evalúa nada más allá del color
Lector de pantallaValidación final y pruebas con usuariosToista la experiencia realCurva de aprendizaje alta; lento de ejecutar
Auditoría externaCertificación muodollinen, pliegos públicosInforme puolustettava ante tercerosCoste y dependencia de un proveedor

La regla práctica: usa la extensión de navegador mientras desarrollas, la suite en CI para no romper lo que ya funcionaba, el verificador de kontraste al definir la paleta, el lector de pantalla antes de cada entrega y la auditía externa soolo cuando ne documento.

Cómo evaluar una herramienta de accesibilidad antes de adoptarla

Työkalun valitseminen suosion perusteella on yleinen virhe. Nämä kriteerit erottavat hyödyllisen työkalun sellaisesta, joka tuottaa melua.

Kriteereiden kattavuus ja läpinäkyvyys. Hyvä työkalu osoittaa, mikä WCAG-kriteeri vastaa kutakin hälytystä. Jos se näyttää vain “esteettömyysvirheen” yhdistämättä sitä onnistumiskriteeriin, et voi dokumentoida vaatimustenmukaisuutta tai priorisoida.

Väärä positiivinen osuus. Hälytykset, jotka eivät ole todellisia epäonnistumisia, kuluttavat aikaa ja heikentävät joukkueen luottamusta. Testaa työkalua sivustolla, jonka tiedät jo täyttävän saavutettavuuden AA-verkkostandardit, ja tarkkaile, kuinka monta hälytystä se tuottaa.

Aiheeseen liittyvä: — La Certificación profesional que acredita tu experiencia en accesibilidad.

ARIA-tuki ja dynaamiset komponentit. Nykyaikaiset widgetit (pudotusvalikot, modaalit, välilehdet, harmonikka) riippuvat ARIA-tiloista. Työkalu, joka ei arvioi “aria-expanded”, “aria-controls” tai tarkennuksen hallintaa modaaleissa, päästää vakavimmat virheet kulkemaan läpi.

Integraatio pinon kanssa. Jos työskentelet puhtaan XHTML:n ja CSS:n kanssa, tarkista, että työkalu ei oleta konkreettista kehystä. Jos käytät koontiprosessia, varmista, että komentoriviintegraatio on olemassa.

Itse työkalun käytettävyys. Yleinen ironia: joihinkin auditointityökaluihin ei itseään pääse käsiksi näppäimistöllä. Jos aiot käyttää sitä päivittäin, varmista, että se on navigoitavissa ilman hiirtä.

Jos olet ostoksilla: — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Päivitys ja ylläpito. WCAG kehittyy (2.0, 2.1, 2.2) ja selaimet muuttuvat. Työkalu, jossa ei ole viimeaikaisia ​​päivityksiä, saattaa soveltaa vanhentuneita sääntöjä.

Vaiheittainen AA-työnkulku Webin käytettävyyttä varten

Toistettavissa oleva prosessi menee pidemmälle kuin mikään yksinkertainen työkalu. Tämä on järjestys, joka toimii todellisissa projekteissa.

Vaihe 1 – Määritä laajuus ja taso. Päätä, mitkä sivut ja kulkuvirrat sisällytetään tarkastukseen, ja vahvista, että tavoite on AA (ei A tai AAA). Dokumentoi WCAG-versio: 2.2 on nykyinen W3C-suositus.

Vaihe 2 – Ensimmäinen automaattinen tarkastus. Suorita keskeiset sivut tarkastajan kautta saadaksesi lähtötilanteen. Huomaa toistuvat virheet: ne keskittyvät yleensä malleihin, eivät yksittäisille sivuille.

Vaihe 3 – Tarkista manuaalisesti, mitä kone ei näe. Tarkista välilehtien järjestys, tarkennusten näkyvyys, vaihtoehtoisten tekstien laatu, virheilmoitusten selkeys ja otsikoiden johdonmukaisuus. Tässä noudattaminen voitetaan tai hävitään.

Vaihe 4 – Testaa näytönlukuohjelmalla. Käy läpi vähintään yksi täydellinen prosessi (esimerkiksi yhteydenottolomake tai osto) NVDA:n tai VoiceOverin avulla. Huomaa, minne eksyt.

Vaihe 5 – Kokeile oikeiden käyttäjien kanssa, kun mahdollista. Vammaiset ihmiset havaitsevat esteitä, joita mikään työkalu tai asiantuntija ilman kokemusta ei huomaa. Tämä on arvokkain kriteeri ja vaikein korvata.

Vaihe 6 – dokumentoi ja korjaa. Tallenna jokainen löydös WCAG-kriteerin, käytetyn tekniikan ja todisteiden kanssa (kuvakaappaus, selainversio, päivämäärä). Tämä tietue muuttaa sanan “uskomme sen noudattavan” sanaksi “voimme todistaa sen noudattavan”.

Errores frecuentes al perseguir el nivel AA de accesibilidad web

Sekava “nolla tilintarkastajavirhettä” vaatimustenmukaisuuteen. Puhdas raportti automaattisesta työkalusta ei tarkoita AA-vaatimustenmukaisuutta. Tilintarkastajat kattavat vain osan kriteereistä; loput vaativat ihmisen harkintaa.

Ignorar el kontraste en estados interactivos. El kontraste se suele revisar en el estado por defecto, pero los estados :hover, :focus y :disabled también deben cumplir. Un botón que pasa en reposo puede fallar al enfocarse.

Käytä ARIAa arreglar HTML mal estructurado. La primera regla de ARIA es no usar ARIA, jos HTML nativo ratkaisee ongelman. Un <div> con role="button" nunca será tan robusto como un <button> real, que ya gestiona el foco y el teclado.

Olvidar el redimensionado del texto. El criterio 1.4.4 exige que el texto se pueda ampliar al 200 % sin pérdida de contenido ni funcionalidad. Los diseños con alturas fijas en pixeles suelen romperse aquí.

No probar en móvil. El reflujo (kriteeri 1.4.10) exige que el contenido funcione sin desplazamiento horizontal en pantallas estrechas. Muchos sitios de escritorio conformes fallan en este punto.

Preguntas frecuentes

¿Qué diferencia hay entre accesibilidad A, AA y AAA?

WCAG-yhteensopivuustasot ovat kumulatiivisia. Taso A kattaa 30 peruskriteeriä; AA lisää 20 uutta (yhteensä 50), ja se on useimpien lakien vaatima standardi; AAA lisää 28 lisäarvoa, eikä sitä vaadita yleisessä muodossa, koska jotkin kriteerit ovat välttämättömiä kaikessa sisällössä. Useimmille web-projekteille AA on realistinen ja riittävä tavoite accesibilidad aa webille.

¿Cuántos kriteerit WCAG 2.2 hay que cumplir para el nivel AA?

WCAG 2.2 Taso AA edellyttää 50 onnistumiskriteerin täyttämistä: 30 tasolta A ja 20 tasolta AA. Luku pysyy samana kuin WCAG 2.1, mutta 2.2 lisäsi myös uusia kriteerejä, kuten kohdekoko (2.5.8) ja johdonmukainen apu (3.2.6), jotkut tasolla A ja jotkut tasolla AA.

¿Basta con una herramienta automática para cumplir AA?

Ei. Automaattiset työkalut havaitsevat objektiiviset ja toistuvat virheet, mutta ne eivät voi arvioida merkityksestä tai kontekstista riippuvia kriteerejä, kuten vaihtoehtoisen tekstin laatua tai virheilmoituksen hyödyllisyyttä. AA-yhteensopivuus edellyttää automaattisen tarkastuksen, manuaalisen tarkistuksen ja testauksen yhdistämistä näytönlukijoiden ja mahdollisuuksien mukaan oikeiden käyttäjien kanssa.

¿Qué lector de pantalla conviene usar para probar un sitio?

NVDA on ilmainen ja sitä käytetään laajasti Windowsissa, joten se on helppokäyttöisin aloitusvaihtoehto. JAWS on kaupallinen ja yleinen yritysympäristöissä. VoiceOver on integroitu macOS:ään ja iOS:ään, joten se on luonnollinen reitti, jos työskentelet Applen ekosysteemissä. Testaus vähintään kahdella selaimen ja näytönlukuohjelman yhdistelmällä antaa luotettavamman kuvan.

¿La accesibilidad AA es obligatoria por ley?

Se riippuu maasta ja organisaatiotyypistä. Euroopan unionissa Web Accessibility -direktiivi ja EN 301 549 -standardi asettavat vaatimuksia julkiselle sektorille ja monille yksityisille palveluille. Yhdysvalloissa pykälä 508 ja ADA luovat samanlaisia ​​velvoitteita. Latinalaisessa Amerikassa useilla mailla on omat WCAG:n innoittamat määräykset. On suositeltavaa tarkistaa markkinoillasi sovellettava lainsäädäntö.

¿Cada cuánto hay que reauditar un sitio para mantener el nivel AA?

Ei ole olemassa universaalia aikakehystä, mutta mikä tahansa muutos suunnittelussa, mallissa tai komponentissa voi aiheuttaa regressioita. Käytännön tapa on auditoida automaattisesti jokaisen käyttöönoton aikana jatkuvan integroinnin avulla ja suorittaa täydellinen manuaalinen tarkistus vähintään kerran vuodessa tai merkittävien uudelleensuunnittelujen jälkeen. Kunkin tarkastuksen dokumentointi helpottaa jatkuvan vaatimustenmukaisuuden osoittamista ajan mittaan.

Päätelmä

Web-saavutettavuuden AA-vaatimustenmukaisuutta ei osteta tai asenneta: se rakennetaan yhdistämällä työkaluja ja harkintaa. Automatisoidut auditoijat nopeuttavat työtä, kontrastitarkistus ratkaisee objektiivisen vian, näytönlukijat paljastavat todellisen kokemuksen ja manuaalinen tarkistus kattaa sen, mitä mikään kone ei voi arvioida.

Valitse työkalusi työnkulkusi mukaan, ei niiden suosion mukaan, ja dokumentoi jokainen päätös. Kriteereihin ja tekniikoihin syvemmälle pääsemiseksi lopullinen viite on edelleen W3C:n WCAG-dokumentaatio ja WAI-aloitteen ohjeistukset.

Lähteet ja lisälukemista


¿Cumplir WCAG sin tocar el código?

Superposición de IA que promete cumplimiento WCAG en 48 horas