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

Heydon Pickering investiga cómo darle a un componente de React un título determinado (como h1, h2etc.) dependiendo de su contexto y así garantizar que el DOM siga siendo perfectamente accesible para los lectores de pantalla. ¿Por qué es importante utilizar el título correcto? Heydon escribe en la introducción:

Una cosa que siempre me viene a la mente, en mis investigaciones, pruebas y conversaciones cotidianas con colegas y amigos, es la importancia de 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.

Esto me recuerda una excelente publicación de Amelia Bellamy-Royds donde exploró todos los problemas causados ​​por este ” Dilema del esquema del documento ” o, digamos, lo h1siguiente h3:

Tal como está actualmente, el esquema del documento sólo es de importancia diaria para los usuarios de lectores de pantalla, y esos usuarios actualmente están acostumbrados a lidiar con el desorden de niveles de encabezado erráticos en las páginas web. Estoy seguro de que muchos usuarios de lectores de pantalla apreciarían que se corrigieran los niveles de encabezado. Pero arreglar los encabezados para los usuarios de lectores de pantalla no significa simplemente crear un árbol de encabezados cuidadosamente anidados sin números de nivel omitidos. Significa crear una estructura de encabezado que refleje con precisión el significado pretendido por los creadores de la página web, el significado que los usuarios visuales infieren del estilo y el diseño. Y para lograrlo, debemos considerar cómo se comunica el significado a todos los usuarios de páginas web que no escuchan cada título anunciado con un nivel numérico.

Es sorprendente para mí que los títulos simples y antiguos requieran tanta atención, tanto para abordar los problemas de usabilidad como para las posibles soluciones de desarrollo.