Crear activos accesibles: Fragmentos/código HTML

Cuando añadas código HTML personalizado o fragmentos a tu sitio web, la accesibilidad debe ser una consideración clave. Un código mal estructurado puede crear barreras para los usuarios que dependen de tecnologías de asistencia. Este artículo explica cómo escribir un HTML limpio y semántico que sea compatible con la accesibilidad. Cubre elementos como los roles ARIA, el uso adecuado de etiquetas y el diseño compatible con el teclado para garantizar que tu código personalizado funciona para todos los visitantes.

Para asegurarte de que tu sitio web, página de destino, formulario o mensaje cumple los requisitos de accesibilidad, utiliza la lista de comprobación disponible aquí.

Ten en cuenta que no ofrecemos más ayuda con HTML. Asegúrate de que te sientes cómodo con la codificación o de que tienes un desarrollador al que consultar.

Requisitos

Iframes

  • El atributo title del iframe (en la página padre) debe ser preciso y descriptivo.
  • La página fuente de un iframe (la página incrustada en el iframe) debe tener un <title> válido y significativo .

Puntos de referencia

  • Los lectores de pantalla permiten a los usuarios navegar mediante puntos de referencia, por lo que los puntos de referencia son una forma eficaz de omitir bloques de contenido, tal como exigen las WCAG 2.4.1.
  • Los puntos de referencia pueden designarse con etiquetas HTML o con sus roles ARIA equivalentes (por ejemplo, <header> o role="banner", <nav> o role="navigation", <main> o role="main", <footer> o role="contentinfo", etc.).

Idioma

  • El idioma principal de la página debe identificarse con precisión mediante un código de idioma estándar en el elemento, por ejemplo
    • <html lang="en">,
    • <html lang="fr">.
  • Los cambios de idioma en línea DEBEN identificarse con un atributo lang válido.

Listas

  • Las listas deben construirse utilizando el marcado semántico apropiado, es decir
    • <ul> o <ol> con elementos hijos <li>,
    • o <dl> con elementos hijos <dt> y <dd>.

Tablas

  • Los encabezados de las tablas deben designarse con <th>.
  • El texto de cabecera de las tablas de datos debe describir con precisión la categoría de las celdas de datos correspondientes.
  • Las celdas de datos de la tabla deben estar asociadas a sus correspondientes celdas de encabezamiento.
    • Es muy recomendable utilizar el ámbito(<th ámbito="col"> y <th ámbito="fila">), aunque no siempre es necesario. Si todas las celdas de la primera fila se marcan como <th> sin ámbito, la mayoría de los lectores de pantalla modernos deducirán que el ámbito es la columna situada debajo de cada celda de encabezamiento.
  • Los encabezados de grupos de datos de la tabla (si los hay) deben asociarse a sus correspondientes grupos de celdas de datos (por ejemplo, mediante scope="rowgroup" o scope="colgroup").
  • Las asociaciones encabezado/datos que no puedan designarse con <th> y scope deben designarse con los atributos header e id.
  • Las cabeceras de tablas de datos y las asociaciones de datos no deben referenciarse a través de tablas anidadas, fusionadas o separadas.

Excepciones

Cambios de idioma inline

Se permiten excepciones para:

  • nombres propios
  • términos técnicos,
  • palabras de lengua indeterminada,
  • y palabras o frases que hayan pasado a formar parte de la lengua vernácula del texto inmediatamente circundante.

Ejemplos

código iframeHACER: El título añadido al iframe explicará la finalidad del contenido.
puntos de referencia en el sitio webHACER: Puntos de referencia correctamente marcados que permitan a los usuarios navegar a través de unos.
ejemplo de código usando la entrada /LangHACER: El siguiente fragmento de código ilustra el código típico para utilizar la entrada /Lang para anular el idioma predeterminado del documento especificando una secuencia de contenido marcado dentro del flujo de contenido de una página.
sitio web con listas marcadasHACER: Lista de elementos correctamente marcados.
tabla en el código HTMLNO HACER: En este ejemplo, se utilizan cabeceras anidadas, pero las celdas de contenido están asociadas incorrectamente mediante los atributos id y headers. Todas las celdas hacen referencia al encabezado de nivel superior “Exámenes”(id="e") – esto no es correcto para las tres últimas columnas, que deberían hacer referencia al encabezado “Proyectos”. Además, se ha intercambiado accidentalmente la referencia de los encabezados de columna de segundo nivel, aunque en este ejemplo esto no supone ninguna diferencia, ya que los contenidos (1, 2, Final) se repiten.

Artículos relacionados

Recursos populares