G108Usar los controles estándar del lenguaje para que se reconozcan bien

Por qué es importante

Un lector de pantalla es un programa que lee en voz alta lo que hay en la pantalla. De cada control necesita saber tres cosas: su nombre, qué tipo de control es y su estado o valor.

Con un botón de verdad, anuncia «Buscar, botón». Con un <div> disfrazado de botón, quizá no anuncie nada. Tampoco funcionará con el teclado ni con el control por voz.

Cómo se hace

1. Use el elemento nativo adecuado: <button>, <a href>, <input>, <select>, <textarea>.
2. Dé a cada control un nombre. En los campos, con <label>; en los botones, con su texto visible.
3. Deje que el navegador gestione el estado: marcado, desactivado o valor elegido. No lo imite solo con estilos.
4. Si cambia un valor con JavaScript, cambie la propiedad real del control para que el cambio se anuncie.
5. Recurra a ARIA solo si no existe un elemento nativo para lo que necesita.

Cómo comprobarlo

1. Abra las herramientas del navegador (tecla F12) y revise el panel «Accesibilidad» de cada control. Debe tener nombre, función y estado correctos.
2. Recorra los controles con el teclado y actívelos con Intro o Espacio.
3. Con NVDA o VoiceOver, compruebe que cada control se anuncia con su nombre y su tipo.
4. Cambie un valor, como marcar una casilla, y compruebe que se anuncia el nuevo estado.

Ejemplo

Buscador con controles nativos: el campo tiene etiqueta y el botón es un botón real.

<form action="/buscar">
  <label for="q">Buscar en la web</label>
  <input type="search" id="q" name="q">
  <label>
    <input type="checkbox" name="noticias"> Solo noticias
  </label>
  <button type="submit">Buscar</button>
</form>