Hache uno, hache dos, hache tres

En el momento de querer hacer una página válida para las directrices de accesibilidad web WAI nos topamos con un problema que a muchos les debe traer dolores de cabeza. Esto tiene que ver con los encabezados. Esto suele pasar en general por el desconocimiento a la hora de estructurar un documento. Los desarrolladores, tanto como los diseñadores, a veces no ponen ningún tipo de cabecera, así como también las utilizan únicamente con fines gráficos.

Implementando todo de esta forma no se alcanza el nivel de conformidad exigido.

Por norma, todos los documentos tienen títulos, secciones, capítulos. Esto es un modo de organización ya conocido y es raro que nadie lo aplique correctamente utilizando solo con las cabeceras de HTML. La forma correcta indica que debemos utilizar etiquetas de cabeceras del tipo h1 a h6. Todos los documentos deben contener al menos una (1) cabecera h1, así el resto sea simplemente texto.

La regla WAI indica otro punto interesante, que suele provocar la inconformidad de todos los documentos que realizan los desarrolladores:

Since some users skim through a document by navigating its headings, it is important to use them appropriately to convey document structure. Users should order heading elements properly. For example, in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3). Do not use headings to create font effects; use style sheets to change font styles for example.

Aquí lo explica de forma clara. El uso de cabeceras debe aplicarse correctamente. No se puede uno saltar un nivel porque el jefe lo dijo, ni tampoco porque quedaba más bonito. Desde que podemos controlar gráficamente todos estos aspectos desde las plantillas de CSS, no existe la necesidad de usar el h4 a favor del h3 porque se veía más pequeñito y quedaba mejor. La secuencia es una obligación según las pautas y, contrariamente a lo que estás pensando ahora, no existen limitaciones que te obliguen a utilizarlas de otra forma.

En un documento, puedes aplicar cabeceras de forma errónea, este es un ejemplo que traerá problemas:

H1 → h2 → h2 → h4 → h2 → h3 → h4

Como podemos apreciar, me he saltado un paso cuando estoy aplicando un h4 cuando por serie debe ir un h3. Si antes tenía un h2, entonces debo terminar aplicando un h3 y seguir con un h2, h3 o un h4. Una secuencia bien armada que no da problemas:

H1 → h2 → h2 → h3 → h2 → h3 → h3 → h4 → h5 → h4 → h3 → h4 → h2 → h3

Las normas permiten que la secuencia se reinicie en cualquier punto. Esto es normal y muy aplicado. No podemos, por ejemplo, utilizar h1 cada vez que queremos empezar un nuevo capitulo si ya existe uno que le da una importancia grande al documento en general. Y recuerda, si te saltas la secuencia en un punto no valida el documento.

Para lograr un buen documento, hay que tener orden empezando desde el contenido. Debe tener una coherencia de organización, para que la persona con discapacidad como para los ultra-expertos sin discapacidades no tengan problemas de organización y comprensión del texto.

El uso de las cabeceras es un tema interesante. He visto aplicaciones realmente interesantes en lo que programación se refiera. Cómo se puede analizar un documento y crear índices en tiempo real sacando los datos de las cabeceras. Algo que se puede apreciar utilizando algunos de los wikis disponibles en internet.

15 Respuestas a la entrada “Hache uno, hache dos, hache tres”

Escrito por Oscar Fernandez
Noviembre 15th, 2005 at 10:40 pm

Entonces los h3 del panel derecho (”Secciones”) deberían ser h2 para quedar debajo del h1 minid.net y no debajo del h2 con el título de esta entrada.

Escrito por mini-d
Noviembre 15th, 2005 at 11:14 pm

Nop, no hace falta. Ed minid.net uso otra organización. H1 para el título, h2 para los posts y para los títulos de sección importantes… podría usar h3, pero si lo hago podría interpretarse como un punto siguiente del último h2.

Escrito por Octavio
Noviembre 15th, 2005 at 11:49 pm

Los H1..H6 se mantienen así más por razones históricas que prácticas. Esta regla pudiera ser más flexible por parte de la WAI o del estándar de HTML, pero sobre todo, del XHTML. Me gustaría que fuera modificable en cierto modo…

