Gestión de niveles de encabezado en sistemas de diseño

Una cosa que siempre me viene a la mente, en investigaciones, pruebas y conversaciones cotidianas con colegas y amigos, es cuán importantes son los encabezados. Para los usuarios de lectores de pantalla, los encabezados describen las relaciones entre secciones y subsecciones y, cuando se usan correctamente, proporcionan un esquema y un medio de navegación. Los encabezados son infraestructura.

Aplicar el nivel de encabezado correcto es una cuestión de contexto. Por ejemplo, dos encabezados sucesivos del mismo nivel describen dos secciones relacionadas en el esquema del documento. Cuando el segundo de los encabezados sucesivos es un nivel superior, describe una subsección que pertenece a la sección del primer encabezado.

texto alternativo = en la imagen, hay dos cuadros uno tras otro, marcados como hermanos de nivel h2. Dentro del segundo cuadro hay un tercer cuadro marcado como una subsección de nivel h3.

HTML5 prometió automatizar estas relaciones al diferir el algoritmo de anidamiento a s (u otros elementos de seccionamiento). La idea era que, al anidar literalmente los elementos

principales en el DOM, sus niveles de encabezado se ajustarían en el árbol de accesibilidad de forma gratuita. (El árbol de accesibilidad es la interpretación del DOM comunicado al software, como los lectores de pantalla).


  

Encabezado de sección

       ` para lectores de pantalla ->     

Encabezado de subsección

  

Desafortunadamente, hasta la fecha, ningún proveedor importante de navegadores ha implementado significativamente este llamado "algoritmo de esquema de documento". Y si el navegador no lo expone, los lectores de pantalla no pueden comunicarlo. El último ejemplo de código simplemente no funcionaría.

Aquellos de nosotros interesados ​​en crear esquemas de documentos accesibles, por lo tanto, estamos atrapados eligiendo niveles de encabezado (

a

) independientemente de las s que podríamos estar empleando.


  

Encabezado de sección

       

Encabezado de subsección

  

Esto plantea un problema particular al desarrollar bibliotecas de patrones para sistemas de diseño. Si bien los patrones / componentes individuales dentro de un sistema de diseño pueden y deben usar encabezados, es difícil saber qué niveles de encabezado deben tomar. Como módulos aislados dentro de una biblioteca de patrones, el contexto del componente dentro de una página es indeterminado. Para los componentes reutilizables, el contexto cambiará, junto con el nivel requerido.

texto alternativo = En la imagen, se muestra que un componente es reutilizable en diferentes contextos de una página. Dependiendo del contexto, el componente debería tener un nivel de encabezado h2 o h3.

El apoyo de nivel

Las API como React y Vue nos permiten incluir manualmente propiedades (o "accesorios") para nuestros componentes en la instanciación. Esto nos permite aplicar ciertas configuraciones a la instancia del componente, para ser utilizadas internamente.

Al admitir un nivel de apoyo, podemos permitir a los autores ajustar el nivel de encabezado del componente en el momento de la creación de instancias, cuando conocen el contexto que lo rodea. Así es como se aplicaría en el componente externo:

 

Internamente, debemos tomar el nivel prescrito y usarlo para aumentar el encabezado principal del componente. Hay un par de formas de hacer esto. La primera forma sería emplear alguna lógica que elija el elemento de encabezado correcto (

a

) para nosotros. En React, podemos usar un componente como variable:

render () {
  const H = 'h' + this.props.level;
  regreso (
    
       Un título de algún nivel       

Lorem ipsum, etc.

    
  ); }

Esto se volverá rápidamente difícil de manejar cuando se mantenga una estructura de múltiples encabezados dentro del componente (vea la sección siguiente). En cambio, podemos cambiar el nivel del elemento de encabezado en el árbol de accesibilidad directamente, a través de la propiedad de nivel aria.

Dos cosas a tener en cuenta:

  • Un elemento

    se utiliza como un "valor predeterminado sensible". Todas las subsecciones de primer nivel que siguen el encabezado principal de la página

    serían del segundo nivel (

    ). Cuando no se proporciona el nivel prop, el nivel aria no se aplica y el segundo nivel implícito actúa como predeterminado (el valor nulo significa que el atributo no se representa).

  • El

    ya tiene el rol de encabezado implícito, por lo que el uso de role = "header" sería redundante. Si hubiéramos usado un
    para definir nuestro encabezado, role = "header" sería necesario junto con el nivel aria. Esto no se recomienda porque el soporte es relativamente escaso. Al menos donde no se admite el nivel aria, todavía tenemos un encabezado

    , incluso si no es el nivel correcto. Los encabezados, de cualquier nivel, se pueden navegar entre lectores de pantalla como NVDA o JAWS usando la tecla h.

Múltiples encabezados

En algunos casos, el subárbol que constituye nuestro componente puede incluir múltiples encabezados, que describen una microestructura dentro del documento. La codificación dura de cada nivel a través de su propio accesorio sería detallada y propensa a errores por parte del autor.


 

En cambio, podemos mantener la misma estructura aplicando algo de aritmética simple.

Encabezado de texto

Lorem ipsum.

Subtítulo de texto

Lorem ipsum.

Texto de subtítulo anidado

Lorem ipsum.

Ahora el autor solo necesita aplicar un nivel en el momento de la creación de instancias (si es necesario) y toda la estructura cambia en consecuencia. Simple, pero efectivo.

Automatización completa

¿Sabía que un elemento se discutió originalmente ya en 1991, y automatizaría los niveles de encabezado de la forma en que se supone que hace el legendario "Algoritmo de esquema de documento"? De hecho, todavía se está discutiendo.

Como me demostró la eminente Sophie Alpert, es posible emular este comportamiento de bosquejo automatizado utilizando la relativamente nueva API de contexto de React.

La belleza del contexto es que usted puede, para citar los documentos, "pasar datos a través del árbol de componentes sin tener que pasar accesorios manualmente en todos los niveles". En la práctica, esto significa que podemos ajustar el valor del nivel simplemente anidando componentes.

Primero tenemos que inicializar el contexto.

Nivel constante = React.createContext (2);

Tenga en cuenta el 2 que establece el nivel predeterminado, como en los ejemplos anteriores. Ahora solo necesitamos configurar la sección y los componentes H.

Sección de funciones (accesorios) {
  regreso (
     {nivel =>
      
        {props.children}
      
    } 
  );
}
función H (accesorios) {
  regreso (
     {nivel => {
      const Heading = 'h' + Math.min (nivel, 6);
      return ;
    }} 
  );
}

La Sección consume el valor de nivel para ese nivel de anidación (a través de Level.Consumer) y luego ajusta el nivel para cualquier elemento secundario (nivel + 1).

Cuando cualquier elemento H consume el nivel contextual, Math.min asegura que no se representen encabezados de un nivel superior a 6. Un o no se interpretaría como un encabezado por el navegador, lo que provocaría un análisis y, por lo tanto, deficiencias de accesibilidad.

Además de la capitalización (¡y Reaccionar!) Ahora podemos estructurar algo muy cercano a lo que TimBL imaginó originalmente:

Documento de función (accesorios) {
  regreso (
    
      

Automatización de la profundidad de rumbo

                Nivel 2          Hermano Nivel 2                     Nivel 3                        Nivel 2       

Lorem ipsum dolor sit, etc.

    
  ); }

Se puede hacer que cualquier componente que use Level.Provider y Level.Consumer respete el esquema contextual. Para los componentes que envuelven contenido pero no se pueden considerar subsecciones semánticas, el nivel solo se puede pasar y reutilizar tal cual, no se incrementa.

Estilo

La forma en que aplica el estilo depende de su estrategia. En la mayoría de los casos, el tamaño de fuente del encabezado debe reflejar su posición en la jerarquía, con

como el más grande o el más destacado.

Usando Context, esto se hace automáticamente, representando los diferentes elementos de encabezado. Usando la técnica de nivel aria, necesitaría acoplar los elementos y atributos según el nivel:

h1, [nivel-aria = "1"] {font-size: 3rem}
h2, [aria-level = "2"] {font-size: 2.25rem}
h3, [aria-level = "3"] {font-size: 1.75rem}
/ * etc * /

Cuando desee que la apariencia visual del encabezado del componente no se vea afectada por el contexto, manteniendo una jerarquía accesible, puede aplicar una clase.

 Encabezado de texto 

Usando una biblioteca como Styled Components, crearía nuevos encabezados basados ​​en el componente semántico H y los diseñaría directamente. Solo necesita extender H:

rumbo const = H.extend`
  tamaño de fuente: 2rem;
