Accesibilidad y Formularios

Introdución

Si bien es cierto que la eliminación de las tablas como elementos de maquetación es una exigencia de nivel AA de conformidad con las Pautas de Acceso al Contenido (WCAG) también lo és que su eliminación, en determinados ámbitos como los formularios, puede no ser trivial.

Formulario con tablas

Todos conocemos el método tradicional de crear un formulario en el que se usa una tabla para colocar alineados verticalmente los elementos del mismo, un ejemplo del cual podría ser el siguiente.

<form name="frm1" id="frm1" action="index.html" method="post">
<table width="70%" align="center">
  <tr>
    <td>Nombre</td>
    <td><input type="text" name="txtNombre" size="15" /></td>
  </tr>
  <tr>
    <td>Apellidos</td>
    <td><input type="text" name="txtApellidos" size="45" /></td>
  </tr>
  <tr>
    <td valign="top">Edad</td>
    <td>
      <input type="radio" name="radEdad" value="10-20" /> 10-20 años<br />
      <input type="radio" name="radEdad" value="20-30" /> 20-30 años
    </td>
  </tr>
  <tr>
    <td>Localidad</td>
    <td>
      <select name="slcLocalidad">
        <option value="mi_casa">Mi casa</option>
        <option value="tu_casa">Tu casa</option>
        <option value="su_casa">Su casa</option>
      </select>
    </td>
  </tr>
  <tr>
    <td colspan="2">
    Observaciones:<br />
    <textarea name="tObser" cols="60" rows="10"></textarea>
    </td>
  </tr>
</table>
</form>

Una práctica demasiado habitual, y que nunca se ha de utilizar, es abrir el formulario dentro del código de la tabla, tal y como se ve a continuación. El objetivo de hacer esto es evitar el espacio que deja el formulario a su alrededor y que, además de conseguirlo, pone de manifiesto el poco conocimiento de CSS por parte del desarrollador web, ya que esta propiedad fácilmente modificable con las hojas de estilo.

<table width="70%" align="center">
<form name="frm1" id="frm1" action="index.html" method="post">
  <tr>
    <td>Nombre</td>
    <td><input type="text" name="txtNombre" size="15" /></td>
  </tr>
  <tr>
    <td>Apellidos</td>
    <td><input type="text" name="txtApellidos" size="45" /></td>
  </tr>
  <tr>
    <td valign="top">Edad</td>
    <td>
      <input type="radio" name="radEdad" value="10-20" /> 10-20 años<br />
      <input type="radio" name="radEdad" value="20-30" /> 20-30 años
    </td>
  </tr>
  <tr>
    <td>Localidad</td>
    <td>
      <select name="slcLocalidad">
        <option value="mi_casa">Mi casa</option>
        <option value="tu_casa">Tu casa</option>
        <option value="su_casa">Su casa</option>
      </select>
    </td>
  </tr>
  <tr>
    <td colspan="2">
    Observaciones:<br />
    <textarea name="tObser" cols="60" rows="10"></textarea>
    </td>
  </tr>
</form>  
</table>

Visto el ejemplo que todos conocemos, ¿cómo de dificil sería crear un formulario visualmente idéntico mediante un código HTML correcto y el uso de las hojas de estilo?

Formulario sin tablas

En la creación de un formulario se debe jugar con un código HTML lo más correcto de posible y un pequeño trabajo CSS. Al decir lo más correcto posible nos referimos a un código que cumpla con las WCAG y con los Estándares Web de desarrollo. Para ello:

Organizaremos el código del documento de forma que pueda ser leido sin hojas de estilo y respetando la estructura lógica del mismo.(Pauta 6.1 de Nivel A)
Utilizaremos las hojas de estilo para maquetar y lo haremos usando siempre medidas relativas [em, %] (Pauta 3.3 y Pauta 3.4 de Nivel AA)
Respetaremos la asociación entre etiqueta y elementos de formulario, así como la agrupación de los mismos cuando sea necesario (Pauta 10.2 y Pauta 12.4 de Nivel AA)

