Universidad de Alicante
Departamento de Lenguajes y Sistemas Informáticos

Accesibilidad Web

Buscador

Migas de pan

Estás en: Accesibilidad web > Guía breve > 5. Organización de las páginas

Consejo 5: Organización de las páginas: Use encabezados, listas y estructura consistente. Use CSS para la maquetación donde sea posible.

Las páginas web tienen que estar correctamente estructuradas. Para ello, se tienen que explear las etiquetas de HTML que definen la estructura de una página, como son: <title>, <h1>, <h2>, ..., <ul>, <ol>, <p>, <blockquote>.

Título de la página

Toda página web debe tener un título definido con la etiqueta <title> que resuma el contenido o la función de la página.

El título de una página tiene que ser descriptivo pero a la vez breve. El título de la página se emplea en los marcadores de los navegadores y en los resultados que muestran los buscadores. El título de la página es lo primero que leen los lectores de pantalla y lo primero que aparece en los navegadores no visuales. Por ello, debe describir correctamente el contenido de la página. Pero como se lee en todas las páginas, debe ser corto y no repetitivo (no debe ser el mismo en todas las páginas). Es conveniente incluir el nombre del sitio web para definir el contexto de la página, pero el nombre debe ser breve y significativo.

Encabezados

El contenido de las páginas se tiene que estructurar con las etiquetas de encabezado <h1>, <h2>, ... La mayoría de los lectores de pantalla y algunos navegadores como Opera permiten al usuario desplazarse dentro de una página web "saltando" de un encabezado a otro encabezado. Eso permite llegar de una forma más rápida a la información que se busca. Por ejemplo, la siguiente página web está estructurada en diversos apartados: Presentación, Formación académica, Investigación, Docencia, Libros, etc.:

Página personal estructurada en varios apartados

En la siguiente imagen de Fangs, que simula el comportamiento de un lector de pantallas, podemos observar la lista de encabezados (Heading list) de la página anterior. Cada encabezado lleva asociado un número que indica en nivel de encabezado (del 1 al 6).

Apartados de una página web visualizados en Fangs

El ejemplo Encabezados explica que muchos desarrolladores de páginas web emplean las etiquetas <div> y <span> para definir encabezados (títulos) de sección y estructurar el contenido. Sin embargo, estas etiquetas no proporcionan contenido semántico, por lo que se debe evitar su uso. Lo correcto es utilizar las etiquetas de encabezado (<h1> ... <h6>) y definir su presentación visual con CSS.

¿Cómo se tienen que emplear las etiquetas de encabezado? Se debe definir un estilo propio para cada sitio web, pero existen algunas reglas de aplicación general:

Tablas

Para maquetar una página web nunca se deben utilizar las tablas, ya que suponen un grave problema de accesibilidad. Una página web se puede y debe maquetar con CSS y obtener el mismo resultado que se obtendría con tablas.

El ejemplo Tabla sencilla explica cómo se deben emplear las etiquetas de HTML para crear una tabla sencilla y accesible.

Las siguientes páginas explican cómo se puede maquetar sin utilizar tablas:

Estándares, licencia y contacto