Y el problema es el que presenta Oscar. Yo estoy de acuerdo con él. Uno debe poder tomar los H1..H6 y trazar una tabla de contenido con subniveles. En el caso de tu página quedaría así:

+ MINID.NET
+ Hache uno, hache dos, hache tres
+ 2 Comentarios en “Hache uno, hache dos, hache tres”
+ Deja tu comentario…
+ Más entradas en Minid.net
+ Sobre esta entrada
+ Secciones
+ Categorías
+ Archivos

Y está claro el problema: Ni “más entradas”, ni “secciones”, ni “categorías” ni “archivos” son subtemas del post. Ahí hay una “violación” a la semántica del documento.

Una estructura más adecuada sería:

+ MINID.NET
+ Hache uno, hache dos, hache tres
+ 2 Comentarios en “Hache uno, hache dos, hache tres”
+ Deja tu comentario…
+ Sobre esta entrada
| + Más entradas en Minid.net
| + Secciones
| + Categorías
| + Archivos

O quizá:

+ MINID.NET
+ Hache uno, hache dos, hache tres
+ 2 Comentarios en “Hache uno, hache dos, hache tres”
+ Deja tu comentario…
+ Sobre esta entrada
+ También en Minid.net
+ Más entradas en Minid.net
+ Secciones
+ Categorías
+ Archivos

El problema no es un problema demasiado serio… nada que un poco de programación no pudiera arreglar, pero es un problema gratis, sobre todo para la automatización de documentos. Algunos han propuesto un tag “” o “”, lo cual me parece interesante. Quizá para ese tag debería ser obligatorio el atributo “class”.

——-

Una solución más práctica (para no perder los H1..H6) podría ser una interpretación de un no como un error semántico, sino “un subtema dentro de otro”, simplemente, y que funcionara como “h1 -> h2″, tanto para tabla de contenido como para efectos de interpretación para usuarios con discapacidad.

Dicho de otra manera: desde el punto de vista práctico, me parece mejor solución que se permitan los saltos de nivel, pero desde el punto de vista conceptual, prefiero

Escrito por Octavio
Noviembre 15th, 2005 at 11:51 pm

Oooooooooooooops…. el navegador se comió mis espacios. ¿Cómo podemos arreglarlos?

(Esta es una prueba)

+ MINID.NET
  + Hache uno, hache dos, hache tres
    + 2 Comentarios en âHache uno, hache dos, hache tresâ
    + Deja tu comentarioâ¦
    + Más entradas en Minid.net
    + Sobre esta entrada
    + Secciones
    + Categorías
    + Archivos

(Disculpen. Reenviaré mi comentario bien formateado con espacios duros.)

Escrito por Octavio
Noviembre 15th, 2005 at 11:56 pm

Y el problema es el que presenta Oscar. Yo estoy de acuerdo con él. Uno debe poder tomar los H1..H6 y trazar una tabla de contenido con subniveles. En el caso de tu página quedaría así:

Y está claro el problema: Ni âmás entradasâ, ni âseccionesâ, ni âcategoríasâ ni âarchivosâ son subtemas del post. Ahí hay una âviolaciónâ a la semántica del documento.

Una estructura más adecuada sería:

+ MINID.NET
  + Hache uno, hache dos, hache tres
    + 2 Comentarios en âHache uno, hache dos, hache tresâ
    + Deja tu comentarioâ¦
    + Sobre esta entrada
|   + Más entradas en Minid.net
|   + Secciones
|   + Categorías
|   + Archivos

O quizá:

El problema no es un problema demasiado serioâ¦ nada que un poco de programación no pudiera arreglar, pero es un problema gratis, sobre todo para la automatización de documentos. Algunos han propuesto un tag “<section>” o “<header>”, lo cual me parece interesante. Quizá para ese tag debería ser obligatorio el atributo “class”.

ââ-

Una solución más práctica (para no perder los H1..H6) podría ser una interpretación de un no como un error semántico, sino âun subtema dentro de otroâ, simplemente, y que funcionara como âh1 -> h2â, tanto para tabla de contenido como para efectos de interpretación para usuarios con discapacidad.