`;

Los títulos siguen siendo importantes

Algunos desarrolladores de aplicaciones web tienen la costumbre de prescindir de todo lo que consideran "de una era de documentos simples". Es cierto que los títulos se originan en una tradición de marcar documentos estáticos y prosaicos como los que podría escribir en MS Word o similares. Pero pensar que una estructura de encabezado sólida no es necesaria en una interfaz de aplicación es malinterpretar qué son realmente los encabezados.

Los encabezados son etiquetas para secciones (o "áreas" si lo prefiere) que conforman una interfaz. Pueden etiquetar una sección de información o un conjunto de controles interactivos. Todo es lo mismo. Etiquetar las secciones de su interfaz es tan importante como etiquetar sus controles individuales. Sin etiquetas, la gente simplemente no sabe para qué sirve nada.

Para los usuarios de lectores de pantalla, los encabezados no son solo etiquetas, sino un mecanismo de "derivación" que les permite navegar entre diferentes áreas. Sin encabezados, tienen que pasar a través de cada elemento a su vez, para llegar de un lugar a otro. Arduo y desagradable.

Los usuarios de teclados que no ejecutan un lector de pantalla que admita estos accesos directos pueden encontrar su experiencia bastante ardua, especialmente cuando hay una gran cantidad de controles interactivos para pasar. Afortunadamente, una extensión de navegador de Matt Atkinson está disponible para ayudar. Proporciona accesos directos no a encabezados, sino a elementos de referencia (

,
,
, etc.) pero también se está considerando el soporte de encabezados. Las mejores estructuras de documentos (¡y aplicaciones!) Incluyen puntos de referencia y encabezados. Cinturón y tirantes.

Para obtener más información sobre el diseño inclusivo y los sistemas de diseño, consulte https://inclusive-components.design/ y siga Componentes inclusivos en Twitter.