Guía simplificada sobre la norma UNE 301549:2022 de accesibilidad web

La norma UNE 301549:2022 de España establece los requisitos de accesibilidad web, basados en las Directrices de Accesibilidad para el Contenido Web (WCAG) 2.1 del W3C. 

Esta guía simplificada proporciona pautas para mejorar la accesibilidad web para personas con discapacidad, abordando aspectos como la navegación y el diseño inclusivo.

A continuación, se detallan los requisitos de esta metodología de seguimiento.

Requisito 1.1. Existencia de alternativas textuales

• Comprobación de marcado correcto para imagen decorativa transparente para los lectores de pantalla.
• Verificación de texto alternativo para elementos AREA.
• Verificación de texto alternativo para elementos AREA con atributo href.
• Verificación de texto alternativo para elementos INPUT de tipo imagen.
• Verificación de alternativa textual para elementos APPLET.
• Verificación de que el texto alternativo de las imágenes no contenga el nombre del fichero o un texto de relleno.
• Verificación de que las imágenes sin texto alternativo estén marcadas como imágenes decorativas.
• Verificación de que las imágenes sin texto alternativo estén marcadas como imágenes decorativas transparentes para lectores de pantalla.
• Verificación de imágenes con texto alternativo no vacío que no tengan un atributo role que las marce como decorativas.
• Verificación de imágenes pequeñas marcadas como decorativas y transparentes para lectores de pantalla.
• Verificación del valor de los atributos longdesc.
• Verificación de longitud de textos alternativos de imágenes.
• Verificación de atributos aria-describedby.

Requisito 1.2. Uso de encabezados

• Verificación de la presencia de encabezados.
• Verificación de encabezado de primer nivel.
• Verificación de encabezados no vacíos.
• Verificación de contenido entre encabezados del mismo nivel.
• Verificación de no salto de niveles de encabezado.
• Verificación de estructura de encabezados adecuada.

Requisito 1.3. Uso de listas

• Verificación de jerarquía de elementos LI.
• Verificación de estructura de listas de definición.
• Verificación de jerarquía de elementos DT.
• Verificación de jerarquía de elementos DD.
• Verificación de anidamiento de listas ordenadas.
• Verificación de anidamiento de listas desordenadas.
• Verificación de hijos LI en listas ordenadas.
• Verificación de hijos LI en listas desordenadas.
• Verificación de simulación incorrecta de listas no numeradas con párrafos.
• Verificación de simulación incorrecta de listas no numeradas con líneas separadas.
• Verificación de simulación incorrecta de listas numeradas con párrafos.
• Verificación de simulación incorrecta de listas numeradas con líneas separadas.
• Verificación de simulación incorrecta de listas ordenadas con elementos de lista desordenada.
• Verificación de simulación incorrecta de listas con imágenes como viñetas (párrafos).
• Verificación de simulación incorrecta de listas con imágenes como viñetas (líneas separadas).
• Verificación de tablas de maquetación para simular listas.
• Verificación de listas vacías.

Requisito 1.4. Tablas de datos con encabezados

• Comprobación de que es una tabla de datos.
• Se verifica que haya algún elemento de encabezado de tabla.
• Se verifica que los encabezados se marcan correctamente en tablas de datos simples.
• Se verifica que los encabezados se marcan correctamente en tablas de datos complejas (varios niveles de encabezamiento).
• Se verifica que el valor de los atributos scope sea válido.
• Se verifica que el valor de los atributos headers y axis se corresponda con identificadores usados en encabezados de la misma tabla.
• Se verifica que no se simula el título de la tabla mediante una celda de encabezado que ocupa todo el ancho de la tabla.
• Se verifica que no se simulan títulos de tabla mediante encabezados de página.
• Se verifica que las tablas de complejidad superior disponen de información de resumen.
• Se verifica que el título y el resumen de las tablas de datos no están duplicados.
• Se verifica que no existan tablas de datos mayoritariamente vacías.

Requisito 1.5. Agrupación estructural

• Se verifica que no se estén simulando párrafos mediante el elemento <br>.
  Se verifica que no se estén simulando párrafos mediante el elemento <div>.
