Área de Gobernanza y Calidad
Image Removed
Image Added
Criterios WCAG 2.1 agrupados por cada indicador UNE
A continuación se presenta cada uno de los indicadores propuestos por el Observatorio de Accesibilidad Web (
Artefacto) y los criterios WCAG 2.1, y validaciones que se realizan por cada uno de ellos.
Expandir |
---|
title | 1.1 Existencia de alternativas textuales (A) |
---|
|
Criterios WCAG 2.1 utilizados: - 1.1.1 - Contenido no textual
Validaciones realizadas: - Los elementos AREA deben tener un texto alternativo con alt, aria-label o aria-labelledby.
- Los INPUT de tipo image deben tener un texto alternativo con alt, aria-label o aria-labelledby.
- Los elementos APPLET deben tener un texto alternativo con alt junto con contenido textual dentro de las etiquetas de apertura y de cierre del elemento APPLET; o bien mediante aria-label o aria-labelledby.
- El texto alternativo de las imágenes no puede tener el nombre de la imagen (*.jpg, *.jpeg, *.gif, *.png, *.bmp.) o un texto de relleno ("imagen", "foto"... ; o patrones similares en la misma página como "Pic1", "Pic2", "0001", "0002").
- Todas las imágenes deben tener atributo alt o atributo aria-label o aria-labelledby, a no ser que tengan asignado el rol ARIA role="presentation".
- Si el alt está vacío, las imágenes no pueden tener aria-label, aria-labelledby, title (a no ser que esté vacío); y si tienen un rol será role="presentation".
- Se comprueba que las imágenes con un alto y/o ancho igual o inferior a 2px están marcadas como imágenes decorativas, es decir, tienen el texto alternativo vacío; no tienen atributo title (o está vacío); y carecen de atributo role (o bien es role="presentation" si no tiene atributo alt).
- Si la imagen tiene longdesc debe ser a una página válida.
- Las imágenes no pueden tener alternativas textuales (en los atributos alt, aria-label o aria-labelledby) cuyo contenido textual sea superior a 150 caracteres pues, en ese caso, lo que requieren son descripciones detalladas (por ejemplo, con los atributos longdesc o aria-describedby).
- El valor de los atributos aria-describedby deben ser identificadores reales de otros elementos existentes en la página que tengan contenido textual. Como en el atributo aria-describedby se pueden indicar varios identificadores (id), es suficiente con que solo uno de ellos exista y tenga contenido.
|
Expandir |
---|
title | 1.2 Uso de encabezados (A) |
---|
|
Criterios WCAG 2.1 utilizados: - 1.3.1 - Información y relaciones
Validaciones realizadas: - Se deben usar etiquetas de encabezado o su correspondiente rol ARIA (role="heading" con aria-level).
- Los encabezados no pueden estar vacíos.
- No puede haber dos encabezados del mismo nivel o superior (por ejemplo: H2, H2 o H2, H1) sin contenido entre ellos.
- Los encabezados no pueden saltarse niveles.
- Si la página tiene 15 o más párrafos P con al menos 80 caracteres, se verifica que la página no tenga un único encabezado. Si esta verificación se incumple, se daría 0.5 puntos en vez de 1, pero la página tendría el valor "pasa" (en vez de "falla").
- La página debe tener un H1 (o su equivalente rol ARIA). Si la página tiene encabezados, la ausencia de H1 dará 0.5 puntos en vez de 1, y la página tendrá el valor "pasa" (en vez de "falla").
|
Expandir |
---|
title | 1.3 Uso de listas (A) |
---|
|
Criterios WCAG 2.1 utilizados: - 1.3.1 - Información y relaciones
Validaciones realizadas: - Las listas deben estar bien formadas, bien anidadas y los elementos LI deben tener como padre directo un OL o UL.
- No puede haber listas OL o UL sin hijos LI.
- No se deben simular las listas mediante párrafos o tablas de una columna, para ello se verifica que:
- No haya 3 o más elementos P seguidos que empiecen por "-" o "- " o "*".
- No haya 3 o más elementos BR seguidos que empiecen por "-" o "- " o "*".
- No haya 3 o más elementos P seguidos que empiecen por los patrones "x", "x ", "x.", "xº", "xª", "x)", "x-", "x.-" donde `x' pertenezca a una secuencia de números, letras o números romanos.
- No haya 3 o más elementos BR seguidos que empiecen por los patrones "x", "x ", "x.", "xº", "xª", "x)", "x-", "x.-" donde `x' pertenezca a una secuencia de números, letras o números romanos. Solo se consideran aquellas secuencias que empiezan por la unidad (1, 1º, 1ª, a, A, i, I).
- No haya 3 o más elementos LI de lista desordenada UL que empiecen por los patrones "x", "x ", "x.", "xº", "xª", "x)", "x-", "x.-" donde `x' pertenezca a una secuencia de números, letras o números romanos. Solo se consideran aquellas secuencias que empiezan por la unidad (1, 1º, 1ª, a, A, i, I).
- No haya 3 o más párrafos seguidos que empiecen por una imagen cuyas dimensiones sean iguales o inferiores a 10x10 píxeles.
- No haya 3 o más líneas separadas por BR que empiecen por una imagen cuyas dimensiones sean iguales o inferiores a 10x10 píxeles.
- No haya tablas formadas por una única columna y 3 o más filas en la que el contenido textual de cada celda no supere los 150 caracteres.
|
Expandir |
---|
title | 1.4 Tablas de datos (A) |
---|
|
Criterios WCAG 2.1 utilizados: - 1.3.1 - Información y relaciones
Validaciones realizadas: Si es una tabla de datos - Debe tener al menos una celda de encabezado (TH) en las filas o columnas exteriores.
- Si la tabla es sencilla: debe tener encabezados (todos los elementos son encabezados TH) en la primera fila o en la primera columna, salvo para celdas con texto vacío. Es decir, falla si no hay ningún encabezado (TH) en la primera fila ni en la primera columna, o si en ellas hay al menos una celda de encabezado (TH) y al menos una de datos con texto (TD).
- Si la tabla tiene más de un nivel encabezados (si hay elementos TH en dos filas o en dos columnas):
- Da error si no existen atributos id en los elementos TH y headers en los elementos TD.
- En aquellas tablas con la celda superior izquierda vacía y marcada por tanto como TD, se verifica que el resto de celdas con texto de la fila sean encabezados (TH) y que todas las celdas de la primera columna (que tengan texto) sean encabezados TH, en caso contrario falla.
Es decir, la siguiente tabla es correcta porque, aunque la celda superior izquierda de la fila de encabezados está vacía, el resto de celdas con texto de la fila son TH, y las celdas con contenido de su columna también son encabezados TH:

- Si la tabla tiene scope, headers o axis el valor debe ser válido.
- No se puede simular el título (caption) de la página.
- Si la primera fila de una tabla tiene una única celda que ocupa todo el ancho de la tabla, dará error porque se considera que se está simulando de forma incorrecta el título de la tabla, que debería marcarse con CAPTION.
Es decir, la siguiente tabla da error porque tiene una primera fila de celdas unidas con colspan y se entiende que está simulando el título, cuando debería usarse para ello el atributo CAPTION:

- Si una tabla no tiene título (CAPTION), dará error si es el único contenido de la sección correspondiente a un encabezado (H1, H2, H3...), considerando que dicho encabezado es en realidad el título de la tabla, y que este debería haberse incluido con CAPTION. Es decir, si tenemos un encabezado seguido de una tabla (por ejemplo, <h2>Título</h2> <table>...) dará error, haya o no más contenido tras la tabla.
- Las tablas deben tener un resumen:
- Se comprueba que las tablas complejas tienen un atributo summary con contenido. El validador considera que una tabla es compleja si tiene encabezados tanto de fila como de columna y, además, tiene dos o más filas o columnas de encabezados.
- Aunque no se indica en la metodología, si la descripción se incluye con aria-describedby (alternativa a summary en HTML 5), la tabla pasa la validación. Puedes consultar el artículo Descripción de las tablas en HTML5. Alternativa a "summary").
- El título (CAPTION) y el resumen (summary) no pueden ser iguales.
|
Expandir |
---|
title | 1.5 Agrupación estructural (A) |
---|
|
Criterios WCAG 2.1 utilizados: - 1.3.1 - Información y relaciones
Validaciones realizadas: - No se debe usar el elemento DIV para incluir directamente el contenido sin usar a su vez etiquetas semánticas. El validador solo dará error si hay algún elemento DIV cuyo contenido directo sea un texto de más de 150 caracteres, obviando las etiquetas en línea.
- No se deben usar las etiquetas BR, salvo en ADDRESS. Pero el validador solo dará error si:
- Hay elementos P con más de 150 caracteres de texto (obviando el marcado de las etiquetas en línea) que contengan secuencias de 2 o más BR seguidos, ignorando aquellas secuencias de BR que estén al principio y final del párrafo.
- Se están empleando más de 10 elementos BR en la página, considerando que un abuso del elemento BR implica que se están empleando saltos de línea para simular párrafos.
|
Expandir |
---|
title | 1.6 Separación de contenido y presentación (A) |
---|
|
Criterios WCAG 2.1 utilizados: - 1.3.1 - Información y relaciones
Validaciones realizadas: - Si hay tablas de maquetación no pueden tener: CAPTION, TH, THEAD, TBODY, TFOOT o los atributos summary, title, scope, headers o axis.
- No pueden usarse los siguientes elementos de presentación desaconsejados (deprecated): FONT, BASEFONT, CENTER, S, STRIKE y U.
- No puede incluirse contenido desde las CSS con :before o :after y la propiedad content, cuyo valor sea un texto de más de un carácter alfanumérico (las entidades HTML y los caracteres Unicode se contabilizan como un único carácter).
Se considera tabla de maquetación si: - Contiene a otra tabla
- Tienen el atributo role="presentation".
- Contiene alguna celda con más de 150 caracteres mostrados por pantalla.
- Se trata de una tabla con una sola celda.
- Se trata de una tabla con una sola fila.
- Se trata de una tabla con una sola columna.
Menos del 70% de las celdas de la tabla contienen texto. Para contabilizar el texto se tendrá en cuenta el contenido de los atributos alt, title o aria-label, así como la presencia de un atributo aria-labelledby o aria-describedby que haga referencia a algún elemento con contenido. |
Expandir |
---|
title | 1.7 Identificación del idioma principal (A) |
---|
|
Criterios WCAG 2.1 utilizados: Validaciones realizadas: La etiqueta HTML debe tener el atributo lang, y debe definir el idioma correcto del documento. La identificación del idioma de una página se realiza mediante la técnica de detección de trigrams (n-gramas de tres caracteres) |
Expandir |
---|
title | 1.8 Navegación con javasript accesible y control de usuario (A) |
---|
|
Criterios WCAG 2.1 utilizados: 2.1.1 - Teclado. 2.2.1 - Tiempo ajustable 2.3.1 - Umbral de tres detellos o menos 4.1.2 - Nombre, función, valor
Validaciones realizadas: - Todos los eventos dependientes de dispositivo (salvo onclick) deben tener a su vez un evento lógico independiente o un evento para otro dispositivo de entrada (onmousedown con onkeydown; onmouseover con onfocus...)
- Los elementos que tienen onclick o onkeypress deben ser elementos estándar de interacción, en caso contrario deben tener tabindex y un role relativo a widgets (alert, button, link...)
- No se debe usar blink o marquee o el estilo text-decoration: blink.
- La página no debe actualizarse o redirigirse automáticamente con el elemento META y el atributo http-equiv (con un tiempo mayor de 0 segundos)
Editar Editar la plantilla Seleccionar contenido web Añadir |
Expandir |
---|
title | 1.9 Formularios y etiquetas (A) |
---|
|
Criterios WCAG 2.1 utilizados: 1.3.1 - Información y relaciones 2.5.3 - Etiqueta en el nombre 3.3.2 - Etiquetas e instrucciones 4.1.2 - Nombre, función, valor
Validaciones realizadas: - Los campos de formulario deben tener una etiqueta (label, aria-label, aria-labelledby, title) correctamente asociada y no vacía. En caso de usar label, su for debe tener el id de algún control de formulario usado en la página.
- Si el campo solo tiene una etiqueta incluida con label, esta no puede estar oculta con display: none o visibility: hidden.
- Si el formulario tiene más de 5 campos (los grupos de radios o de checks contabilizan como uno) el validador busca términos como "obligatorio" u "opcional", en varios idiomas, en el texto, las alternativas textuales o los títulos del formulario y su elemento contenedor. Si no las encuentra da error.
- Si un elemento tiene un nombre accesible con aria-label o aria-labelledby, este debe coincidir o contener la etiqueta visible del campo para facilitar el acceso por voz . No es aplicable cuando el contenido accesible o el contenido visible sólo contiene caracteres Unicode, de puntuación (:, ;, ., /, \, |,¿) , o emojis.
|
Expandir |
---|
title | 1.10 Formularios y estructura (A) |
---|
|
Criterios WCAG 2.1 utilizados: - 1.3.1 - Información y relaciones
- 4.1.2 - Nombre, función, valor
Validaciones realizadas: - En formularios extensos, los campos deben estar agrupados con fieldset. El validador hace las siguientes comprobaciones:
- Si hay grupos de dos o más radio o de cinco o más checks (con el mismo name) entonces cada uno de ellos debe estar agrupado bajo un FIELDSET o un rol de ARIA equivalente ("group" para los checks y "radiogroup" para los radio).
- Se comprueba que existan elementos FIELDSET, o elementos que tengan role="group", en aquellos formularios que contengan 8 o más campos de introducción de datos. Si hay 8 o más campos, pero menos de 12 sin haber un elemento FIELDSET, entonces la comprobación se evalúa con 0.5 puntos en vez de 1 y la modalidad "pasa". Si hay 12 o más campos entonces se le asigna el valor 0 puntos y la modalidad "falla".
- Si existen dos o más elementos de encabezado (H1, H2, H3...) dentro de un elemento FORM, da error porque entiende que hacen la función que deberían estar haciendo los elementos fieldset.
- El elemento fieldset debe tener como primer hijo un legend con contenido.
- Se comprueba que todo elemento con role="group" o role="radiogroup" tenga un atributo aria-label, o un atributo aria-labelledby que haga referencia a algún elemento de la página con contenido.
- Los select con muchos elementos deben estar agrupados con optgroup:
- Se comprueba que, si una SELECT tiene más de 24 opciones, estén agrupadas con algún elemento OPTGROUP. Este límite se amplía hasta 100 en el caso de que las opciones sean números consecutivos.
- Se comprueba que no existan elementos SELECT con opciones que comiencen por sucesiones de 3 o más caracteres repetidos no alfanuméricos (por ejemplo: "----", "----texto", "___", "***", "......", etc.)
- Se comprueba que los elementos OPTGROUP disponen de una etiqueta que identifique su contenido en forma de atributo label con texto.
|
Expandir |
---|
title | 1.11 Título de página y de marcos (A) |
---|
|
Criterios WCAG 2.1 utilizados: - 2.4.1 - Evitar bloques
- 2.4.2 - Titulado de páginas
- 4.1.2 - Nombre, función, valor
Validaciones realizadas: - La página tiene que tener un title en el head que sea válido (se verifica que no sean títulos que se hayan podido añadir por defecto: "Título del documento", "Title", "Untitled document"¿)
- Cuando se analiza una muestra de más de 10 páginas, el validador dará error si son todos los títulos iguales.
- Los frames e iframes deben tener title y no puede estar vacío.
|
Expandir |
---|
title | 1.12 Enlaces descriptivos (A) |
---|
|
Criterios WCAG 2.1 utilizados: - 2.4.4 - Proposito de los enlaces (en contexto)
Validaciones realizadas: - El validador detecta el uso de enlaces poco descriptivos similares a "pincha aquí" o "pulse aquí".
- No puede haber enlaces sin texto de enlace y/o imágenes sin alternativas textuales.
- Los enlaces no pueden tener mas de 250 caracteres a menos que empiecen por Decreto, Orden, Ley, R.D., ...
- La alternativa textual de una imagen incluida dentro de un enlace no puede ser igual que el resto del contenido textual del enlace.
- Todo elemento con role="link" o role="button" debe tener un contenido textual; o bien un atributo aria-label, o aria-labelledby que haga referencia a algún elemento de la página con contenido.
|
Expandir |
---|
title | 1.13 Cambios de contexto (A) |
---|
|
Criterios WCAG 2.1 utilizados: - 3.2.1 - Al recibir el foco
- 3.2.2 - Al recibir entradas
Validaciones realizadas: - Se valida que no provoquen un cambio de contexto (abrir una nueva página, ventana, pestaña o aplicación; o que cambie el foco) mediante el uso de window.location, window.history, window.open, window.focus:
- ni los eventos onfocus / onblur de los elementos de la página
- ni el evento onload de la página
- ni el evento onchange de una select
|
Expandir |
---|
title | 1.14 Compatibilidad (A) |
---|
|
Criterios WCAG 2.1 utilizados: Validaciones realizadas: - La página debe tener un DTD válido.
- El código de la página no puede tener los siguientes errores de validación: etiquetas mal cerradas o anidadas; atributos repetidos en el mismo elemento; atributos con valores sin entrecomillar; atributos que deben tener valores únicos (id, accesskey) repetidos.
- Las CSS no pueden tener errores de sintaxis. Se admiten propiedades experimentales o propietarias siempre que la sintaxis de las CSS sea correcta.
|
Expandir |
---|
title | 2.1 Identificación de los cambios de idioma (AA) |
---|
|
Criterios WCAG 2.1 utilizados: - 3.1.2 - Idioma de las partes
Validaciones realizadas: - Si se usa el atributo lang, se verifica que define un código de idioma que existe.
- Se buscan palabras concretas habituales en otros idiomas ("bienvenido", "welcome", "castellano", "english", ¿) para comprobar que tienen el atributo lang correspondiente. Detecta, por ejemplo, sin marcar, las palabras "english", "français", "català", "galego" o "euskera", pero no "deutsch".
- Se verifica que los cambios en inglés (textos, títulos y alternativas textuales) se marcan con lang. Para identificar textos en inglés se buscan al menos 4 palabras en un listado de las palabras más usadas del inglés que no existen en las lenguas cooficiales de España. No se tienen en cuenta aquellas que están en abreviaturas o acrónimos (ABBR o ACRONYM).
|
Expandir |
---|
title | 2.2 Legibilidad y contraste (AA) |
---|
|
Criterios WCAG 2.1 utilizados: - 1.4.3 - Contraste mínimo
- 1.4.12 - Espaciado en el texto
Validaciones realizadas: - Se comprueba que las combinaciones de color de primer plano (color) y de color de fondo (background-color o background), en una misma regla de las hojas de estilo, tiene el contraste suficiente. Se tienen en cuenta los diferentes umbrales según el tamaño del texto. Si no se conoce el tamaño de texto, se emplea el umbral más permisivo de 3:1.
- Se comprueba que no se usen las propiedades 'line-height', 'letter-spacing', 'word-spacing' fijadas mediante la clave !important.
|
Expandir |
---|
title | 2.3 Maquetación adaptable (AA) |
---|
|
Criterios WCAG 2.1 utilizados: Validaciones realizadas: Se tiene que poder hacer zoom en la página. En consecuencia, se comprueba que el uso de <meta name='viewport' no esté impidiendo hacer zoom |
Expandir |
---|
title | 2.4 Múltiples vías de navegación (AA) |
---|
|
Criterios WCAG 2.1 utilizados: Validaciones realizadas: - La página debe tener mapa del sitio o una función de búsqueda.
- Se buscan palabras como "mapa" (en distintos idiomas), en los textos de enlace o en su title. Si no las encuentra, las busca en el title de la página, por si estamos en la página de mapa web.
- Se buscan palabras como "buscar", "buscador", "búsqueda"... (en distintos idiomas) en elementos de formulario.
|
Expandir |
---|
title | 2.5 Independencia del dispositivo (AA) |
---|
|
Criterios WCAG 2.1 utilizados: Validaciones realizadas: - Los elementos de interacción no pueden tener atributos outline:0/none, a menos que se use en ellos también :focus para definir un borde o color de fondo.
- No debe usarse tabindex con valores mayores de 0. El validador admite que se incluyan 3 tabindex con un valor mayor que 0; de 4-10 tabindex con un valor mayor que 0 dará 0.5 puntos (en vez de 1 punto) pero pasará.
- No se debe bloquear la orientación de pantalla. El validador comprueba que no existan reglas CSS tipo @media que definan la propiedad orientation que a su vez incluyan sentencias transform con valores 90degr o 270deg.
- Se debe usar autocomplete en ciertos campos de formulario. El validador solo comprueba que los campos de formulario con atributo autocomplete tengan un valor de los descritos en HTML 5.2.
|
Expandir |
---|
title | 2.6 Navegación consistente (AA) |
---|
|
Criterios WCAG 2.1 utilizados: - 3.2.3 - Navegación coherente
Validaciones realizadas: - La página no debería tener enlaces rotos:
- con 1 enlace externo roto pasa;
- con 1 enlace roto dentro del dominio o, más de 1 y menos de 4 enlaces externos rotos, tendrá 0.5 puntos (en vez de 1) pero "pasa".
- No se permiten dos enlaces adyacentes (separados por un carácter y/o conjunto de espacios en blanco o por alguna etiqueta que no pertenezca al grupo de etiquetas en línea) que apunten al mismo destino, salvo que el destino sea "#"
|