Estructura del contenido

Uno de los aspectos más importantes de la accesibilidad digital estructura de la página. Cuando creas tu sitio web o aplicación usando elementos estructurales en su lugar de depender solo de los estilos, le das un contexto crítico a las personas mediante (AT), como los lectores de pantalla.

Los elementos estructurales sirven como un contorno del 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 usada por 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 de ARIA adicionales para compilar relaciones o para mejorar la experiencia general del usuario, pero, en la mayoría uno de los más de 100 elementos HTML disponibles debería funcionar bastante bien por sí solo.

Aunque este módulo se centra en los elementos estructurales más usados respecto a la accesibilidad digital, existen ciertamente elementos adicionales y factores ambientales para tener en cuenta al crear una estructura en tu sitio web o . Estos ejemplos son una introducción al tema, no una explicación integral.

Puntos de referencia

Los usuarios de AT dependen de los elementos estructurales para brindarles información sobre la el diseño general de la página. Cuando divides grandes regiones de contenido, puedes usa los roles de punto de referencia ARIA o los elementos 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. Te recomendamos que proporciones al menos un punto de referencia por página.

Algunos recursos sugieren combinar puntos de referencia ARIA y HTML para brindar una mejor cobertura de la AT. Aunque este tipo de redundancia causar problemas a los usuarios, probar los patrones con un lector de pantalla para garantizar la certeza. En caso de duda, es mejor utilizar de forma predeterminada solo el HTML más reciente. elementos de referencia, como la compatibilidad con navegadores es muy robustos.

Comparemos los elementos de los puntos de referencia HTML como asignado a su y los roles de referencia de ARIA equivalentes.

Elemento de punto de referencia HTML Rol del punto de referencia de ARIA
<header> banner
<aside> complementario
<footer> contentinfo
<nav> navigation
<main> principal
<form> 1 formulario
<section> 1 region
1 Se requiere la inclusión del atributo name para que se pueda acceder a él. Un section debe tener un nombre accesible para su rol de ARIA implícito de region de modo que sea visible para la tecnología de accesibilidad.

Ahora, comparemos ejemplos de estructura de contenido accesible.

Qué no debes hacer
<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>
Qué debes hacer
<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 implementa correctamente, los niveles de encabezado HTML forman un breve esquema del contenido general de la página.

Existen seis niveles de encabezado que podemos usar. El nivel de encabezado uno <h1> se utiliza para la información más alta e importante de la página y se mueve de forma progresiva a título de nivel seis <h6> para la información más baja y menos importante.

La secuencia de los niveles de encabezado es importante. Idealmente, no omitirás niveles de encabezado, por ejemplo, comenzar una sección con un <h1> e inmediatamente después con <h5>. En cambio, debes pasar a <h5> en en el orden personalizado. El orden a nivel de encabezado es especialmente importante para los usuarios de AT ya que es una de las principales formas de navegar por el contenido.

Para ayudarte a cumplir con la estructura semántica y el orden de los encabezados adecuados, considera separar tus estilos CSS de los niveles de encabezado. Esto te permite más flexibilidad en los estilos de encabezados y, al mismo tiempo, mantener el orden a nivel de los encabezados. Es fundamental que no utilices estilos solos para crear encabezados, ya que estos 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 déficit cognitivo y de atención trastornos de la salud. Es importante hacer que el contenido del encabezado tenga sentido para ayudarlos. entender lo más importante en la página.

Qué no debes hacer
<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>
Qué debes hacer
<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

Listas HTML son una forma de agrupar semánticamente elementos similares entre sí, dándoles al igual que la lista de compras o la lista de tareas interminables sigue ignorando.

Existen tres tipos de listas HTML:

El elemento de lista <li> se usa para representar un elemento en una lista ordenada o desordenada, mientras que el término de descripción <dt> y definición Los elementos <dd> pueden que encontrarás en la lista de descripción.

Cuando se programan correctamente, estos elementos pueden informar a los usuarios de AT no videntes sobre la estructura visible de la lista. Cuando una AT se encuentra con una lista semántica, puede decirle al usuario el nombre de la lista y la cantidad de elementos que contiene. Como usuario navega dentro de la lista, la AT leerá cada elemento de la lista en voz alta y le dirá qué número está en la lista: elemento uno de cinco, elemento dos de cinco, etcétera.

Agrupar elementos en listas también ayuda a las personas videntes que tienen capacidades cognitivas y los trastornos de la atención y las personas con discapacidades para leer, ya que el contenido por lo general, tiene un espacio más visual y el contenido es directo.

Qué no debes hacer
<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>
Qué debes hacer
<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 generalmente se usan para organizar los datos o el diseño de la página.

Según el propósito de la tabla, usarás diferentes estructuras semánticas o de terceros. Las tablas pueden tener una estructura muy compleja, pero cuando te adhieras al 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 elemento HTML principal. usada para construir estructuras visuales. Hoy en día, usamos una combinación elementos no semánticos, como <div> y puntos de referencia, para crear diseños.

Si bien la mayoría de los días de crear tablas de diseño terminaron, hay ocasiones en las que se siguen utilizando las tablas de diseño, como en los correos electrónicos visualmente atractivos, los boletines informativos y publicidad. 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 estar ocultas para los usuarios de AT con ARIA rol de presentación o el estado de aria-hidden.

Qué no debes hacer
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>
Qué debes hacer
<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 tabla de datos y todos sus elementos se deben exponer. La estructura de las tablas de datos es fundamental para transmitir y compleja a los usuarios.

Cuando una tabla se estructura correctamente, se forman relaciones entre la columna encabezados y 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 de la desde una tabla de particiones.

Dependiendo de la complejidad de la tabla, formar relaciones a través del código es lograrse de diferentes maneras. El primer paso para hacer que una tabla sea accesible es para marcar las celdas de encabezado con <th> y celdas de datos con elementos <td>

Para tablas más complejas, es posible que debas usar elementos adicionales de la tabla HTML como, por ejemplo, <rowgroup>: <colgroup>, <caption>, y scope a transmiten significado y relaciones.

Qué no debes hacer
<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>
Qué debes hacer
<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>