Uno de los aspectos más importantes de la accesibilidad digital es la estructura subyacente de la página. Cuando compilas tu sitio web o aplicación con elementos estructurales en lugar de depender solo de los estilos, les brindas contexto fundamental a las personas que usan tecnologías de accesibilidad (AT), como los lectores de pantalla.
Los elementos estructurales sirven como un esquema del contenido en la pantalla, pero también actúan como puntos de anclaje para permitir una navegación más fácil dentro del contenido.
Cuando usas elementos HTML semánticos, el significado inherente de cada elemento se pasa al árbol de accesibilidad y lo usa la AT, lo que le da más significado al contenido que los elementos no semánticos. Puede haber casos en los que debas agregar atributos ARIA adicionales para crear relaciones o mejorar la experiencia general del usuario, pero en la mayoría de las situaciones, uno de los más de 100 elementos HTML disponibles debería funcionar bastante bien por sí solo.
Si bien este módulo se enfoca en los elementos estructurales más utilizados que son fundamentales para la accesibilidad digital, sin duda, hay elementos adicionales y factores ambientales que se deben tener en cuenta cuando se crea la estructura en tu sitio web o aplicación. Estos ejemplos son una introducción al tema, en lugar de ser exhaustivos.
Puntos de referencia
Los usuarios de AT dependen de los elementos estructurales para obtener información sobre el diseño general de la página. Cuando dividas grandes regiones de contenido, puedes usar los roles de punto de referencia de ARIA o los elementos de punto de referencia HTML más recientes para agregar contexto estructural a tu página.
Los lugares de referencia garantizan que el contenido esté en regiones navegables. Se recomienda que proporciones al menos un punto de referencia por página.
Algunos recursos sugieren combinar marcadores ARIA y HTML para brindar una mejor cobertura de la AT. Si bien este tipo de redundancia no debería causar problemas a los usuarios, prueba los patrones con un lector de pantalla para asegurarte. Cuando tengas dudas, lo mejor es usar de forma predeterminada solo los elementos de referencia HTML más nuevos, ya que la compatibilidad con los navegadores es muy sólida.
Comparemos los elementos de punto de referencia HTML como asignados a sus roles de punto de referencia ARIA correspondientes.
Elemento de punto de referencia HTML | Rol de punto de referencia ARIA |
---|---|
<header> |
banner |
<aside> |
complementarios |
<footer> |
contentinfo |
<nav>
|
navigation |
<main> |
main |
<form> 1 |
formulario |
<section> 1 |
region |
Ahora, compara ejemplos de estructuras de contenido accesibles.
<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 encabezados HTML forman un resumen conciso del contenido general de la página.
Existen seis niveles de encabezado que podemos usar. El encabezado de nivel uno <h1>
se usa para la información más importante de la página y se mueve de forma incremental al encabezado de nivel 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, que comiences una sección con un <h1>
y, de inmediato, la sigas con un <h5>
. En su lugar, debes avanzar al <h5>
en orden. El orden de los niveles de encabezado es especialmente importante para los usuarios de AT, ya que es una de sus principales formas de navegar por el contenido.
Para ayudarte a cumplir con la estructura y el orden semánticos adecuados de los encabezados, considera desacoplar tus diseños de CSS de los niveles de encabezado. Esto te permite tener más flexibilidad en los estilos de encabezado y, al mismo tiempo, mantener el orden de nivel de encabezado. Es fundamental que no uses solo estilos para crear encabezados, ya que la AT no los considera como encabezados.
Cuando falsificamos los 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 sea significativo para ayudarlos a comprender 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 HTML son una forma de agrupar semánticamente elementos similares entre sí, lo que les otorga un significado inherente, al igual que tu lista de compras o esa lista de tareas interminable que sigues ignorando.
Existen tres tipos de listas HTML:
El elemento elemento de lista <li>
se usa para representar un elemento en una lista ordenada o desordenada, mientras que los elementos término de descripción <dt>
y definición <dd>
se pueden encontrar en la lista de descripciones.
Cuando se programan correctamente, estos elementos pueden informar a los usuarios de AT no videntes sobre la estructura visible de la lista. Cuando un 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 en voz alta y dirá en qué número de la lista se encuentra (elemento uno de cinco, elemento dos de cinco, etcétera).
Agrupar elementos en listas también ayuda a las personas videntes que tienen trastornos cognitivos y de atención, y a las personas con discapacidades de lectura, ya que el contenido de las listas suele tener un estilo que permite tener más espacio 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 suelen usarse 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 ser muy complejas en su estructura, pero cuando te apegas a las reglas semánticas básicas, son bastante accesibles sin mucha intervención.
Diseño
En los primeros días de Internet, las tablas de diseño eran el elemento HTML principal
que se usaba 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 de crear tablas de diseño quedaron atrás, hay ocasiones en las que todavía se usan, como en correos electrónicos, boletines informativos y anuncios con mucho contenido visual. En estos casos, las tablas que se usan solo para el 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 ocultarse para los usuarios de AT con el rol de presentación o el estado aria-hidden de ARIA.
<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 está estructurada correctamente, se forman relaciones entre los encabezados de las columnas y las filas, y los datos dentro de la tabla. Cuando la estructura es incorrecta, el usuario debe descifrar el significado y el contexto de la información en la tabla.
Según la complejidad de la tabla, la formación de relaciones a través del código se logra de diferentes maneras. El primer paso para que una tabla sea accesible es marcar las celdas de encabezado con <th>
y las celdas de datos con elementos <td>
.
Para tablas más complejas, es posible que debas usar elementos de tabla HTML adicionales, 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>