• Se verifica que no se estén empleando más de 10 elementos <br> en la página.

Requisito 1.6. Separación de contenido y presentación

• Comprobación de qué es una tabla de maquetación.
• Se verifica que no haya tablas de maquetación que empleen elementos o atributos propios de tablas de datos.
• Se verifica que no se empleen elementos desaconsejados con carácter presentacional.
• Se verifica que no se incluya contenido que transmita información desde las hojas de estilo con los pseudoelementos :before o :after.

Requisito 1.7. Identificación del idioma principal

• Se verifica que el documento especifique un idioma de forma correcta a través del atributo lang.
• Se verifica que el idioma de la página coincida con el identificado.

Requisito 1.8. Navegación con JavaScript accesible y control de usuario:

• Se verifica que no se usen eventos dependientes de dispositivo o que estos estén duplicados.
• Se verifica que los elementos que tienen manejadores de eventos sean elementos de interacción estándar o bien empleen los atributos tabindex y role.
• Se verifica que no se empleen etiquetas que generen movimiento automático del contenido.
• Se verifica que no se empleen redirecciones de página que no sean transparentes para los usuarios.
• Se verifica que no se actualiza la página de forma automática con el elemento .
• Se verifica que no se emplee la propiedad de CSS text-decoration: blink.

Requisito 1.9. Formularios y etiquetas

• Comprobación de etiqueta asociada.
• Se verifica que todos los elementos <input> empleados para la introducción de datos tengan una etiqueta asociada.
• Se verifica que todos los controles de formulario de tipo <select> tengan una etiqueta asociada.
• Se verifica que todos los controles de formulario de tipo <textarea> tengan una etiqueta asociada.
• Se verifica que los atributos for de una etiqueta se corresponden con algún control de formulario.
• Se verifica que los elementos <label> asociados explícitamente, siendo la única etiqueta asociada, no estén ocultos con CSS.
• Se verifica que en los formularios con más de 5 campos de introducción de datos se identifican

REQUISITO 1.10. FORMULARIOS Y ESTRUCTURA

• Se verifica que si hay grupos de botones de radio o casillas de verificación en un formulario éstos estén debidamente agrupados e identificados.
• Se verifica que no se empleen elementos de encabezado para agrupar los controles de formulario en lugar de usar el elemento FIELDSET.
• Se verifica que se empleen grupos de controles de formulario cuando un formulario tiene 8 o más campos de introducción de datos.
• Se verifica que todo fieldset tenga su correspondiente etiqueta legend.
• Se verifica que todo grupo de controles de formulario definido mediante WAI-ARIA tenga su correspondiente etiqueta.
• Se verifica que en los select con más de 24 opciones (100 en el caso de números consecutivos) se empleen elemento optgroup.
• Se verifica que no existan select con opciones de relleno que simulen agrupaciones en lugar de optgroup.
• Se verifica que los elementos “optgroup” tengan un atributo “label” con contenido.

REQUISITO 1.11. TÍTULO DE PÁGINA Y MARCOS

• Se verifica que en el documento haya título.
• Se verifica que el contenido del título sea válido.
• Se verifica que todos los frames e iframes tengan un título.
• Se verifica que el texto del atributo title de los FRAME e IFRAME no esté vacío.
• Se verifica que el título no sea idéntico que el resto de títulos de la muestra (para tamaños de muestra >= 10).

REQUISITO 1.12. ENLACES DESCRIPTIVOS

• Se verifica que no haya enlaces con textos poco descriptivos (del tipo “pinche aquí”).
• Se verifica que no haya enlaces sin un texto que indique su finalidad.
• Se verifica que no haya enlaces demasiado largos con más de 250 caracteres (salvo excepciones).
• Se verifica que la alternativa textual de las imágenes incluidas dentro de enlaces no sea igual al resto del contenido textual del enlace.
• Se verifica que los enlaces o botones definidos mediante WAI-ARIA tengan su correspondiente etiqueta.

REQUISITO 1.13.- CAMBIOS DE CONTEXTO

