La importancia de la partida niveles de tecnología asistiva

La especificación HTML describe seis elementos de encabezamiento: h1, h2, h3, h4, h5 y h6. El número en cada uno de estos elementos de partida refleja su prioridad, con h1 siendo la más general y h6 el más específico.

¡Esto es algo importante saber! Encuesta de lector de pantalla de WebAIM 2017 nos dice que navegando a través de las partidas es la forma más importante de personas que dependen de la tecnología asistiva localizar información. Debido a esto, es importante elaborar rúbricas de su sitio web correctamente.

A11y desde el principio

Este tutorial es parte de la accesibilidad Web: la guía de aprendizaje, donde hemos recogido una serie de tutoriales, artículos, cursos y libros electrónicos, para ayudarle a entender la accesibilidad web desde el principio.

Cognición

Antes de adentrarnos en el meollo de las obras de tecnología como apoyo, hay una razón que nuestros medios impresos usa cosas como capítulos, secciones y subsecciones y saltos de escena. Repartir el contenido en trozos es más fácil de entender, asimilar, retener y referencia.

Mientras que la web no es impresión, pedir todas las cosas buenas de él, elementos de encabezamiento HTML son análogos a estos convenios de impresión. Es una de esas cosas que todo el mundo toma para concedido, pero ayuda a salir un montón de gente. Preocupaciones cognitivas están muy extendidas y superan todas las otras formas de discapacidad. Agrupar el contenido en trozos lógicos ayuda a todos, desde personas que tienen una condición biológica como demencia a las personas experimentar deterioro situacional tales como la privación del sueño o aprender una nueva habilidad.

Navegar por título

Ciertos tipos de tecnología de asistencia (incluyendo pero no limitado a, los lectores de pantalla) permiten a las personas saltar de partida a partida en una página. Es el equivalente de lo que la gente que no utiliza tecnología asistiva hace cada día, revoloteando alrededor de una página para obtener la esencia general, parando cuando se encuentra la información que están buscando.

Generación de listas de encabezamientos

Algunas tecnologías de apoyo pueden tomar estos títulos y convertirlos en una lista ordenada. Esta lista se puede utilizar para determinar rápidamente el significado general de la página.

Si no mantiene una secuencia lógica, dicen pasar de nivel de título uno a título de nivel tres sin declarar entre un nivel de partida de dos, puede crear un potencialmente confuso, definitivamente molesta experiencia para la persona que se basa en las partidas a navegar. Esta diferencia en la secuencia lógica Coloque la carga sobre el usuario, obligándolos a utilizar otros más tiempo y esfuerzo-intensivos métodos para navegar para determinar la lógica a la estructura general de la página (si los hay) y si el contenido que necesitan está realmente presente en la página.

Encabezamientos de primer nivel

Otra cosa importante que podemos hacer es garantizar que existe solamente un título de primer nivel por página. Esta partida debe describir el objetivo principal del contenido de la página. Por ejemplo, una página sobre la historia de pastelería francesa podría tener un encabezado de nivel primer escrito como esto:

1

<h1>The history of French pastry</h1>

2

<p>…</p>

El algoritmo de esquema de documento (inexistente)

Por desgracia, es un error que se pueden utilizar los títulos de primer nivel para el inicio de cada contenido sección elemento de una página, confiando en el explorador para averiguar el resto mediante el algoritmo de esquema del documento. Este algoritmo es ficción especulativa, en el momento de la publicación de este artículo todavía tiene que ser implementado por cualquier navegador. Debido a esto, debemos honrar la prioridad de distritos electorales y utilizar los elementos de partida.

Comprendidos en otras parte

Nivel partidas dos a seis debe seguir el primer encabezado de nivel y ser creado en un orden secuencial que describe los principales puntos de discusión del contenido de la página.

Por ejemplo, esta es la estructura de partida para este artículo:

1. La importancia de la partida niveles de tecnología asistiva
1. Cognición
2. Navegar por título
1. Generación de listas de encabezamientos
2. Encabezamientos de primer nivel
1. El algoritmo de esquema de documento (inexistente)
3. Comprendidos en otras parte
4. Exceso que describe
5. Otros servicios
3. Peinado
1. Semántica
2. Sentido práctico
1. Utilidad de estilos
2. RESET
3. De nombres
4. Terminando: tomar un momento

Leyendo esta lista eres capaz de determinar rápidamente lo que trata este artículo. Bastante limpio, ¿EH?

La otra cosa que destacar es que las partidas, como formatos jerárquicos como JSON — pueden anidarse dentro de otras partidas, siempre que lógicamente el progreso. Dentro de un encabezado de segundo nivel puede utilizar múltiples títulos de tercer nivel. Cada una de estas subpartidas puede, a su vez, han anidado los subtítulos de cuarto nivel.

Cuando haya terminado con un tema puede cerrar sus títulos anidados. Este es el único lugar donde es aceptable el "saltarse" niveles de partida, terminas discutiendo un concepto específico y volver a un tema más general.

1. H1 la historia de la pastelería francesa
1. momentos importantes de H2
1. H3 el siglo 16
1. Hojaldre de H4
2. Oublies H4
2. H3 el siglo 17
1. H4 Foliated pastelería
2. H4 batida crema
1. chef de H5 el príncipe de Condé
3. H3 el siglo 18
1. Macarons de H4
4. H3 el siglo 19
5. H3 el siglo 20
2. personas importantes de H2
1. H3...

