Resolución de problemas de accesibilidad WCAG 2.2 en sitios web

1.1.1 Contenido no textual

Toda imagen, ícono u otro elemento no textual debe incluir una descripción en texto que transmita la misma información o función.

Resolución de roles de presentación y estados ocultos en contenido decorativo

Los gráficos decorativos y el contenido no textual que no transmiten información significativa deben ocultarse de las tecnologías de asistencia, como los lectores de pantalla. Esto permite que los usuarios de tecnologías de asistencia se concentren en el contenido significativo.

En el código HTML, identifique el contenido decorativo que no proporciona información ni funcionalidad significativas.

1. Para los elementos <svg> decorativos, agregue el atributo aria-hidden="true" al elemento <svg>.

2. Para otro contenido decorativo no textual, como un elemento <img> usado solo como borde, un elemento <object> usado únicamente para dar estilo o un elemento <area> usado para efectos visuales, agregue el atributo role="presentation".

3. Si el elemento decorativo no textual ya tiene un atributo role, reemplácelo por role="presentation".

Ejemplo

!-- Incorrect -->
<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>
<!-- Correct -->
<svg width="100" height="100" aria-hidden="true">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>

1.2.1 Solo audio y solo video (grabado previamente)

Todo audio o video grabado previamente que no tenga imágenes ni sonido debe incluir una transcripción en texto que proporcione la misma información.

Resolución de transcripciones de audio faltantes

Proporcionar una transcripción en texto del contenido de audio garantiza que todos los usuarios, incluidos quienes son sordos o tienen dificultades auditivas, puedan acceder a la misma información.

1. En el código HTML, localice el elemento <audio>.

2. Después del elemento <audio>, agregue un elemento <p>.

3. Dentro del elemento <p>, ingrese la transcripción completa del contenido de audio en forma de texto.

Ejemplo

<!-- Incorrect -->
<video src="training-overview.mp4" controls>
</video> 

<!-- Correct -->
<video src="training-overview.mp4" controls>
<track src="training-overview-en.vtt" kind="captions" srclang="en" label="English">
</video> 

Resolución de subtítulos faltantes en videos incrustados de Vimeo

Los videos de Vimeo deben tener subtítulos disponibles para garantizar la accesibilidad de los usuarios sordos o con dificultades auditivas. Vimeo permite agregar subtítulos mediante la configuración del video.

1. Abra el video en vimeo.com.

2. Inicie sesión con la cuenta propietaria del video.

3. Vaya a Configuración.

4. Seleccione la pestaña Distribución y luego abra Subtítulos (o Avanzado > Subtítulos en los diseños anteriores).

5. Busque la sección Subtítulos/CC.

6. Cargue un archivo de subtítulos .vtt o .srt.

7. Guarde los cambios y luego confirme que los subtítulos estén habilitados mediante la vista previa del video.

Nota: Los subtítulos se mostrarán automáticamente en el elemento <iframe> incrustado si están habilitados en Vimeo.

Resolución de subtítulos faltantes en videos incrustados de YouTube

Los videos de YouTube deben incluir subtítulos para que los usuarios sordos o con dificultades auditivas puedan acceder al contenido hablado. YouTube ofrece opciones para cargar subtítulos manualmente o usar subtitulado automático.

1. Abra el video en youtube.com con la cuenta propietaria del video.

2. Vaya a YouTube Studio y seleccione el video que desea editar.

3. Haga clic en Subtítulos en el menú de la izquierda.

4. Elija el idioma de sus subtítulos.

5. Haga clic en Agregar y seleccione una de las siguientes opciones:

   • Subir archivo (para archivos .vtt o .srt)

   • Sincronización automática (pegue la transcripción completa y deje que YouTube la sincronice)

   • Escribir manualmente

6. Revise y publique sus subtítulos.

1.3.1 Información y relaciones

Toda información que se muestre mediante el diseño, el formato o la estructura visual también debe estar disponible en texto o codificada de manera que las tecnologías de asistencia puedan comprenderla.

Resolución de roles de puntos de referencia ARIA faltantes en la estructura de la página

Los roles de puntos de referencia (landmarks) ayudan a los usuarios de lectores de pantalla a comprender el diseño de la página y a navegar rápidamente a las secciones clave.

1. En su código HTML, localice los elementos estructurales (por ejemplo, <div>, <section>, <form>).

