Contenido


Indicadores UNE vs Criterios WCAG  2.1


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.


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.



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").



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.


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.