gonzalog.com

Blog (no tan) personal de Gonzalo López

Apretados, Microblogging

El archivero y las categorías

• December 2009
• June 2009
• May 2009
• April 2009
• March 2009
• January 2009

• Contenido web
• Entretenimiento
• General
• Internet
• Opinión
• Software

¡Dios mío, está lleno de etiquetas!

sistemas operativos accesibilidad formularios tipografía twitter interfaces gui photoshop javascript xhtml navegadores desarrollo framework w3c fonts código herramienta web galerías tips wordpress php tutoriales css diseño recursos

Tips prácticos de accesibilidad en formularios web

Leer el artículo Practical Accessibility Tips with WCAG 2.0 de Andrew Tetlaw en SitePoint fue una especie de back to basics que me permitió recordar que para empezar a diseñar sitios web accesibles podemos hacerlo con cosas tan simples y sencillas como lo es seguir las recomendaciones hechas por el W3C —en este caso, el documento Techniques for WCAG 2.0.

Y aunque no lo parezca, la diferencia que podemos hacer con tan sólo seguir sus lineamientos al pie de la letra es bastante notoria. Veamos.

Respetar el estándar HTML

Esto, a pesar de ser bastante claro no es una práctica común en la gran mayoría de los diseñadores web que por una u otra razón no la aplican.

Centrándonos en el diseño de formularios, la recomendación H91: Using HTML form controls and links describe una serie de elementos que se deben emplear para conseguir formularios accesibles. Así de simple, sin complicación alguna.

Siempre utilizar etiquetas explícitas

El elemento label nunca debe faltar en los formularios para describir la razón de ser de algún campo; este debe utilizarse apropiadamente en conjunto con su atributo for.

<label for="fname">First Name:</label> 
<input id="fname" name="fname" type="text" />

Se recomienda evitar etiquetas implícitas para no complicarle las cosas a aquellos que utilizan screen readers, como por ejemplo:

<label>First Name:
<input id="fname" name="fname" type="text" /></label>

Utilizar el atributo tabindex

El atributo tabindex especifíca la posición del elemento para controlar el desplazamiento (o navegación) entre todos los elementos de un formulario por medio de la tecla TAB. Esto quiere decir que según el valor que tenga el atributo, el enfoque del cursor se posicionará sobre el.

<label for="fname">First Name:</label> 
<input id="fname" name="fname" type="text" tabindex="1" />
<label for="lname">Last Name:</label> 
<input id="lname" name="lname" type="text" tabindex="2" />

Indicar los campos requeridos

Por último pero no menos importante, se aconseja especificar los campos que son requeridos para procesar el envío de un formulario satisfactoriamente ya sea utilizando texto o un icono.

Se puede utilizar la palabra requerido (required) para indicarlo.

<label for="fname">First Name (required):</label> 
<input id="fname" name="fname" type="text" tabindex="1" />

También se puede agregar un asterísco u otro símbolo usando el elemento abbr, y en su atributo alt title denotar su descripción (Gracias a akhasis por la aclaración).

<label for="fname">First Name <abbr title="required">*</abbr>:</label> 
<input id="fname" name="fname" type="text" tabindex="1" />

Y si se piensa utilizar una imagen en lugar de texto es imprescindible también hacer uso del atributo alt dentro del elemento img para señalar su descripción.

<label for="fname">First Name <img src="required.png" alt="Required field" />:</label>
<input id="fname" name="fname" type="text" tabindex="1" />

That’s it! Cosas tan simples como esas marcan la diferencia.

En el artículo se enfocaron únicamente en los lineamientos para formularios, sin embargo el documento contempla más que eso. En mi opinión es un recurso altamente recomendable y que se debería consultar en todo momento.

Hay 7 comentarios

Deja tu comentario sobre éste post