Técnica HTML WCAG 2.2

H84Usar un botón junto a la lista desplegable para ejecutar la acción

Nombre oficial en el W3C: Usar un botón junto a un elemento select para ejecutar una acción

En pocas palabras

Elegir una opción en una lista desplegable no debe cambiar la página por sí solo. La acción, como ir a otra página o filtrar resultados, se lanza con un botón aparte. Así la persona puede revisar las opciones con calma y confirmar cuando esté segura.

Por qué es importante

Con el teclado, las flechas recorren las opciones de un <select> y cambian su valor en cada pulsación. Si cada cambio recarga la página, el usuario nunca llega a la opción que buscaba.

También ayuda a quien se equivoca al elegir, por temblor o falta de precisión. Y evita cambios de contexto inesperados para quien usa lector de pantalla.

Cómo se hace

No asocie acciones al cambio de valor del <select> (por ejemplo, el evento onchange que navega a otra página).
Ponga al lado un <button> con un texto claro: «Ver», «Aplicar», «Ir».
Haga que la acción se ejecute solo al pulsar ese botón.
Dé a la lista una etiqueta visible con <label>.

Cómo comprobarlo

Lleve el foco a la lista con el tabulador.
Recorra las opciones con las flechas del teclado. No debe cambiar la página ni ejecutarse nada.
Pulse el botón y confirme que se ejecuta la acción de la opción elegida.

Ejemplo

El usuario elige el trimestre y la página no cambia hasta que pulsa «Ver calendario».

<label for="trimestre">Trimestre</label>
<select id="trimestre" name="trimestre">
  <option value="1">Enero a marzo</option>
  <option value="2">Abril a junio</option>
  <option value="3">Julio a septiembre</option>
  <option value="4">Octubre a diciembre</option>
</select>
<button type="submit">Ver calendario</button>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica H84 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H84 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.