2. Agregue el rol de punto de referencia ARIA adecuado mediante el atributo role (por ejemplo, role="main", role="navigation", role="form"). Obtenga más información sobre el rol de punto de referencia adecuado.
   Nota: Agregue roles ARIA solo si el elemento aún no tiene un rol de punto de referencia integrado (por ejemplo, <nav> ya funciona como navigation).

Ejemplo

<!-- Incorrect -->
<div id="main-content">
<p>Welcome to our website.</p>
</div>

<!-- Correct -->
<div id="main-content" role="main">
<p>Welcome to our website.</p>
</div>

Resolución de fieldset o grupo faltante en entradas con el mismo nombre

Los botones de opción o las casillas de verificación que comparten el mismo nombre deben agruparse para que su relación sea clara. Esto ayuda a los usuarios de lectores de pantalla a comprender que las entradas pertenecen al mismo grupo.

1. En el código HTML, localice las entradas de tipo radio o checkbox que comparten el mismo atributo name.

2. Envuelva las entradas relacionadas dentro de un elemento <fieldset>.

3. Agregue un elemento <legend> como primer elemento dentro del <fieldset> para describir el grupo.

Como alternativa, envuelva las entradas en un contenedor con role="group" o role="radiogroup" y proporcione una etiqueta mediante aria-labelledby o aria-label.

Ejemplo

<!-- Incorrect -->
<label>
  <input type="checkbox" name="city"> Toronto
</label>
<label>
  <input type="checkbox" name="city"> London
</label>
<!-- Correct -->
<fieldset>
  <legend>Select your location</legend>
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</fieldset>
<!-- Correct -->
<div role="group" aria-label="Select your location">
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</div>

Resolución de elementos <li> sin elemento principal

Asegurarse de que los elementos de lista se coloquen dentro de un elemento de lista ayuda a los lectores de pantalla a identificar correctamente el contenido agrupado.

1. En el código HTML, localice los elementos <li> que no están envueltos en un elemento <ul> o <ol>.

2. Envuelva los elementos <li> en un elemento <ul> (para viñetas) o <ol> (para una lista numerada).

Ejemplo

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>
<!-- Correct -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Resolución de problemas de estructura de las listas de descripción (DL)

Las listas de descripción se utilizan para mostrar pares de información relacionada, como un término y su explicación. Cuando la lista no está estructurada correctamente, los lectores de pantalla pueden leer el contenido en desorden o confundir a los usuarios.

1. En su código HTML, localice los elementos <dl> señalados.

2. Dentro del elemento <dl>, coloque el término dentro de un elemento <dt>.

3. Dentro de un elemento <dt>, coloque la descripción dentro de un elemento <dd>.

4. Elimine cualquier otro elemento que esté colocado directamente dentro del elemento <dl>, a menos que esté envuelto dentro de un elemento <dt> o <dd>.

Ejemplo

<!-- Incorrect -->
<dl>
  <p>HTML</p>
  <p>A markup language for web pages.</p>
</dl>
<!-- Correct -->
<dl>
  <dt>HTML</dt>
  <dd>A markup language for web pages.</dd>
</dl>

Resolución de términos de definición (DT) y descripciones de definición (DD) que no están contenidos en una lista de descripción (DL)

Los términos de definición (<dt>) y las descripciones de definición (<dd>) siempre deben estar contenidos dentro de una lista de descripción (<dl>). Cuando los elementos <dt> o <dd> se usan fuera de un elemento <dl>, los lectores de pantalla pueden leer el contenido en desorden o confundir a los usuarios.

1. En su código HTML, localice los elementos <dt> o <dd> señalados.

2. Asegúrese de que cada elemento <dt> y <dd> esté colocado dentro de un elemento <dl>. Si el contenido no forma parte de una lista de descripción, reemplace <dt> y <dd> por un elemento adecuado (por ejemplo, <h2>, <h3>, <p>).

Ejemplo

<!-- Incorrect -->
<dt>CSS</dt>
<dd>A language used to style web pages.</dd>
<!-- Correct -->
<dl>
  <dt>CSS</dt>
  <dd>A language used to style web pages.</dd>
</dl>

Resolución del uso incorrecto del atributo scope en tablas

Cuando una tabla usa el atributo scope, este debe aplicarse únicamente a las celdas de encabezado (<th>) para definir claramente con qué celdas de datos se relacionan. Los valores de scope incorrectos o ausentes pueden impedir que las tecnologías de asistencia asocien correctamente los encabezados con los datos de la tabla.

