Ir directamente al contenido de esta página

codexexempla.org

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:

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:

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. Volver
  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. Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2014 Mapa del sitio | XHTML | CSS | AA