CONTENIDO ESTRUCTURADO

En la siguiente imagen se muestra una web visualmente estructurada: contiene encabezados o títulos mediante los que se define una estructura, los enlaces del menú agrupados, etc.

Web estructurada visualmente

Por lo general, la estructura se marca visualmente, utilizando recursos como títulos con letra mayor, fuente negrita, etc.

La estructura ayuda a las personas que ven a visualizar de forma rápida los bloques de cada página y centrar su atención únicamente en aquella información que le interese.

Pero la estructura de una página debe marcarse mediante el código para no obligar a las personas ciegas a leer todo el contenido de forma lineal, sin permitirle saltar a un bloque determinado.

Los encabezados de una página se marcan mediante la etiqueta <hn>, siendo n un número comprendido entre 1 y 6. El 1 corresponde al primer nivel, el 2 al segundo, etc. Así, cuando el lector de pantalla encuentre en el código la etiqueta <h1>, verbalizará: “encabezado 1”.

En la siguiente imagen se puede observar que el contenido de la página está correctamente estructurado mediante el código.

El marcado de estructura permite a la persona ciega extraer un listado de los encabezados de las páginas y así conocer de forma rápida los distintos bloques de información. Junto a cada encabezado, se muestra un número, que corresponde al nivel.

En la siguiente imagen se muestra el listado de encabezados que muestra Jaws. lector de pantalla más utilizado en España.

Lista de encabezados mostrada por Jaws

Aunque los encabezados son fundamentales para definir una estructura, existe otro elemento básico: las listas. Las listas pueden marcarse igualmente de forma visual, incluyendo un número o letra en cada ítem (1, 2, 3 o a, b, c), un guión (-), un asterisco (*), etc.

Este marcado debe realizarse mediante el código para que un lector de pantalla pueda advertir al usuario de la presencia de listas, de si estas son ordenadas o desordenadas, del número de elementos que contiene, sin existen listas anidadas, etc.

Se considera lista cualquier agrupación de elementos, por lo que los menús deben estar marcados como listas, aunque mediante la CSS se puede excluir de la presentación los símbolos mostrados en cada ítem para eliminar la apariencia de lista.

Las listas desordenadas se definen con <ul> y las ordenadas con <ol>. Además, cada elemento de la lista o ítem se define con <li>

Web con estructura de listas mediante el código

Por último, se muestra la web con toda su estructura: encabezados y listas.

Contenido completamente estructurado mediante el código

Volver a la guia

© ONCE Málaga y SFSM 2008