Técnica HTML WCAG 2.2

H84Usar un botón junto a un elemento select para ejecutar una acción

En resumen

Cuando una lista desplegable dispara una acción (cargar una página, cambiar de sección) nada más cambiar de valor, quienes navegan con el teclado la activan sin querer al recorrer las opciones. Esta técnica pide acompañar el select de un botón explícito, de modo que la acción solo se ejecute cuando el usuario lo decida. Beneficia a usuarios de teclado, lectores de pantalla y a cualquier persona que quiera revisar las opciones antes de confirmar.

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es permitir que el usuario controle cuándo se ejecuta una acción, en lugar de que la acción se produzca como efecto secundario de elegir un valor en el elemento select. El usuario puede examinar los distintos valores del elemento select, o elegir por error un valor equivocado, sin que se ejecute la acción. Cuando el usuario está conforme con su elección, pulsa el botón para ejecutar la acción.

Esto es especialmente importante para los usuarios que eligen el valor del elemento select mediante el teclado, puesto que recorrer las opciones del elemento select cambia el valor del control.

Ejemplos

Un calendario

Una página web permite al usuario elegir un trimestre de cualquier año y mostrar el calendario de esos meses. Una vez que el usuario ha fijado el trimestre y el año, muestra el calendario pulsando el botón «Show» (mostrar). Este ejemplo se basa en scripts del lado del cliente para implementar la acción.

<label for="quarter">Quarter:</label>
<select id="quarter" name="quarter">
  <option value="1">Quarter 1 (January - March)</option>
  <option value="2">Quarter 2 (April - June)</option>
  <option value="3">Quarter 3 (July - September)</option>
  <option value="4">Quarter 4 (October - December)</option>
</select> 
<label for="year">Year:</label>
<input name="year" type="text" id="year">
<button name="show" type="button">Show</button>

Elegir una acción

Un elemento select contiene una lista de acciones posibles. La acción no se ejecuta hasta que el usuario pulsa el botón «Update» (actualizar).

<form action="/process-form" method="post">
  <label for="action">Options:</label>
  <select name="action" id="action">
    <option value="add">Add</option>
    <option value="remove">Remove</option>
    <option value="cancel">Cancel</option>
    <option value="order">Order</option>
  </select> 
  <button name="submit" type="submit">Update</button>
</form>

Pruebas

Procedimiento

Para cada combinación de elemento select y elemento botón:

Comprobar que el foco (incluido el foco del teclado) sobre una opción del elemento select no provoca ninguna acción.
Comprobar que al pulsar el botón se ejecuta la acción asociada al valor actual del select.

Resultados esperados

Todas las comprobaciones son verdaderas.

Recursos

Cómo lo comprobamos en ADDAW

En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H84 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.