1. En su código HTML, ubique el atributo scope marcado o los elementos de tabla marcados.
2. Actualice el atributo scope para asegurarse de que:
   1. El atributo scope se aplique únicamente a los elementos <th>.
   2. Cada <th> tenga un valor de scope adecuado, como col, row, colgroup o rowgroup.
   3. El valor de su atributo scope refleje con precisión la estructura y las relaciones de la tabla.

Ejemplo

<!-- Incorrect -->
<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <th>Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

<!-- Incorrect -->
<table>
  <tr>
    <th scope="column1">Name</th>
    <th scope="column2">Score</th>
  </tr>
  <tr>
    <th scope="row1">Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

Resolución del uso incorrecto del atributo headers mediante scope en tablas

Las tablas deben contener celdas de datos (<td>) descritas por encabezados de tabla (<th>). Las tablas que incluyen encabezados pero no celdas de datos no ofrecen relaciones significativas para las tecnologías de asistencia y pueden causar confusión a los usuarios de lectores de pantalla.

En su código HTML, ubique los elementos de tabla marcados que contienen elementos <th> pero ningún elemento <td> correspondiente.

Actualice la estructura de la tabla para asegurarse de que:

1. Cada tabla incluya uno o más elementos <td> que contengan datos.

2. Los elementos <th> se usen únicamente cuando describan datos reales de la tabla.

3. Las tablas usadas solo para diseño o presentación no incluyan elementos <th>.

4. Si la tabla no contiene datos, elimine la tabla o reemplácela con un marcado que no sea de tabla.

Ejemplo

<!-- Incorrect -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
  <tr>
    <td>John</td>
  </tr>
</table>

Resolución de la agrupación ARIA incorrecta para el rol “group”

El uso adecuado de los roles ARIA ayuda a los lectores de pantalla a comprender la estructura de la página, lo que facilita que los usuarios con discapacidades naveguen e interactúen con el contenido.

1. En el código HTML, ubique el elemento con role="group".

2. Dentro del elemento, incluya al menos un elemento de control interactivo (p. ej., <input>, <textarea> o <select>).
   Nota: Obtenga más información sobre qué control interactivo debe incluir. Si no hay controles interactivos adecuados, considere reemplazar role="group" por un rol ARIA o una estructura más apropiados.

Ejemplo

<!-- Incorrect -->
<div role="group">
<p>This is a group with no interactive elements.</p>
</div>   

<!-- Correct -->
<div role="group">
<label for="username">Username:</label>
<input id="username" type="text">
</div>

Resolución de la agrupación ARIA incorrecta para el rol “radiogroup”

El uso adecuado de los roles ARIA ayuda a los lectores de pantalla a comprender la estructura de la página, lo que facilita que los usuarios con discapacidades naveguen e interactúen con el contenido.

1. En el código HTML, ubique el elemento con role="radiogroup".

2. Dentro del elemento, incluya al menos un elemento de botón de opción (p. ej., <input type="radio"> o role="radio").

Ejemplo

<!-- Incorrect -->
<div role="radiogroup">
<p>Select a delivery method:</p>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-label="Select a delivery method">
<label><input type="radio" name="delivery" value="standard"> Standard </label><br>
<label><input type="radio" name="delivery" value="express"> Express </label><br>
<label><input type="radio" name="delivery" value="overnight"> Overnight</label>
</div>

Resolución de la agrupación ARIA incorrecta para el rol “checkbox”

El uso adecuado de los roles ARIA ayuda a los lectores de pantalla a comprender la estructura de la página, lo que facilita que los usuarios con discapacidades naveguen e interactúen con el contenido.

1. En el código HTML, ubique <input type="checkbox"> o un elemento con role="checkbox".

2. Coloque las casillas de verificación dentro de un contenedor y asígnele el role="group".

3. Agregue un atributo aria-labelledby o aria-label al elemento con role="checkbox" para describir el propósito del grupo de casillas de verificación.

Ejemplo

<!-- Incorrect -->
<div><label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div> 

<!-- Correct -->
<div role="group" aria-labelledby="emailPref">
<p id="emailPrefsLabel">Which types of emails would you like to receive?</p>
<label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div>

Resolución de la agrupación ARIA incorrecta para el rol “radio”

El uso adecuado de los roles ARIA ayuda a los lectores de pantalla a comprender la estructura de la página, lo que facilita que los usuarios con discapacidades naveguen e interactúen con el contenido.