Dicho de otra manera: desde el punto de vista práctico, me parece mejor solución que se permitan los saltos de nivel, pero desde el punto de vista conceptual, prefiero “<header class=””

Escrito por mini-d
Noviembre 16th, 2005 at 12:12 am

Ah te referías a esta página. Entiendo. Mirándola, sí… tenés razón. Lo cambiaré en la semana.

Escrito por Oscar Fernandez
Noviembre 16th, 2005 at 12:55 am

Esto lo aprendí cuando supe que el Microsoft Word (y después también el OpenOffice.org) podía hacer los índices o tablas de contenido automáticamente. Fue un tremendo avance, mis amigos aquí todavía los escriben a mano con los puntitos y los números de las páginas.

El validator.w3.org también tiene la opción “Show Outline” en su interface extendida. Ãsenla siempre.

Escrito por alex
Noviembre 16th, 2005 at 1:28 am

Guau, genial explicado por tu parte Diego y también Octavio. Justo un compañero de trabajo me estaba comentado este tema! jaja

Saludos

Escrito por Victor Bracco
Noviembre 17th, 2005 at 1:12 am

Y esta secuencia estaría bien armada?
h1 â h2 â h2 â h3 â h1 â h2

A lo que voy es, qué si lo que hay que respetar en órden en bajada de niveles, pero no importa la subida?
Saludos.

Escrito por mini-d
Noviembre 17th, 2005 at 1:35 am

Sí, está bien.

Escrito por Octavio Alvarez
Noviembre 17th, 2005 at 9:44 am

>Y esta secuencia estaría bien armada?
>h1 â h2 â h2 â h3 â h1 â h2

Qué curioso… Minid y tú lo plantean como una secuencia. En mi cerebro más bien vive más o menos así:

h1 â h2
h2 â h3
h1 â h2

O sea, para mí, no hay relación de padre-hijo entre el h2 y el siguiente h2, ni entre el h3 y el siguiente h1.

En fin, cada cabeza es un mundo.

</offtopic>

Escrito por Octavio Alvarez
Noviembre 17th, 2005 at 9:46 am

(AAAAAAAAAAARGH!!! Sucedió otra vez, el blog comiéndose mis espacios.)

h1 â h2
h2 â h3
h1 â h2

Escrito por Eneko
Noviembre 17th, 2005 at 6:57 pm

Efectivamente, como dice Octavio Alvarez (minid no lo dice pero lo sabe), la jerarquía de títulos Hx es un arbol. Esta jerarquí la podéis encontrar en Word por ejemplo (Titulo1, Titulo2, Titulo3, etc).

Imaginad que leeis un documento de un proyecto. Estos serían los puntos, siguiendo la jerarquía en el orden correcto:

1. Capitulo 1 (H1)
1.1 Subcapitulo (H2)
1.2 Subcapitulo (H2)
1.2.1 Subsubcapitulo (H3)
1.2.2 Subsubcapitulo (H3)
2. Capitulo 2 (H1)
3. Capitulo 3 (H1)
3.1 Subcapitulo (H2)

Es decir, cada seccion puede tener N subsecciones, y estas a su vez N secciones más. Es un arbol de “orden” N, o N-ario.

Lo que no tendría sentido, como todos entenderéis, es hacer un documento tal que así:

1. Capitulo 1 (H1)
1.1.1 Subsubcapitulo (H3)

Eso no encajaría y todos pensaríamos que el punto 1.1 se ha perdido o algo.

Espero que os haya quedado más claro que los diagramas de flechitas…

Escrito por Cristian Manuel Ocampo
Noviembre 17th, 2005 at 7:09 pm

Creo que eneko entrega el mejor ejemplo de utilización de los Hx, haciendo cuenta de que la página es un libro que consta de un título, capítulos, sub-capítulos y sub-sub-capítulos en un orden correlativo, sin importar como se rompe y se vuelve de un sub-capítulo a capítulo. La importancia radica en mantener siempre esa semántica de arbol o como un directorios de un sistema de archivos.

Tal ves de la forma como se trabaja en LaTeX podria ilustrar algo.

En el caso anterior, tal ves el H1 podría ser el título de este documento y los H2 para cada Capítulo y asi sucesivamente.