F15Controles personalizados que el lector de pantalla no reconoce

Por qué es importante

Los controles nativos de HTML, como <button>, <input> o <select>, ya informan al navegador de qué son. El navegador pasa esa información a los lectores de pantalla y otros productos de apoyo.

Un <div> con estilos y JavaScript no informa de nada. Por ejemplo, el interruptor «Recibir avisos por SMS» de un área personal se oye como un texto suelto. La persona no sabe que puede activarlo ni si ya está activado.

Cómo evitarlo

1. Use siempre que pueda el elemento nativo: <button>, <input type="checkbox">, <select> o <a href>. Ya traen todo lo necesario.
2. Si necesita un control propio, indique su función con un role de ARIA, por ejemplo role="switch" o role="tab".
3. Dele un nombre: texto visible, aria-label o aria-labelledby.
4. Indique su estado o valor con atributos como aria-checked, aria-expanded o aria-valuenow. Actualícelos con JavaScript cada vez que cambien.
5. Haga que funcione con teclado. Siga la Guía de prácticas de autoría de ARIA (APG) del W3C para ese tipo de control.

Cómo comprobarlo

1. Abra las herramientas del navegador (F12), seleccione el control y mire el panel «Accesibilidad». Deben aparecer una función (role), un nombre y, si lo tiene, un estado.
2. Cambie el control (actívelo, despliéguelo o mueva el deslizador). Compruebe que el estado se actualiza en ese panel.
3. Con NVDA o VoiceOver, llegue al control con el tabulador. Debe oír qué es, cómo se llama y en qué estado está.
4. Pase axe DevTools o WAVE. Detectan algunos casos, como controles sin nombre, pero no todos.

Ejemplo

Interruptor para activar los avisos por SMS en un área personal.

<!-- Incorrecto: un div que el lector no reconoce -->
<div class="interruptor" onclick="cambiar(this)">
  Avisos por SMS
</div>

<!-- Correcto: botón con función y estado -->
<!-- cambiar() también actualiza aria-checked -->
<button type="button" role="switch" aria-checked="false"
  onclick="cambiar(this)">Avisos por SMS</button>