Marcar los encabezados de forma lógica (H1, H2... H6)
A la hora de diseñar un documento o una serie de documentos, es fundamental que los arquitectos de la información se esfuercen en identificar la estructura que desean dar a sus documentos, antes de preocuparse en cómo se mostrarán los mismos al usuario.
Normalmente los documentos se suelen dividir en una serie de capítulos, los capítulos tienen apartados, los apartados se dividen en distintas secciones, las secciones en párrafos, etc. Estos fragmentos semánticos de información constituyen la estructura lógica del documento.
En HTML la organización de los distintos encabezados se hace utilizando los elementos de H1 a H6. Los elementos H2 deberán seguir a los elementos H1, los H3 deberán seguir a los elementos H2, etc. Es muy importante no saltarse niveles, por ejemplo pasar directamente de H1 a H4.
Diferenciar la estructura del documento de la forma en que se presenta el contenido ofrece una serie de ventajas, entre otras la facilidad en la navegación por parte de un usuario de JAWS.
Las WCAG 1.0 hace su referencia a los encabezados en su punto de verificación 3.5, mientras que en la norma UNE 139803:2004 en su requisito 4.3.5.
Herramientas
Tanto en Firefox como en Internet Explorer hay disposición herramientas (extensiones) que nos ayudan a averiguar si hemos asignados de forma correcta los diferentes niveles de encabezados.
En Firefox tenemos la extensión Document Map, una utilidad que presenta en un panel lateral (para activarlo: Ver > Panel lateral > Document Map) la estructura de encabezados de la página que se está visitando.
Se puede apreciar como los diferentes niveles son sangrados respeto el nivel padre.
Mientras que en Internet Explorer es una funcionalidad integrada en la barra de accesibilidad AIS Web Accessibility Toolbar, en concreto en Estructura > Estructura de encabezados.
Tenemos que considerar que un documento Web es, ni más ni menos, que como otro cualquier documento en papel donde todas las informaciones son estructuradas. La diferencia es que en HTML es necesario marcar cada elemento según su fin (encabezado, párrafo, listado, etc.), mientras que en papel dicha estructura se aplica de forma visual (negrita, cursiva, espaciado, viñetas, etc.).
Clasificado en: Accesibilidad, Estándares Web, Herramientas, Técnicas
Etiquetas: estándares, une, wcag
demixo 26 octubre 2008, 06:12
Excelenter artículo.
Tengo una duda. Considerando la estructura secuencial de los encabezados, una página lo podría quedar así,
(h1)Nombre del sitio (/h1)
(h2)Título de la página(/h2)
(p)Texto(/p)
pero, me preguntaba si pudiera hacerlo así;
(h1)Nombre del sitio (/h1)
(h1)Título de la página(/h1)
(p)Texto(/p)
El “título de la página” con h1 para hacer que los motores de búsqueda le dean más importancia en vez que h2.
¿Que me sugieres, Marco?
Marco Giacomuzzi 26 octubre 2008, 10:17
Muy buena pregunta Demixo.
Generalmente yo considero el Título de la página como el encabezado principal del documento y por tanto marcado como H1.
En cuanto al Nombre del sitio prefiero aplicar un marcado de énfasis, escogiendo entre STRONG o EM. Este tipo de marcado creo recordar que también se consideran en el ámbito SEO.
Pero esta es una consideración mía, porque hay opiniones para todos los gustos sobre este tema.
juan Hidalgo 27 octubre 2008, 10:16
Buenos dias.
Muy buen articulo, pero al repasar mi Firefox no viene la opcion “Document Map”, e ido a buscar esa extension, pero me indican que solo esta para versiones anteriores de Firefox. Cual podria ser la alternativa??.
muchisimas gracias por su ayuda.
Este blog es de obligada consulta todos los dias.
JuanH.
Marco Giacomuzzi 27 octubre 2008, 12:43
Juan, si utilizas Firefox 3 echale un vistazo a los comentarios acerca la extensión, te indican como hacer para que funcione. Yo sigo utilizando la versión 2, como versión de desarrollo, y la 3 para los tests.
Mario Pérez 4 noviembre 2008, 12:09
Y en firefox, si ya tenéis instalada la extensión Web DeveloperToolbar (que creo que ya no descubro a nadie :P) se puede acceder a la estructura en “Information” > “Document Outline”.
@demixo: Yo también creo que el nombre del sitio con un strong o em va bien, salvo en la home del sitio, claro. Si lo haces por los motores de búsqueda, ya estás incluyendo ese texto en el title de la página, que a todos los efectos sería un encabezado por encima del h1, ¿no? ;)
Un saludo