Uno de los aspectos más importantes de la accesibilidad digital es la estructura subyacente de la página. Cuando creas tu sitio web o app con elementos estructurales en lugar de depender solo de los estilos, brindas contexto fundamental a las personas que usan tecnologías de asistencia (AT), como los lectores de pantalla.
Los elementos estructurales sirven para esbozar el contenido en la pantalla, pero también actúan como puntos de anclaje para facilitar la navegación por el contenido.
Cuando usas elementos HTML semánticos, el significado inherente de cada elemento se pasa al árbol de accesibilidad, y la AT lo usa, lo que le da más significado al contenido que los elementos no semánticos. Puede haber casos en los que necesites agregar atributos ARIA adicionales para crear relaciones o mejorar la experiencia general del usuario, pero en la mayoría de los casos, uno de los más de 100 elementos HTML disponibles debería funcionar bastante bien por sí solo.
Si bien este módulo se centra en los elementos estructurales más usados que son fundamentales para la accesibilidad digital, hay ciertos elementos y factores ambientales adicionales que debes considerar cuando compiles la estructura de tu sitio web o app. Estos ejemplos son una introducción al tema, no todo incluido.
Puntos de referencia
Los usuarios de AT dependen de elementos estructurales para brindarles información sobre el diseño general de la página. Cuando divides grandes regiones de contenido, puedes usar roles de puntos de referencia ARIA o los elementos de puntos de referencia HTML más recientes para agregar contexto estructural a tu página.
Los puntos de referencia garantizan que el contenido se encuentre en regiones navegables. Se recomienda que proporciones al menos un punto de referencia por página.
Algunos recursos sugieren combinar puntos de referencia ARIA y HTML para proporcionar una mejor cobertura de AT. Si bien este tipo de redundancia no debería causar problemas a los usuarios, prueba los patrones con un lector de pantalla para estar seguro. En caso de duda, es mejor usar de forma predeterminada solo los elementos de punto de referencia HTML más nuevos, ya que la compatibilidad con navegadores es muy sólida.
Comparemos los elementos de puntos de referencia HTML como asignados con sus roles de punto de referencia de ARIA equivalentes.
| Elemento de punto de referencia HTML | Rol de punto de referencia de ARIA |
|---|---|
<header> |
banner |
<aside> |
complementario |
<footer> |
infodecontenido |
<nav>
|
navigation |
<main> |
principal |
<form> 1 |
formulario |
<section> 1 |
region |
Ahora, comparemos ejemplos de estructura de contenido accesible.
<div>
<div>...</div>
</div>
<div>
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</div>
<div>
<p>© 2022 - Stamps R Awesome</p>
</div>
<header>
<nav>...</nav>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>
Encabezados
Cuando se implementan correctamente, los niveles de encabezado HTML forman un resumen breve del contenido general de la página.
Hay seis niveles de encabezados que podemos usar. El nivel de encabezado uno <h1> se utiliza para la información más importante y principal de la página, y se mueve de manera incremental al nivel de encabezado seis <h6> para la información más baja y menos importante.
La secuencia de los niveles de encabezado es importante. Lo ideal es que no omitas niveles de encabezado, por ejemplo, comenzar una sección con un <h1> y seguirla inmediatamente con un <h5>. En cambio, debes avanzar a <h5> en ese orden. El orden a nivel de encabezado es especialmente importante para los usuarios de AT, ya que esta es una de sus formas principales de navegar por el contenido.
Para ayudarte a cumplir con la estructura semántica y el orden adecuados de los encabezados, considera separar tus estilos CSS de los niveles de encabezado. De esta manera, tendrás más flexibilidad en los estilos de encabezado y, al mismo tiempo, mantendrás el orden a nivel de los encabezados. Es fundamental que no uses solo los estilos para crear encabezados, ya que AT no los ve como un encabezado.
Cuando falsificamos encabezados, no se transmite la estructura adecuada a los usuarios de AT.
Los encabezados también son útiles para las personas con trastornos cognitivos y de déficit de atención. Es importante que el contenido del encabezado tenga sentido para ayudarlos a comprender qué es lo más importante de la página.
<div>
<h3>Stamps</h3>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</div>
<div>
<h3>How do I start a stamp collection?</h3>
<h2>Equipment you will need</h2>
<h4>...</h4>
<h2>How to acquire stamps</h2>
<h4>...</h4>
<h2>Organizations you can join</h2>
<h4>...</h4>
</div>
<header>
<h1>Stamp collecting</h1>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<h2>What is stamp collecting?</h2>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</section>
<section aria-label="Start a stamp collection">
<h2>How do I start a stamp collection?</h2>
<h3>Required equiment</h3>
<p>...</p>
<h3>How to acquire stamps</h3>
<p>...</p>
<h3>Organizations you can join</h3>
<p>...</p>
</section>
</main>
Listas
Las listas de HTML son una forma de agrupar de forma semántica elementos similares a otros, lo que les da un significado inherente, al igual que tu lista de la tienda de comestibles o esa lista interminable de tareas que ignoras.
Existen tres tipos de listas HTML:
El elemento <li> del elemento de lista se usa para representar un elemento en una lista ordenada o sin ordenar, mientras que el término de descripción <dt> y los elementos <dd> de definición se encuentran en la lista de descripción.
Cuando se programan correctamente, estos elementos pueden informar a los usuarios de AT sin visión sobre la estructura visible de la lista. Cuando una AT encuentra una lista semántica, puede indicarle al usuario el nombre de la lista y cuántos elementos contiene. A medida que el usuario navega por la lista, la AT leerá cada elemento de la lista en voz alta y dirá qué número está en ella: elemento uno de cinco, elemento dos de cinco, etc.
Agrupar elementos en listas también ayuda a las personas videntes que padecen trastornos cognitivos y de atención, así como a las que tienen discapacidades para leer, ya que el estilo del contenido de las listas suele tener más espacios en blanco visual y el contenido es directo.
<div>
<p>How do I start a stamp collection?</p>
<p>Equipment you will need</p>
<div>
<p>Small tongs with rounded tips</p>
<p>Stamp hinges</p>
<p>Stockbook or albumn</p>
<p>Magnifying glass</p>
<p>Stamps</p>
</div>
</div>
<div>
<h1>How do I start a stamp collection?</h1>
<h2>Equipment you will need</h2>
<ol>
<li>Small tongs with rounded tips</li>
<li>Stamp hinges</li>
<li>Stockbook or albumn</li>
<li>Magnifying glass</li>
<li>Stamps</li>
</ol>
</div>
Tablas
En HTML, las tablas se usan generalmente para organizar datos o el diseño de la página.
Según el propósito de la tabla, usarás diferentes elementos estructurales semánticos. Las tablas pueden tener una estructura muy compleja, pero cuando te fijas en las reglas semánticas básicas, son bastante accesibles sin mucha intervención.
Diseño
En los inicios de Internet, las tablas de diseño eran el principal elemento HTML que se utilizaba para crear estructuras visuales. Hoy en día, usamos una combinación de elementos semánticos y no semánticos, como <div> y puntos de referencia, para crear diseños.
Si bien los días para crear tablas de diseño ya finalizaron, a veces se usan estas tablas, como en correos electrónicos, boletines informativos y anuncios visualmente atractivos. En estos casos, las tablas que se usan solo para diseño no deben usar elementos estructurales que transmitan relaciones y agreguen contexto, como <th> o <caption>.
Las tablas de diseño también deben estar ocultas para los usuarios de AT con la función de presentación de ARIA o el estado aria-hidden.
<table>
<caption>My stamp collection</caption>
<tr>
<th>[Stamp Image 1]</th>
<th>[Stamp Image 2]</th>
<th>[Stamp Image 3]</th>
</tr>
</table>
<table role="presentation">
<tr>
<td>[Stamp Image 1]</td>
<td>[Stamp Image 2]</td>
<td>[Stamp Image 3]</td>
</tr>
</table>
Datos
A diferencia de una tabla de diseño, que debe estar oculta para los usuarios de AT, una tabla de datos y todos sus elementos deben estar expuestos. La estructura de las tablas de datos es fundamental para transmitir información simple y compleja a los usuarios.
Cuando una tabla se estructura correctamente, se forman relaciones entre los encabezados de las columnas y las filas y los datos dentro de la tabla. Cuando se estructura de forma incorrecta, el usuario tiene que descifrar el significado y el contexto de la información en la tabla.
Según la complejidad de la tabla, formar relaciones a través del código se logra de diferentes maneras. El primer paso para hacer que una tabla sea accesible es marcar las celdas del encabezado con <th> y las celdas de datos con elementos <td>.
En el caso de tablas más complejas, es posible que debas usar elementos adicionales de tablas HTML, como <rowgroup>, <colgroup>, <caption> y scope, para transmitir el significado y las relaciones.
<table>
<tr>
<td>Animal</td>
<td>Year</td>
<td>Condition</td>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>
<table>
<caption>My stamp collection</caption>
<tr>
<th>Animal</th>
<th>Year</th>
<th>Condition</th>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>