Si después de todo, se han de usar las tablas para maquetar tendremos que tener en cuenta dos cosas:

Pauta 5.3 No utilice tablas para maquetar, a menos que la tabla tenga sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión alineada).
Pauta 5.4 Si se utiliza una tabla para maquetar, no utilice marcadores estructurales para realizar un efecto visual de formato.

Pués bien, teniendo todo esto en cuena, el código fuente una de las posibles versiones sin tablas podría ser el siguiente

Código HTML

<form name="frm2" id="frm2" action="index.html" method="post">
  <fieldset title="Datos personales" id="fldDatos">
    <legend>Datos personales del alumno</legend>
    <ol>
      <li>
        <label for="txtNombre2">Nombre</label>
        <input type="text" name="txtNombre2" id="txtNombre2" size="15" title="Indique el nombre del alumno" />
      </li>
      <li>
        <label for="txtApe2">Apellidos</label>
        <input type="text" name="txtApe2" id="txtApe2" size="45" title="Indique los apellidos del alumno" />
      </li>
      <li>
        <fieldset>
          <legend class="lblVisible">Edad</legend>
          <label for="radEdad2-1" class="lblMid">
          <input type="radio" name="radEdad2" id="radEdad2-1" value="10-20" />10-20 años
          </label>
          <label for="radEdad2-2" class="lblMid">
          <input type="radio" name="radEdad2" id="radEdad2-2" value="20-30" />20-30 años
          </label>
        </fieldset>
      </li>
      <li>
        <label for="slcLoca2">Localidad</label>
          <select name="slcLoca2" id="slcLoca2" title="Selecciona la localidad">
            <option value="mi_casa">Mi casa</option>
            <option value="tu_casa">Tu casa</option>
            <option value="su_casa">Su casa</option>
          </select>
      </li>
      <li>
      <label for="tObser2">Observaciones:<br />
      <textarea name="tObser2" id="tObser2" cols="60" rows="10"></textarea>
      </label>
      </li>
    </ol>
  </fieldset>
</form>

Código CSS

#frm2{
	width: 70%; margin: auto;
}
#frm2 ol{margin:0; padding:0; list-style:none;}
#frm2 label{
	display: block;
	width: 10em;
	float: left;
}
#frm2 ul li{clear: both;}
#frm2 fieldset {
	border:0; 
	margin:0;
}
#frm2 legend{display:none;}
#frm2 legend.lblVisible{
	display:block;
	width:4em;
	margin: 0; padding: 0;
}
#frm2 label.lblMid{
	clear: both;
	display: block;
	margin: 0 0 0 9em;
}

Comparación de formularios

Formulario con tablas

Clásico formulario maquetado con tablas.

Formulario sin tablas

El mismo formulario, de antes, pero ahora maquetado sin tablas.

Sobre el uso de javascript en los formularios

6.3 Asegure que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados. Si esto no es posible, proporcione información equivalente en una página alternativa accesible.

Nada de usar

<input type="submit" value="" id="btnEnviar" onclick="Validate()" />

En su lugar hay que usar la captura, o asignación, de eventos: Bien utilizando los propios métodos del DOM

			<input type="submit" value="" id="btnEnviar" />

			<script type="text/javascript">
				// https://developer.mozilla.org/en/DOM/element.addEventListener
				document.getElementById("btnEnviar").addEventListener("click", Validate, false);
				function Validate() {  //implement code }
			</script>

O usando alternativas como jQuery

			<input type="submit" value="" id="btnEnviar" />

			<script type="text/javascript">
				// http://api.jquery.com/bind/
				$('#btnEnviar').bind('click', Validate);
				function Validate() {  //implement code }
			</script>

Nombre
Apellidos
Edad	10-20 años 20-30 años
Localidad
Observaciones:

Accesibilidad y Formularios

Introdución

Formulario con tablas

Formulario sin tablas

Comparación de formularios

Formulario con tablas

Formulario sin tablas

Sobre el uso de javascript en los formularios

Referencias