Este ejemplo demuestra cómo es válido tener un título de quinto nivel (chef del príncipe de Condé) seguido de un título de tercer nivel (siglo 18), mientras los títulos del padre están en orden secuencial. Había precedido un título de tercer nivel el título de quinto nivel, hubiera sido válido.

Exceso que describe

Con muchos títulos puede crear una experiencia abrumadora para la persona que depende de los lectores de una pantalla para navegar. Esto puede parecer un poco contra-intuitivo al principio, considerando sólo dijo las partidas lo importantes son como una ayuda navegacional.

Piénsenlo de esta manera: mucho como demasiadas opciones de navegación visual de una página pueden afectar negativamente el enfoque y la atención de una persona, muchos títulos genera "ruido" que distrae y ofusca el punto principal que intenta transmitir.

No hay ninguna regla set para Cuántos títulos son demasiados. Depende totalmente de lo que es el contenido, y cuánto de ella está presente. Por ejemplo, una receta puede necesitar sólo el nombre del plato, sus ingredientes y las instrucciones, mientras que un papel académico puede requerir un desglose mucho más matizado.

Otros servicios

Una estructura de partida buena beneficia más que las personas que utilizan tecnología de apoyo. Puesto que las partidas tienen significado semántico, otros servicios pueden enganchar en este programático Descripción del contenido y recontextualizar diversas formas fáciles de usar. Por ejemplo, aquí es lo que hace el motor de búsqueda Bing con páginas bien elaboradas:

Mucho como lectores de pantalla, servicios como Google Docs y Dropbox papel generará automáticamente una lista ordenada de las partidas para que pueda rápidamente comprender y navegar por un documento. Muchos procesadores de textos también puede generar una tabla dinámicamente actualizado de contenido de las partidas, una tarea de lo contrario aburrida y desperdiciador de tiempo. Y gracias a la interoperabilidad de HTML, incluso nos podemos recrear este comportamiento navegar por partida como una extensión de navegador!

Peinado

Una cosa muy frecuentemente parece olvidar es que se pueden aplicar clases CSS a título de elementos, al igual que cualquier otro elemento HTML declarado dentro del cuerpo.

Semántica

La razón por la que estoy mencionando esto es que los elementos de partida se utilizan debido a su apariencia ("Ooh! Me gusta el color y la fuente de la h3, que usaré"), y no qué prioridad de contenido que describen (Brioche es un tipo de bollería). Es un problema muy extendido.

En un mundo idealizado de la pureza académica, honramos la honradez material de partida elementos por el tamaño y estilo según la jerarquía que describen.

However, this is the real world. Modern websites and web apps are complicated things worked on by many different kinds of people, who all have different levels of experience, interest, familiarity, and capability when designing and coding.

Practicality

The real world may call for a fifth level heading that needs to look like it is a second-level heading, or something entirely new. In these situations it’s better to preserve the underlying logical page structure and modify the heading’s visuals instead:

1

<h5 class="heading-primary--marketing">

2

  Expert care at a reasonable price

3

</h5>

It’s a trade-off, and an acknowledgment that the real world is complicated. This approach favors preserving the important part: intuitive and efficient navigation for assistive technology.

Utility Styles

Methodologies such as utility styles allow for an even more flexible approach to tweaking a header’s visuals:

1

<h2 class="u-font-size-tiny u-color-gray u-line-height-tight">

2

  Terms and Conditions

3

</h2>

For this example, I’m declaring a series of small tweaks to adjust the presentation of the heading until I get the desired visual appearance. You’ll generally encounter Utility styles on larger state-driven websites and web apps, where the classes’ low specificity help guarantee consistency.

Reset

To help reinforce using properly ordered and nested headings, it may even be worth using a heading style reset to keep all headings without a class declared on them looking the same.

1

h1,

2

h2,

3

h3,

4

h4,

5

h5,

6

h6 {

7

  color: inherit;

8

  font-size: 1em;

9

  line-height: inherit;

10

  margin: 0;

11

  padding: 0;

12

  vertical-align: baseline;

13

}

This is a little defensive design that helps encourage thinking about how a document’s structure is shaped over how it looks. It is intended to be declared after an imported CSS reset, so it can override the reset’s opinions.

Naming

The second hardest problem in computer science is naming things. The first is admitting you don’t know something. I won’t presume to know the best way to name heading styling classes for your website or web app. However, if you’re using a non-utility styles-based approach, I would recommend not naming them .h1, .h2, .h3, etc.

The trouble with this approach is people not familiar with the codebase might interpret these class names as instructions that dictate needing to match class name with heading level. This will reinforce the “how it looks” over the “what it describes” problem.

I’ve also encountered situations where it reinforces that it’s acceptable to use HTML other than heading elements to author headings (“Ah, I can make this div look like a h5!”). Not great!

Wrapping up: Take a Moment

The WebAIM’s 2017 Screen Reader survey also tells us that missing or improper headings is one of the ten most problematic issues experienced by people who rely on assistive technology to navigate the web.

This is a widespread accessibility problem with an easy fix. Take a little time to review your website or web app’s pages to see if your heading structure describes the page accurately, and that this description follows a logical order—it could be as easy as shifting some numbers around!