Formularios accesibles

Al igual que las tablas, los formularios son un elemento común de las páginas web, y al igual que ellas, por lo general se crean de forma automática sin un marcado semántico.

Para que un formulario sea accesible, al igual que con las tablas se debe asociar las etiquetas de los campos explícitamente a estos mismos por medio de los elementos y atributos específicos.

Supongamos que tenemos el siguiente formulario:

    <form action="procesar_datos.php" method="post" name="datos_usuario">
        <h2>Datos personales</h2>
        <p>Nombre <input name="nombre" type="text" size="40"></p>
        <p>Apellidos <input name="apellidos" type="text" size="40"></p>
        <p>Dirección <input name="direccion" type="text" size="40"></p>
        <p>Teléfono <input name="tlf" type="text" size="40"></p>
        <p>Correo electrónico <input name="correo" type="text" size="40"></p>
        <h2>Datos de la empresa</h2>
        <p>Dirección <input name="empresa" type="text" size="40"></p>
        <p>Teléfono <input name="tlf_emp" type="text" size="40"></p>
        <p>Fax <input name="fax" type="text" size="40"></p>
        <p>Página web <input name="pg_web" type="text" size="40"></p>
        <input name="reset" type="reset" value="Limpiar campos">
        <input name="enviar" type="submit" value="Enviar formulario">
    </form>
            

Con este código, tenemos un marcado que no es válido, semántico ni accesible. Si lo desea, pruebe validar este ejemplo.

Una vez que comprobamos que en el validador del W3C (inglés) —por ejemplo— obtenemos 37 errores, tenemos dos opciones:

• La opción uno es corregir los errores sin más, para que el formulario valide y congratularnos. Suele ser la opción de aquellos que confunden la validez con la accesibilidad.
• Además de hacerlo válido, esforzarnos un poco por hacerlo semántico y accesible.

Si ha elegido la segunda opción, vea el siguiente código y siga leyendo.

    <form action="procesar_datos.php" method="post" id="formulario_contacto">
        <fieldset>
            <legend>Datos personales</legend>
                <dl>
                    <dd><label for="nombre">Nombre</label></dd>
                    <dt><input name="nombre" id="nombre" type="text" size="40" value=" " /></dt>
                    <dd><label for="apellidos">Apellidos</label></dd>
                    <dt><input name="apellidos" id="apellidos" type="text" size="40" value=" " /></dt>
                    <dd><label for="direccion">Dirección</label></dd>
                    <dt><input name="direccion" id="direccion" type="text" size="40" value=" " /></dt>
                    <dd><label for="tlf">Teléfono</label></dd>
                    <dt><input name="tlf" id="tlf" type="text" size="40" value=" " /></dt>
                    <dd><label for="correo">Correo electrónico</label></dd>
                    <dt><input name="correo" id="correo" type="text" size="40" value=" " /></dt>
                </dl>
            </fieldset>
            <fieldset>
                <legend>Datos de la empresa</legend>
                <dl>
                    <dd><label for="empresa">Nombre de la empresa</label></dd>
                    <dt><input name="empresa" id="empresa" type="text" size="40" value=" " /></dt>
                    <dd><label for="tlf_emp">Teléfono</label></dd>
                    <dt><input name="tlf_emp" id="tlf_emp" type="text" size="40" value=" " /></dt>
                    <dd><label for="fax">Fax</label></dd>
                    <dt><input name="fax" id="fax" type="text" size="40" value=" " /></dt>
                    <dd><label for="pg_web">Página web</label></dd>
                    <dt><input name="pg_web" id="pg_web" type="text" size="40" value=" " /></dt>
                </dl>
            </fieldset>
            <div><input name="enviar" id="enviar" type="submit" value="Enviar formulario" /></div>
    </form>
            

Como se ve, para hacer accesible el formulario sólo he aplicado una serie de elementos y atributos:

• fieldset: Engloba diversos campos relacionados por su significado. Otros casos pueden ser más ambiguos, pero en éste parece lógico dividir entre los campos que se refieren al individuo y los datos que se refieren a la empresa.
• legend: Es un encabezado específico para los elementos agrupados bajo un fieldset.
• He sustituido el name que identificaba el formulario por un id. Hay que destacar que el atributo name, que en HTML 4.01 y el XHTML 1.0 Transitional aún se podía aplicar a cualquier elemento, ha sido depreciado en XHTML 1.1 en favor de id. Sin embargo, como los scripts activos del lado del servidor como PHP, ASP, Perl, etc., reciben los valores enviados por el usuario asociados al name para identificarlos, se ha mantenido el atributo para los campos de formulario. Por motivos de proactividad, se recomienda incluir en los campos un id con el mismo valor que name, para cuando en el lado del servidor se emplee como identificador¹.
• He marcado los campos como una lista de definición.²
• label: Identifica el texto explicativo que acompaña a cada campo del formulario. Se asigna al input, select o textarea por medio del for, cuyo valor debe ser el id del campo correspondiente (no el name).
• Por último, el punto 10.4 de las WCAG 1.0 (inglés) especifica que se debe incluir un texto cuyos caracteres sirvan de «ancla» para que los navegadores antiguos los localicen al navegar por medio de la tecla Tab. No hay consenso entre los especialistas sobre si los navegadores ya los soportan de manera suficientemente consistente —ver, por ejejmplo, las excepciones de la declaración de accesibilidad de Nomensa (inglés)—, o si esta práctica carece de utilidad —por ejemplo, lo que piensa Joe Clark al respecto (inglés)—, o si aún debe mantenerse. Personalmente, por cuestiones de usabilidad, yo prefiero una solución intermedia de compromiso: incluyo en el campo un espacio en blanco —que al fin y al cabo es un caracter— y después lo elimino al validar el formulario en el lado del cliente y en el del servidor.

Bien, con esto, inicialmente nuestro formulario sería válido, semántico y accesible.

Una nota adicional. En el botón, no se debería incluir atributos como onclick para lanzar el comportamiento del formulario, y así no obstruir su funcionamiento en caso de que el usuario no tenga JavaScript habilitado. Las alternativas se verán más adelante, cuando tratemos la capa de comportamiento.

Notas

1. Hay un caso en el que esto no es posible: al crear varias casillas de verificación o botones de radio. Para agruparlos como un grupo, se necesita que compartan el atributo name; sin embargo, según la especificación de XHTML, un id debe ser único en un documento, por lo que no se puede repetir para cada casilla o botón.
2. No voy a discutir aquí uno de esos tópicos de listas de correo y foros que acaba inevitablemente en discusiones bizantinas: si los campos de un formulario deben marcarse como div, ul, dl, etc. Personalmente me parece que esta es la forma más correcta, puesto que un campo sin su correspondiente label carece de definición, y porque la estructura de dl puede definir explícitamente la relación de correspondencia uno a uno de ambos.