Estructurar el contenido

Para garantizar la accesibilidad, es esencial que proporciones a tus contenidos una estructura lógica de acuerdo con las necesidades de tu audiencia. Hay distintos elementos que te pueden ayudar a organizar tu contenido:

  • Usar un título de página significativo y epígrafes bien jerarquizados.
  • Incluir encabezados.
  • Dividir el contenido en párrafos.
  • Usar listas ordenadas y desordenadas.
  • Incorporar tablas de datos cuando sea relevante.

A continuación se detalla cómo utilizar estos elementos para hacer tu contenido accesible.

Título de la página

Proporciona un título único para tu contenido o documento digital que identifiquen la página del resto y resuma su contenido o finalidad.

  • El título de la página aparece en parte superior del navegador, en los marcadores de los navegadores y en los resultados de los buscadores.
  • Los productos de apoyo como lectores de pantalla anuncian el título de la página al entrar en ella y es el primer elemento que se muestra en los navegadores no visuales.

Consejos para la redacción del título

  • El título debe ser descriptivo de la función de la página, lo más breve posible y único. No debes tener el mismo título en varias páginas.
  • Incluye  el nombre de la página antes del nombre del sitio web. Si la página forma parte de una secuencia de páginas y dispone de pasos, coloca esta información al principio del título.
  • El título de la página suele ser el mismo que el utilizado en el encabezado principal de la página.
  • En el caso de los documentos digitales (PDF, DOC, ODT) introduce el título desde el campo habilitado, por ejemplo “Propiedades”.

Implementación

El título de la página se introduce a través de la etiqueta <title></title> al comienzo del documento HTML. 

Técnicas WCAG 2.1 con ejemplos: 

Encabezados

El uso de encabezados o títulos con diferentes niveles de profundidad ayuda a nuestra audiencia a entender la estructura del contenido, página o documento digital. Además, en algunos productos de apoyo facilita navegar a través del contenido y acceder rápidamente a la parte que le interesa.

Consejos para la redacción de encabezados

  • Cada encabezado debe describir con precisión el contenido que se muestra a continuación. Usa títulos cortos para agrupar el contenido en párrafos,  secciones, listas… que estén relacionados entre sí.
  • Asegura que siguen una estructura jerárquica respetándose los diferentes niveles de profundidad. No saltes ningún nivel. No puede existir un Encabezado 3, sin Encabezado 1 y 2.
  • Incluye los encabezados necesarios para identificar las diferentes secciones de un contenido. Elimina los que no sean necesarios o no aporten nada al contenido.
  • No uses estilos de encabezado sólo por razones estéticas o para formatear textos que no son títulos. 
  • Los encabezados o títulos deben destacar visualmente del contenido. Si no es así, revisa el diseño del sitio web.
  • Debe existir contenido textual entre encabezados consecutivos (H1-6) del mismo nivel, entre encabezados consecutivos (H1-6) cuando el segundo sea de mayor nivel que el primero; y entre el último encabezado y el final de página.
  • No crees encabezados vacíos. Todos los encabezados deben tener texto y englobar contenido.
  • En los documentos digitales (DOC, PDF...), utiliza los estilos de encabezado que proporcione el programa de edición.

Implementación

En los documentos HTML, utiliza una estructura de encabezados correcta. Desde el nivel 1 (<H1>) hasta el nivel 6, si lo necesitas (<H6>).

Técnicas WCAG 2.1 con ejemplos: 

Párrafos

Divide la información en párrafos o bloques de textos para facilitar la lectura del contenido. Usa párrafos descriptivos aunque cortos, para aumentar la legibilidad del contenido escrito.

Consejos para la redacción de párrafos

  • Usa párrafos de ancho desde 45 a 80 caracteres: criterio de conformidad 1.4.8 (AAA) de las WCAG 2.1 
  • No justifiques el texto, ya que dificulta la lectura.
  • Asegura que el espacio entre líneas de texto del párrafo sea al menos la mitad del tamaño del texto.
  • Asegura que el espaciado entre párrafos sea 1.5 veces el espaciado entre líneas o mayor.
  • No simules párrafos con otras etiquetas HTML como <div> o <span> . 
  • No uses párrafos vacíos para simular saltos de línea.
  • Si necesitas destacar información dentro de un párrafo, utiliza las etiquetas semánticas <em> (énfasis), que hace que el texto se presente en cursiva, y <strong> (fuerte), que hace que el texto se presente en negrita.
  • HTML: Todo contenido susceptible de ser un párrafo debe usar el estilo “Párrafo” o ir contenido en la etiqueta <p>.

