Share
La especificación HTML describe seis elementos de encabezado: h1, h2, h3, h4, h5, y h6. El número en cada uno de estos elementos del encabezado refleja su prioridad, con h1 siendo el más general y h6 siendo lo mas especifico.
¡Esto es algo importante para saber! La encuesta del lector de pantalla 2017 de WebAIM nos dice que navegar a través de los encabezados es la forma más importante en que las personas que dependen de la tecnología de asistencia localizan la información. Debido a esto, es importante elaborar correctamente los encabezados de su sitio web.
Este tutorial es parte de Accesibilidad web: la Guía de aprendizaje completa, donde hemos recopilado una serie de tutoriales, artículos, cursos y libros electrónicos para ayudarlo a comprender la accesibilidad web desde el principio..
Antes de entrar en el meollo de la cuestión de cómo funciona la tecnología de asistencia, hay una razón por la que nuestros medios impresos utilizan cosas como capítulos, secciones y subsecciones, y descansos de escena. Dividir el contenido en partes hace que sea más fácil de entender, digerir, retener y consultar..
Trozos de contenido, del periódico The Guardian.Si bien la web no está impresa, toma prestadas todas las cosas buenas de los elementos del encabezado HTML: son análogos a estas convenciones de impresión. Es una de esas cosas que todos dan por sentado, pero ayuda a un montón de personas. Las preocupaciones cognitivas son generalizadas y superan cualquier otra forma de discapacidad. Agrupar el contenido en partes lógicas ayuda a todos, desde personas que tienen una condición biológica como la demencia hasta personas que experimentan trastornos de la situación como la falta de sueño o el aprendizaje de una habilidad completamente nueva..
Ciertos tipos de tecnología de asistencia (incluidos, entre otros, los lectores de pantalla) permiten a las personas saltar de un título a otro en una página. Es el equivalente a lo que hacen las personas que no usan la tecnología de asistencia todos los días, revoloteando alrededor de una página para obtener una idea general, deteniéndose cuando encuentran la información que están buscando..
Algunas tecnologías de asistencia pueden tomar estos encabezados y convertirlos en una lista ordenada. Esta lista se puede utilizar para determinar rápidamente el significado general de la página.
Lista generada de encabezados en la página de WikipediaSi no mantiene una secuencia lógica, digamos que pasar del nivel uno al título tres sin declarar un nivel dos de título intermedio puede crear una experiencia potencialmente confusa y molesta para la persona que confía en los títulos para navegar. Esta brecha en la secuencia lógica supondrá una carga para el usuario, lo que obligará a utilizar otros métodos que requieren más tiempo y esfuerzo para navegar para determinar la lógica de la estructura general de la página (si existe) y si el contenido que necesitan es realmente presente en la página.
Otra cosa importante que podemos hacer es asegurarnos de que solo haya uno Título de primer nivel por página. Este encabezado debe describir el punto principal del contenido de la página. Por ejemplo, una página sobre la historia de la pastelería francesa podría tener un encabezado de primer nivel escrito así:
La historia de la pastelería francesa.
...
Desafortunadamente, hay una idea errónea de que puede usar encabezados de primer nivel para el inicio de cada elemento de sección de contenido en una página, confiando en el navegador para averiguar el resto a través del algoritmo de resumen del documento. Este algoritmo es una ficción especulativa: en el momento de la publicación de este artículo, aún no se ha implementado. alguna navegador. Debido a esto, debemos respetar la Prioridad de las Constituyentes y utilizar los otros elementos del encabezado.
Los encabezados del nivel dos al seis deben seguir al encabezado del primer nivel, y deben ser escritos en un orden secuencial que describa los principales puntos de conversación del contenido de la página..
Por ejemplo, esta es la estructura de encabezado de este artículo:
Al leer esta lista, puede determinar rápidamente de qué trata este artículo. Bastante limpio, eh?
La otra cosa que vale la pena señalar es que los encabezados, al igual que los formatos jerárquicos como JSON, se pueden anidar dentro de otros encabezados, siempre que progresen de forma lógica. Dentro de un encabezado de segundo nivel puede usar múltiples encabezados de tercer nivel. Cada uno de estos subtítulos puede, a su vez, tener subtítulos anidados de cuarto nivel..
Cuando haya terminado con un tema, puede cerrar los encabezados anidados. Este es el único lugar donde "saltarse" los niveles de encabezado es aceptable; ya ha terminado de analizar un concepto específico y volver a un tema más general..
Accentsconagua
h1 La historia de la pastelería francesa.h2 Momentos importantesh3 El siglo xvih4 Hojaldreh4 Oubliesh3 El siglo xviih4 Pastelería Foliadah4 Crema batidah5 El chef del príncipe de condéh3 El siglo 18h4 Macaronsh3 El siglo 19h3 El siglo 20h2 Gente importanteh3... Este ejemplo demuestra cómo es válido tener un encabezado de quinto nivel (el chef del Príncipe de Condé) seguido de un encabezado de tercer nivel (el siglo XVIII), siempre que los encabezados de los padres estén en orden secuencial. Si un encabezado de tercer nivel precediera al encabezado de quinto nivel, habría sido inválido.
Usar demasiados títulos puede crear una experiencia abrumadora para que una persona que confía en un lector de pantalla navegue. Esto puede parecer un poco contraintuitivo al principio, considerando que acabo de decirles cuán importantes son los encabezados como ayuda para la navegación..
Piénselo de esta manera: como muchas opciones de navegación visual en una página pueden afectar negativamente el enfoque y la atención de una persona, demasiados encabezados crean “ruido” que distrae y confunde el punto principal que intenta transmitir..
No hay una regla establecida para cuántos encabezados son demasiados. Depende completamente de lo que es el contenido y de cuánto está presente. Por ejemplo, una receta solo puede necesitar el nombre del plato, sus ingredientes e instrucciones, mientras que un documento académico puede requerir un desglose mucho más matizado..
Una buena estructura de encabezado beneficia más que solo a las personas que usan tecnología de asistencia. Dado que los encabezados tienen un significado semántico, otros servicios pueden engancharse en esta descripción programática del contenido y recontextualizarlo de varias formas fáciles de usar. Por ejemplo, esto es lo que hace el motor de búsqueda Bing con páginas bien construidas:
Resultado del motor de búsqueda BingAl igual que los lectores de pantalla, los servicios como Google Docs y Dropbox Paper generarán automáticamente una lista ordenada de títulos para que pueda comprender y navegar rápidamente por un documento. Muchos procesadores de texto también pueden generar rápidamente una tabla de contenidos actualizada dinámicamente a partir de encabezados, una tarea que de otra manera sería tediosa y lenta. Y gracias a la interoperabilidad de HTML, incluso podemos recrear este comportamiento de navegación por encabezado como una extensión del navegador.!
Una cosa que todos a menudo olvidamos es que las clases de CSS se pueden aplicar a los elementos de encabezado, al igual que cualquier otro elemento HTML declarado dentro de cuerpo.
La razón por la que menciono esto es que los elementos de encabezado se usan comúnmente debido a la forma en que Mira("Ooh! Me gusta el color y la fuente de la h3, Usaré eso ".), Y no la prioridad de contenido que describir (Brioche es una especie de vienesa). Es un problema generalizado.
En un mundo idealizado de pureza académica, honraríamos la honestidad material de encabezar los elementos al clasificarlos y diseñarlos de acuerdo con la jerarquía que describen..
Sin embargo, este es el mundo real. Los sitios web modernos y las aplicaciones web son cosas complicadas en las que trabajan diferentes tipos de personas, que tienen diferentes niveles de experiencia, interés, familiaridad y capacidad a la hora de diseñar y codificar..
El mundo real puede requerir un título de quinto nivel que se vea como si fuera un título de segundo nivel, o algo completamente nuevo. En estas situaciones, es mejor conservar la estructura de la página lógica subyacente y, en su lugar, modificar las imágenes del encabezado:
Atención experta a un precio razonable.
Es una compensación, y un reconocimiento de que el mundo real es complicado. Este enfoque favorece la conservación de la parte importante: la navegación intuitiva y eficiente para la tecnología de asistencia.
Las metodologías, como los estilos de utilidad, permiten un enfoque aún más flexible para ajustar las imágenes de un encabezado:
Términos y Condiciones
Para este ejemplo, estoy declarando una serie de pequeños ajustes para ajustar la presentación del encabezado hasta que obtenga la apariencia visual deseada. Por lo general, encontrará estilos de utilidad en sitios web y aplicaciones web más grandes impulsados por el estado, donde la baja especificidad de las clases ayuda a garantizar la consistencia.
Para ayudar a reforzar el uso de encabezados correctamente ordenados y anidados, incluso puede valer la pena usar un reinicio de estilo de encabezado para mantener todos los encabezados sin una clase declarada con el mismo aspecto..
h1, h2, h3, h4, h5, h6 color: heredar; tamaño de letra: 1em; línea-altura: heredar; margen: 0; relleno: 0; alineación vertical: línea de base;
Este es un pequeño diseño defensivo que ayuda a alentar a pensar cómo está la estructura de un documento. conformado sobre cómo miradas. Está previsto que se declare después de un restablecimiento de CSS importado, por lo que puede anular las opiniones del restablecimiento.
El segundo problema más difícil en informática es nombrar cosas. Lo primero es admitir que no sabes algo. No presumiré saber la mejor manera de nombrar las clases de estilo de encabezado para su sitio web o aplicación web. Sin embargo, si está utilizando un enfoque basado en estilos no utilitarios, le recomendaría no nombrarlos .h1, .h2, .h3, etc.
El problema con este enfoque es que las personas que no están familiarizadas con el código base podrían interpretar estos nombres de clase como instrucciones que dictan la necesidad de hacer coincidir el nombre de la clase con el nivel de encabezado. Esto reforzará el "cómo se ve" sobre el problema de "lo que describe".
También me he encontrado con situaciones en las que se refuerza que es aceptable utilizar HTML que no sea elementos de encabezado para crear encabezados ("Ah, puedo hacer esto div parece un h5!”). No es bueno!
La encuesta del lector de pantalla 2017 de WebAIM también nos dice que los encabezados faltantes o impropios es uno de los diez problemas más problemáticos que experimentan las personas que dependen de la tecnología de asistencia para navegar por la web.
Este es un problema de accesibilidad generalizado con una solución fácil. Tómese un poco de tiempo para revisar el sitio web o las páginas de la aplicación web para ver si su estructura de encabezados describe la página con precisión, y que esta descripción sigue un orden lógico: podría ser tan fácil como cambiar algunos números.!
