Logotipo de la Universidad de Alicante
Logotipo del Departamento de Lenguajes y Sistemas Informáticos

Accesibilidad Web

Buscador


Búsqueda avanzada

Migas de pan

Estás en: Accesibilidad web > Ejemplos > Errores típicos > Formularios > Formulario con un cuestionario tipo test

Formulario con un cuestionario tipo test

Se desea crear un cuestionario tipo test, en el que las preguntas estan numeradas y pueden tener múltiples respuestas exclusivas entre sí. Cada pregunta tiene que aparecer centrada en la página y con un borde.

Elementos clave de la solución

Solución

Cuando se desea numerar algo, como las preguntas de un cuestionario, lo más recomendable es emplear las etiquetas de XHTML que definen listas numeradas, ya que la numeración es automática. La numeración automática ofrece varias ventajas frente a la numeración manual: evita errores y facilita la inserción y eliminación de un elemento de la lista, ya que no hay que modificar la numeración del resto de elementos.

Sin embargo, en muchas situaciones no se hace así. En muchas situaciones se crean listas que, visualmente tienen apariencia de listas, pero que semánticamente no son más que la sucesión de diferentes elementos sin formar un conjunto en sí mismo. Por ejemplo, la siguiente página web contiene un cuestionario tipo test:

Formulario tipo test con DIV

En la siguiente imagen podemos ver como se visualiza esta página en un navegador:

Formulario tipo test con DIV

A continuación se muestra el código que define una pregunta del cuestionario. Como se puede observar, se han empleado varias etiquetas <div> para definir la estructura de una pregunta con sus respuestas. Se han empleado las tres clases pregresp, pregunta y respuestas para posteriormente definirlas en la hoja de estilo CSS.

<div class="pregresp">
  <div class="pregunta">1. ¿Crees que HTML es una buena tecnología?<br />
  </div>
  <div class="respuestas">
    <input type="radio" name="preg1" value="1" /> Sí<br />
    <input type="radio" name="preg1" value="2" /> No<br />
    <input type="radio" name="preg1" value="3" /> Ns/Nc<br />
  </div>
</div>

Y la definición de las tres clases CSS es:

.pregresp {
border: 1px solid #7DA5E0;
padding: 10px;
margin: 10px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
}

.pregunta {
color: #7DA5E0;
}

.respuestas {
color: #000000;
}

Esta solución no tiene contenido semántico. Sin embargo, se puede mejorar y hacer más accesible si se emplean las etiquetas de XHTML que definen listas. Por ejemplo, la siguiente página web contiene el mismo cuestionario:

Formulario tipo test con UL

En la siguiente imagen podemos ver como se visualiza esta página en un navegador, que muestra el mismo resultado visual que la página primera realizada con <div>:

Formulario tipo test con UL

Sin embargo, esta página posee una estructura semántica correcta, ya que cada pregunta es un elemento de una lista numerada y cada respuesta es un elemento de una lista no numerada. El código XHTML que define una pregunta del cuestionario es:

<li>¿Crees que HTML es una buena tecnología?
  <ul>
  <li><input type="radio" name="preg1" value="1" /> Sí</li>
  <li><input type="radio" name="preg1" value="2" /> No</li>
  <li><input type="radio" name="preg1" value="3" /> Ns/Nc</li>
  </ul>
</li>

Además, el código XHTML queda mucho más claro, es más fácil de leer y de mantener.

En la siguiente imagen se muestra cómo interpretaría el formulario realizado con <div> un lector de pantallas. Para ello, se ha empleado el complemento Fangs de Mozilla Firefox, que es un emulador de lector de pantallas. Como se puede observar, las preguntas y respuestas no poseen ninguna organización entre sí y es difícil reconocer alguna estructura en el contenido:

Formulario tipo test con DIV visualizado con Fangs

Cuando se emplean las etiquetas de listas el contenido está estructurado: por una lado, el lector de pantallas avisa de que hay una lista con dos elementos (las dos preguntas); por otro lado, para cada pregunta, el lector de pantallas avisa de que hay otra lista con tres elementos (las tres respuestas). Además, los lectores de pantallas normalmente avisan para cada elemento de la lista, en que posición dentro de la lista se encuentra (Fangs simplemente dice "bullet", pero otros lectores dicen cosas como "lista, elemento 2 de 3"):

Formulario tipo test con UL visualizado con Fangs

Por otro lado, el empleo de listas facilita la navegación por el contenido, ya que algunos lectores de pantallas poseen un modo de navegación especial para las listas. Por ejemplo, el lector de pantallas JAWS, uno de los más famosos y de los más empleados, dispone de los siguientes atajos de teclado para navegar en las listas:

En el siguiente enlace (archivo de sonido de JAWS) se puede escuchar lo que dice JAWS al leer la página realizada con listas. La grabación está realizada con JAWS leyendo el contenido a la mínima velocidad posible.

Por último, a continuación se puede ver cómo se ven las dos páginas cuando no se emplean los CSS correspondientes. La página realizada con <div> se muestra así:

Formulario tipo test con DIV mostrado sin CSS

La página realizado con listas tiene la siguiente apariencia sin CSS:

Formulario tipo test con UL mostrado sin CSS

Conclusión: hacer una página web accesible NO SUPONE en la mayoría de los casos (por no decir todos):

El "truco" está en saber hacer las cosas bien.

Estándares, licencia y contacto