Listas

Agrupa los elementos que estén relacionados entre sí en una lista, ya que ayuda a comprender la estructura del contenido.  Los productos de apoyo como lectores de pantalla informan sobre las listas y el número de elementos que lo componen.

Existen tres tipos de listas:

  • Lista no ordenada formada por elementos relacionados entre sí para los que no se indica un orden o secuencia determinados. 
  • Lista ordenada formada por elementos relacionados que se muestran siguiendo un orden determinado. 
  • Lista de definición formada elementos que están formados por términos y definiciones. 

Consejos para la redacción de listas

  • Escoge el tipo de lista adecuado en función de tu contenido.
  • Inserta el tipo de lista elegido utilizando los botones indicados en el gestor de contenidos, o bien introduce las etiquetas correctas en el código HTML.
  • No simules listas con párrafos con guiones, imágenes de viñetas, asteriscos o números sin usar HTML de listas. Estas listas son inaccesibles para los usuarios que usan productos de apoyo.

Citas, abreviaturas y acrónimos

Usa citas para hacer referencia a un fragmento del contenido que provenga de otra fuente. Aclara el significado de abreviaturas y acrónimos para que tu audiencia los comprenda. En ambos casos, recuerda usar las opciones de marcado existentes para que las intepreten correctamente  los productos de apoyo.

Consejos para añadir citas, abreviaturas y acrónimos

  • Para citas cortas y citas dentro de una frase, incluye el contenido de la cita dentro de un párrafo. 
  • Incluye en un bloque independiente las citas más largas, de uno o más párrafos.
  • Indica el origen de la fuente: nombre, títulos de documentos o información relacionada. Este elemento suele introducirse directamente desde el código fuente (<cite>).
  • No simules las citas con párrafos u otros elementos HTML. No uses las citas para diseñar visualmente un contenido si no es una cita. 
  • Introduce el significado de la abreviatura o acrónimo la primera vez que aparezca en el contenido. 

Implementación

Para incluir citas, abreviaturas y acrónimos, utiliza las etiquetas HTML adecuadas:

Tablas de datos

Las tablas de datos estructuran el contenido en filas y columnas describiendo una relación entre cada celda de datos con otras celdas en su misma fila y/o columna. 
Los productos de apoyo como lectores de pantalla informan de esa relación a los usuarios si están correctamente escritas.

Consejos para añadir tablas de datos

  • Proporciona un título a la tabla que describa brevemente su contenido. En el caso de tablas complejas, incluye además un resumen. Nunca uses el mismo texto para título y resumen.
  • Marca correctamente los encabezados de la tabla (filas o columnas). Usa en lo posible tablas de datos sencillas con una única fila o columna de encabezados.
  • Nunca uses las tablas como atajo para diseñar u organizar el contenido de forma visual. Las tablas deben solo incluirse para representar datos relacionados.

Implementación

Puedes encontrar información adicional en estos tutoriales:

Formularios

Consejos para añadir formularios

  • Asegura que cada campo del formulario especifique su tipo y función y asignada su etiqueta correspondiente para que los usuarios puedan completarlo con éxito.
  • La etiqueta tiene describir la información que se debe introducir en el control de forma breve.
  • Añade una etiqueta o <label> a cada control de los tipos <input>, <select>, <input type =“radio”>, <input type=“checkbox”>, <textarea>. Los botones <input type=“submit”>, <button> no necesitan un label. 
  • Agrupa las etiquetas y controles relacionados en <fieldset> y describe su contenido con la etiqueta <legend>.
  • Da instrucciones claras para que los usuarios entiendan qué información debe ir en cada campo.
  • Proporciona mensajes de error asociados a cada campo que ayuden a los usuarios a recuperarse de los errores.

Implementación

Índice