Fallo común WCAG 2.2

F37Opciones de formulario que abren una ventana nueva al marcarlas

Nombre oficial en el W3C: Fallo del criterio de conformidad 3.2.2 debido a abrir una ventana nueva sin aviso previo cuando cambia la selección de un botón de opción, una casilla de verificación o una lista desplegable

En pocas palabras

El error es que, al marcar una casilla o un botón de opción, o al elegir algo en una lista desplegable, se abra una ventana o pestaña nueva sin aviso previo. La persona solo quería elegir una opción, no cambiar de ventana. La acción debe esperar a que pulse un botón.

Por qué es importante

Elegir una opción no debería llevar a ningún sitio. Si se abre una ventana nueva sin aviso, la persona se desorienta.

Quien usa un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) puede no notar que está en otra ventana. El botón «Atrás» del navegador ya no le devuelve al formulario.
Quien usa el teclado recorre los botones de opción y las listas con las flechas. Cada flecha cambia la selección y abre una ventana, así que no llega a la opción que busca.
Las personas con discapacidad cognitiva o con temblor en las manos se equivocan más. Una ventana inesperada les hace perder lo que estaban haciendo.

Cómo evitarlo

Deje que las casillas, los botones de opción y las listas desplegables solo guarden la elección. No les añada scripts en onchange u onclick que abran ventanas.
Añada un botón, como «Ver resultados» o «Ir», que haga la acción cuando la persona lo pulse.
Si la opción tiene que abrir otra ventana, dígalo antes con un texto visible junto al control.
Aun con aviso, evítelo en los grupos de botones de opción. Al recorrerlos con las flechas se dispara la acción, y eso incumple también el criterio de uso con teclado.
Mostrar u ocultar campos en la misma página al marcar una opción sí es correcto. Eso no es abrir una ventana nueva.

Cómo comprobarlo

Localice cada formulario de la página y sus casillas, botones de opción y listas desplegables.
Cambie la selección de cada uno con el ratón y con el teclado (flechas y barra espaciadora).
Fíjese en si se abre una ventana o pestaña nueva.
Si se abre, busque un aviso previo junto al control. Sin aviso, se produce el fallo.

Ejemplo

Un selector de provincia que abre una ventana al cambiar (incorrecto) y otro que espera al botón (correcto).

<!-- Incorrecto: se abre una ventana al cambiar de opción -->
<select onchange="window.open(this.value)">…</select>

<!-- Correcto: la acción espera al botón -->
<form action="/oficinas">
  <label for="prov">Provincia</label>
  <select id="prov" name="prov">
    <option>Murcia</option>
    <option>Alicante</option>
  </select>
  <button type="submit">Ver oficinas</button>
</form>

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

Aplicabilidad

HTML

Descripción

Este documento describe un fallo que se produce cuando cambiar la selección de un botón de opción, una casilla de verificación o un elemento de una lista desplegable provoca que se abra una ventana nueva. Es posible usar scripts para crear un elemento input que provoque un cambio de contexto (enviar el formulario, abrir una página nueva, una ventana nueva) cuando se selecciona el elemento. En su lugar, quien desarrolla puede usar un botón de envío (véase Proporcionar un botón de envío para iniciar un cambio de contexto) o indicar claramente la acción esperada.

Ejemplos

El siguiente ejemplo falla el criterio de conformidad porque procesa el formulario cuando se selecciona un botón de opción en lugar de usar un botón de envío.

<script> 
   function goToMirror(theInput) {
    var mirrorSite = "https://download." + theInput.value + "/"; 
    window.open(mirrorSite); 
   }
</script>

<form name="mirror_form" id="mirror_form" action="" method="get">
  <p>Please select a mirror download site:</p> 
  <p> 
    <input type="radio" onclick="goToMirror(this);" name="mirror" 
     id="mirror_belnet" value="belnet.be" /> 
    <label for="mirror_belnet">belnet (<abbr>BE</abbr>)</label><br /> 
    <input type="radio" onclick="goToMirror(this);" name="mirror" 
     id="mirror_surfnet" value="surfnet.nl" /> 
    <label for="mirror_surfnet">surfnet (<abbr>NL</abbr>)</label><br /> 
    <input type="radio" onclick="goToMirror(this);" name="mirror" 
     id="mirror_puzzle" value="puzzle.ch" /> 
    <label for="mirror_puzzle">puzzle (<abbr>CH</abbr>)</label><br /> 
    <input type="radio" onclick="goToMirror(this);" name="mirror" 
     id="mirror_voxel" value="voxel.com" /> 
    <label for="mirror_voxel">voxel (<abbr>US</abbr>)</label><br /> 
  </p> 
</form>

Pruebas

Procedimiento

Localizar cada formulario de la página.
Para cada control de formulario que sea un botón de opción, una casilla de verificación o un elemento de una lista desplegable, comprobar si al cambiar la selección del control se abre una ventana nueva.
Para cada ventana nueva resultante del paso 2, comprobar si se avisa al usuario de antemano.

Resultados esperados

Si la comprobación n.º 3 es falsa, se da esta condición de fallo y el contenido falla el criterio de conformidad.

Tenga en cuenta que, en el caso de un grupo de botones de opción, se cumplirán los requisitos del criterio de conformidad 3.2.2 Al recibir entradas si se añade una indicación o un aviso de que seleccionar un botón de opción provocará un cambio de contexto; sin embargo, es probable que este escenario siga fallando el criterio de conformidad 2.1.1 Teclado, ya que (en los agentes de usuario actuales) no es posible que un usuario recorra un grupo de botones de opción con el teclado sin desencadenar un evento de cambio.

Cómo lo comprobamos en ADDAW

Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F37 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.