Etiquetas y alternativas de texto

Para que un lector de pantalla le presente al usuario una IU hablada, los elementos significativos deben tener etiquetas o alternativas de texto adecuadas. Una etiqueta o una alternativa de texto le asignan a un elemento su nombre accesible, una de las propiedades clave para expresar la semántica del elemento en el árbol de accesibilidad.

Cuando el nombre de un elemento se combina con su rol, le brinda al usuario contexto para que pueda comprender con qué tipo de elemento interactúa y cómo se representa en la página. Si no hay un nombre, un lector de pantalla solo anuncia el rol del elemento. Imagina que intentas navegar por una página y escuchas “botón”, “casilla de verificación” o “imagen” sin ningún contexto adicional. Por eso, las alternativas de etiquetado y texto son fundamentales para brindar una buena experiencia accesible.

Inspecciona el nombre de un elemento

Es fácil verificar el nombre accesible de un elemento con las Herramientas para desarrolladores de Chrome:

  1. Haz clic con el botón derecho en un elemento y elige Inspeccionar. Se abrirá el panel Elementos de DevTools.
  2. En el panel Elementos, busca el panel Accesibilidad. Es posible que esté oculto detrás de un símbolo ».
  3. En el menú desplegable Computed Properties, busca la propiedad Name.
El panel de accesibilidad de DevTools muestra el nombre calculado de un botón.

Ya sea que estés viendo un img con texto alt o un input con un label, todas estas situaciones tienen el mismo resultado: asignarle un nombre accesible a un elemento.

Verifica si hay nombres faltantes

Existen diferentes maneras de agregar un nombre accesible a un elemento, según su tipo. En la siguiente tabla, se enumeran los tipos de elementos más comunes que necesitan nombres accesibles y vínculos a explicaciones para agregarlos.

Etiqueta documentos y marcos

Cada página debe tener un elemento title que explique de forma breve de qué se trata. El elemento title le asigna a la página su nombre accesible. Cuando un lector de pantalla ingresa a la página, este es el primer texto que se anuncia.

Por ejemplo, la siguiente página tiene el título "Receta de horneado rápido de barras de arce de Mary":

<!doctype html>
  <html lang="en">
    <head>
      <title>Mary's Maple Bar Fast-Baking Recipe</title>
    </head>
  <body>
      </body>
</html>

Del mismo modo, cualquier elemento frame o iframe debe tener atributos title:

<iframe title="An interactive map of San Francisco" src="…"></iframe>

Si bien el contenido de un iframe puede contener su propio elemento title interno, un lector de pantalla suele detenerse en el límite del marco y anunciar el rol del elemento ("marco") y su nombre accesible, que proporciona el atributo title. Esto permite que el usuario decida si desea ingresar al marco o pasarlo por alto.

Incluye alternativas de texto para imágenes y objetos

Un img siempre debe ir acompañado de un atributo alt para darle a la imagen su nombre accesible. Si la imagen no se carga, el texto alt se usa como marcador de posición para que los usuarios tengan una idea de lo que la imagen intentaba transmitir.

Escribir un buen texto alt es un arte, pero hay algunas pautas que puedes seguir:

  1. Determina si la imagen proporciona contenido que, de otro modo, sería difícil obtener a partir de la lectura del texto circundante.
  2. Si es así, transmite el contenido de la forma más concisa posible.

Si la imagen actúa como decoración y no proporciona ningún contenido útil, puedes darle un atributo alt="" vacío para quitarla del árbol de accesibilidad.

Una imagen unida a un vínculo debe usar el atributo alt de img para describir adónde navegará el usuario si hace clic en el vínculo:

<a href="https://en.wikipedia.org/wiki/Google">
  <img alt="Google's wikipedia page" src="google-logo.jpg">
</a>

Del mismo modo, si se usa un elemento <input type="image"> para crear un botón de imagen, debe contener texto alt que describa la acción que se produce cuando el usuario hace clic en el botón:

<form>
  <label>
    Username:
    <input type="text">
  </label>
  <input type="image" alt="Sign in" src="./sign-in-button.png">
</form>

Objetos incorporados

Los elementos <object>, que suelen usarse para incorporaciones como Flash, PDF o ActiveX, también deben contener texto alternativo. Al igual que con las imágenes, este texto se muestra si el elemento no se renderiza. El texto alternativo se coloca dentro del elemento object como texto normal, como "Informe anual" a continuación:

<object type="application/pdf" data="/report.pdf">
Annual report.
</object>

Los botones y los vínculos suelen ser fundamentales para la experiencia de un sitio, y es importante que ambos tengan nombres accesibles.

Botones

Un elemento button siempre intenta calcular su nombre accesible con su contenido de texto. En el caso de los botones que no forman parte de un form, escribir una acción clara como el contenido de texto puede ser todo lo que necesitas para crear un buen nombre accesible.

<button>Book Room</button>

Un formulario para dispositivos móviles con el botón &quot;Reservar habitación&quot;.

Una excepción común a esta regla son los botones de íconos. Un botón de ícono puede usar una imagen o una fuente de ícono para proporcionar el contenido de texto del botón. Por ejemplo, los botones que se usan en un editor de texto “lo que ves es lo que obtienes” (WYSIWYG) para dar formato al texto suelen ser solo símbolos gráficos:

Un botón de ícono con alineación a la izquierda.

Cuando trabajas con botones de íconos, puede ser útil asignarles un nombre accesible explícito con el atributo aria-label. aria-label anula cualquier contenido de texto dentro del botón, lo que te permite describir claramente la acción a cualquier persona que use un lector de pantalla.

<button aria-label="Left align"></button>

Al igual que los botones, los vínculos obtienen su nombre accesible principalmente de su contenido de texto. Un buen truco cuando creas un vínculo es colocar el texto más significativo en el vínculo en sí, en lugar de palabras de relleno como "Aquí" o "Más información".

No es lo suficientemente descriptivo
Check out our guide to web performance <a href="/guide">here</a>.
Contenido útil
Check out <a href="/guide">our guide to web performance</a>.

Esto es especialmente útil para los lectores de pantalla que ofrecen atajos para mostrar todos los vínculos de la página. Si los vínculos están llenos de texto de relleno repetitivo, estas combinaciones de teclas se vuelven mucho menos útiles:

Menú de vínculos de VoiceOver con la palabra “aquí”
Ejemplo de VoiceOver, un lector de pantalla para macOS, que muestra el menú de navegación por vínculos.

Etiqueta los elementos del formulario

Existen dos formas de asociar una etiqueta a un elemento de formulario, como una casilla de verificación. Cualquiera de los métodos hace que el texto de la etiqueta también se convierta en un objetivo de clic para la casilla de verificación, lo cual también es útil para usuarios de mouse o pantalla táctil. Para asociar una etiqueta a un elemento, haz lo siguiente:

  • Coloca el elemento de entrada dentro de un elemento de etiqueta
<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>
  • O bien usa el atributo for de la etiqueta y haz referencia al id del elemento.
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

Cuando se etiqueta correctamente la casilla de verificación, el lector de pantalla puede informar que el elemento tiene un rol de casilla de verificación, se encuentra en un estado de verificación y se llama "Receive promotional offers?", como en el siguiente ejemplo de VoiceOver:

Salida de texto de VoiceOver que muestra &quot;¿Quieres recibir ofertas promocionales?&quot;

TODO: DevSite: Evaluación de Piensa y verifica