1. En el código HTML, ubique <input type="radio"> o un elemento con role="radio".

2. Agrupe los botones de opción dentro del elemento con el role="radiogroup".

3. Agregue un atributo aria-labelledby o aria-label al elemento para describir el propósito del grupo de botones de opción.

Ejemplo

<!-- Incorrect -->
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-labelledby="contactMethod">
<p id="contactMethodLabel">How would you like us to contact you?</p>
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>  

Resolución de la falta de aria-level en los roles de encabezado

Los roles de encabezado ARIA deben incluir un nivel de encabezado definido para mayor claridad.

1. En el código HTML, ubique el elemento con el atributo role="heading".

2. Después del atributo role, agregue el atributo aria-level con un valor del 1 al 6 (p. ej., aria-level="2").

Ejemplo

<!-- Incorrect -->
<div role="heading">Subsection Title</div> 

<!-- Correct -->
<div role="heading" aria-level="2">Subsection Title</div>

Resolución de la falta de encabezados de tabla

Los encabezados de tabla ayudan a los lectores de pantalla a comprender qué significa cada columna o fila. Si una tabla no tiene encabezados, las tecnologías de asistencia no pueden brindar a los usuarios el contexto adecuado.

1. En su código HTML, ubique el elemento <table> e identifique la primera fila. Esta fila debe definir los encabezados de la tabla (p. ej., “Nombre”, “Edad”, etc.).

2. Si la primera fila usa elementos <td> (datos de tabla), cambie cada <td> por un <th> (encabezado de tabla) para indicar que estas celdas son encabezados.

3. Agregue scope="col" a cada elemento <th> si es un encabezado de columna, o scope="row" si es un encabezado de fila.

Ejemplo

<!-- Incorrect -->
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>  
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Incorrect -->
<ul>
<li><strong>Name:</strong> Ava</li>
<li><strong>Age:</strong> 25</li>
</ul>  

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table> 

Resolución de la estructura de lista incorrecta

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>  

<!-- Correct -->
<ul>
<li>First item</li>
<li>Second item</li>
</ul>

<!-- Incorrect -->
<dt>HTML</dt>
<dd>A markup language</dd>

<!-- Correct -->
<dl>
<dt>HTML</dt>
<dd>A markup language</dd>
</dl>

<!-- Incorrect --> <fieldset><label for="name">Name:</label><input id="name" type="text"></fieldset>

<!-- Correct --> <fieldset><legend>Personal Information</legend><label for="name">Name:</label><input id="name" type="text"></fieldset>
 

<meta name="apple-mobile-web-app-orientation" content="any">

Resolución de problemas de orientación en la metaetiqueta viewport

Las configuraciones de viewport que bloquean la orientación de la pantalla o desactivan el zoom pueden dificultar que los usuarios lean el contenido e interactúen con él. Permitir tanto la orientación vertical como la horizontal, así como el zoom, brinda a los usuarios flexibilidad según su dispositivo y sus necesidades personales.

1. En su código HTML, ubique la etiqueta meta name="viewport".
2. Elimine cualquier atributo relacionado con restricciones de orientación, como orientation=portrait u orientation=landscape.
3. Elimine cualquier atributo que impida el zoom, como maximum-scale=1 o user-scalable=no.
4. Guarde los cambios y vuelva a cargar la página.

Ejemplo

<!-- Incorrect --> 
<meta name="viewport" content="width=device-width, maximum-scale=1, orientation=portrait"> 

<!-- Correct--> 
<meta name="viewport" content="width=device-width">

Resolución de problemas de orientación en CSS

Las consultas de medios CSS que bloquean el contenido en orientación vertical u horizontal pueden limitar la forma en que los usuarios interactúan con una página. Eliminar estas restricciones permite que el contenido se adapte a ambas orientaciones.

1. En su código CSS, ubique las consultas de medios que restringen la orientación, como:
   • @media screen and (orientation: portrait){ … }
   • @media screen and (orientation: landscape) { … }
2. Elimine estas consultas de medios específicas de orientación para que el contenido se adapte libremente a ambas orientaciones.
3. Guarde los cambios y vuelva a cargar la página.

Ejemplo:

<!-- Incorrect --> 
@media screen and (orientation: portrait) { 
.container { 
width: 400px; 
 } 
}

<!-- Correct--> 
.container { 
width: 400px;

 

1.3.5 Identificar el propósito de la entrada