Accesibilidad: La navegación de la página principal contiene encabezados h2, el encabezado h1 está debajo.
Considere este marcado:
<!doctype html>
<html>
<head>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">
<h2>Home</h2>
</a>
</li>
<li>
<a href="/other">
<h2>Other</h2>
</a>
</li>
</ul>
</nav>
</header>
<main>
<h1>Page Title</h1>
</main>
</body>
</html>
Este marcado está “bien”, pero si lo entendí correctamente, no es accesible ni semánticamente correcto/recomendado. El problema es que el elemento h2 aparece antes que el elemento h1, lo que crea un esquema de documento confuso:
1. Cuerpo sin título
1. Inicio
2. Otro
2. Page Title
Sin embargo, el esquema de documento obviamente destinado es el siguiente:
1. Page Title
1. Inicio
2. Otro
La manera ingenua de lograr esto sería simplemente “mover” todo el elemento nav a algún lugar después del elemento h1, dentro del elemento main o después de él. Pero esto no es cómo quiero que se vea mi página, obviamente quiero que mi navegación esté por encima del contenido principal de mi página. Por supuesto, podría usar CSS para mover de alguna manera el elemento nav visualmente hacia arriba, pero eso tampoco parece correcto.
Mi pregunta es: ¿cuál es la solución más común, pero accesible, a este “dilema”? Tenga en cuenta que definitivamente quiero que el elemento nav siga usando el elemento h2 (o cualquier otro nivel de título), ya que esa es, según mi conocimiento, la manera “semántica” recomendada. De esta manera, los enlaces de navegación también aparecerán en el esquema del documento. ¿Hay alguna manera de simplemente indicar a un lector de pantallas o un navegador que haya algunos títulos que deben “intercambiar” de posición en el esquema de documento, tal vez a través de algunos atributos aria-? ¿Hay alguna alternativa que me falte?
Una solución que se me ocurrió, pero que me “siente” mal:
<!doctype html>
<html>
<head>
</head>
<body>
<header>
<h1>
Page Title
</h1>
<nav>
<h2>
Navigation
</h2>
<ul>
<li>
<a href="/">
<h3>Home</h3>
</a>
</li>
<li>
<a href="/other">
<h3>Other</h3>
</a>
</li>
</ul>
</nav>
</header>
<main>
<h2>Main Content Title</h2>
</main>
</body>
</html>
Esto se siente un poco verboso pero al menos da como resultado un esquema de documento correcto. ¿Es esta realmente la única forma de resolver mi problema?
davy.ai
Una solución común y accesible a este dilema es utilizar CSS para posicionar visualmente la navegación encima del contenido principal, mientras se mantiene el esquema del documento correctamente. Esto se puede lograr usando las propiedades de diseño CSS
flexogridpara reordenar los elementos visualmente mientras se mantiene la estructura HTML intacta. Por ejemplo:Esto moverá el elemento
navvisualmente por encima del elementoh1, manteniendo el esquema del documento correcto:Esta solución tiene la ventaja adicional de reducir la cantidad de marcado innecesario requerido para lograr el resultado deseado. Sin embargo, es importante probar esta solución a fondo con tecnologías de asistencia para garantizar que el orden revisado se transmita correctamente a los usuarios.