• Se verifica que no se produzca ningún cambio de contexto en los eventos onfocus u onblur.
• Se verifica que no se produzca ningún cambio de contexto nada más cargarse la página (onload).
• Se verifica que no se produzca ningún cambio de contexto en el evento onchange de los elementos SELECT.

REQUISITO 1.14.- COMPATIBILIDAD

• Se verifica que el documento tenga un DTD válido.
• Se verifica que el código HTML no tenga errores que afecten a su correcto procesamiento por todos los navegadores.
• Se verifica que el código CSS sea parseable (bien formado sin errores de sintaxis).

REQUISITO 2.1. IDENTIFICACIÓN DE LOS CAMBIOS DE IDIOMA

• Se verifica que todos los idiomas especificados por los elementos sean válidos.
• Se verifica que los cambios de idioma más habituales encontrados en un documento se marquen adecuadamente.
• Se verifica que los textos en inglés encontrados en un documento se marquen adecuadamente.

REQUISITO 2.2. LEGIBILIDAD Y CONTRASTE SUFICIENTE

• Se verifica que las combinaciones de color de primer plano y de color de fondo en una misma regla de las hojas de estilo tienen el contraste suficiente.
• Se verifica que no se establezcan valores fijos de espaciado.

Requisito 2.3. Maquetación Adaptable

• Se verifica que no se está bloqueando la posibilidad de hacer zoom en el navegador. 
  • ANALIZADOR ID: 478. Se comprueba que no se están empleando elementos META de tipo viewport cuyo content defina la propiedad user-scalable=no o user-scalable=0 y/o los valores de initial-scale y maximum-scale coincidan entre sí.
• Se verifica que se esté empleando alguna característica de CSS propia de media-queries, CSS grid o Flexbox.
  • ANALIZADOR ID: 479. Se analizan las hojas de estilo en busca de la presencia de media-queries para diferentes anchos de pantalla, o de alguna propiedad específica de CSS Grid o de Flexbox.

Requisito 2.4 - Múltiples Vías de Navegación

• Se verifica que se proporciona un mapa del sitio o una función de búsqueda dentro del sitio web. 
• ANALIZADOR ID: 419. Se comprueba si existe un enlace al mapa web o si se está usando alguna función de búsqueda dentro del sitio web.

Requisito 2.5 - Independencia de Dispositivo

• Se verifica que en las hojas de estilo no se emplee la propiedad outline con valor “0” o “none” en elementos de interacción. 
  • ANALIZADOR ID: 451. Se comprueba que no se están empleando estilos para eliminar el indicador visual del foco del teclado en elementos de interacción como enlaces, botones y campos de formulario.
• Se verifica que no se esté abusando del atributo tabindex para modificar el orden de tabulación por defecto.
  • ANALIZADOR ID: 434 y 435. Se comprueba que no se esté abusando del atributo tabindex con valor positivo (>0) para modificar el orden de tabulación por defecto.
• Se verifica la no aplicación de reglas CSS de tipo rotate que bloqueen la orientación del contenido.
  • ANALIZADOR ID: 480. Se comprueba en el modelo CSS de la página la no existencia de sentencias que fijen la posición del contenido.
• Se verifica que los campos de formulario con autocomplete sean correctos. 
  • ANALIZADOR ID: 481. Se buscan aquellos campos de formulario compatibles con el atributo autocomplete y se verifica que los valores sean correctos según los tipos descritos en HTML 5.2.

Requisito 2.6. Navegación Consistente

• Se verifica que los enlaces no estén rotos. ANALIZADOR ID: 455, 456, 457 y 458. Se verifica que los enlaces de la página realmente funcionen y no nos lleven a páginas que devuelvan el código 404.
• Se verifica que no haya dos enlaces adyacentes que apuntan al mismo destino. ANALIZADOR ID: 180. Se buscan los enlaces de la página y se verifica que no tengan un enlace justo a continuación que apunte a la misma localización remota.

Recursos

Guía completa sobre la “METODOLOGÍA PARA EL SEGUIMIENTO SIMPLIFICADO UNE-EN 301549:2022” elaborada por la Secretaría General de Administración Digital (SGAD) y editada por el Ministerio de Asuntos Económicos y Transformación Digital.