comparte el articulo 

Creación de formularios con XHTML y CSS: accesibilidad y estilo

Actualizado el 19/01/2012 < > 0 Comentarios

Resumen: Última parte de nuestro estudio sobre formularios, en este artículo especificamos como optimizar la accesibilidad y el estilo de nuestros elementos form.

Una vez que hemos logrado estudiar y acoplar cada elemento que forma parte de la estructura XHTML de un formulario, es tiempo de pasar a tratar con temas un poco menos ligados al funcionamiento básico y más relacionados con lograr una posible optimización. En este artículo estudiaremos la manera de volver más accesible nuestro formulario y de darle un estilo que se adecue a las necesidades del sitio donde lo presentamos, tratando de dar una mejor experiencia a las personas que harán uso de él.

Formularios HTML accesibles

La sensibilidad por el usuario es lo primero que debemos tener en cuenta para lograr un diseño accesible, debemos considerar siempre ofrecer un formulario cuyos campos se encuentren bien espaciados y con etiquetas “label” que estén claramente asociadas a ellos, para así permitirle al usuario realizar sus tareas de manera mucho más fácil y sencilla, dando oportunidad incluso para que personas con alguna incapacidad visual puedan interactuar con el formulario.

No debemos olvidarnos de etiquetas como “optgroup” que nos permiten segmentar y agrupar grandes listados, o como “fieldset” que nos ayudará a crear una división al interior de la forma, obteniendo una mejor visualización y permitiendo una mejor asistencia.

Algunos otros aspectos que podemos tomar en cuenta para este tema ya fueron analizados en otros artículos, tal es el caso de los atributos “tabindex” y “accesskey” que permiten aumentar la accesibilidad a los campos “input”, “textarea” y “select”, ya que ayudan a la navegación de aquellos que no utilizan un dispositivo de señalización, como un mouse.

Los atributos de descripción suelen ser muy importantes en estas situaciones, si el usuario se siente confundido al momento de estar llenando el formulario puede recurrir a ellos para obtener una mejor explicación del contenido que debe tener el campo. De igual manera se puede hacer uso del atributo “value” de cada campo, para dar un valor por defecto que explique mejor la manera en que se debe de llenar.

Uso de etiquetas “label”

Todos los elementos que van a tomar parte de un formulario deben de ir siempre acompañados por un elemento de tipo “label”, al menos de que la interfaz del sitio demande lo contrario. El lograr esto es muy sencillo, sin embargo a muchos les puede resultar sin sentido, es claramente necesario tener un elemento que indique el contenido que debe de ir dentro del campo que tenemos, muchos hacen uno de texto común con etiquetas como “span” o “p”, sin embargo la relevancia que toma “label” se debe a que se puede establecer una asociación inmediata con el campo del formulario.

Un elemento de tipo “label” establece un enlace explícito, con una etiqueta de creación de campos, mediante el atributo “for” que permite asociar dicho elemento con el “id” del campo. Si tuviéramos un campo para un nombre podríamos asociarlo con un “label” de la siguiente manera:

<label for="nombre_form">Nombre:</label>
<input name="nombre" id="nombre_form" />

En el ejemplo utilizamos distintos valores para los atributos “id” y “name”, pero generalmente se utiliza el mismo, el cambio en nuestro ejemplo fue hecho con propósitos de demostrar la manera en que funcionaba el atributo “for”.

Esta asociación establecida permite aumentar la usabilidad, ya que al momento de dar clic sobre la “label” el puntero se colocará automáticamente sobre el campo del formulario al que se encuentra asociado. En el caso de las casillas de verificación y los botones de tipo radio, al momento de dar clic la opción a la que esta asociado el label se marca como seleccionada.

Estilización del formulario con CSS

Uno de los problemas más frecuentes que se presentan al momento de desarrollar un formulario, se da al buscar un estilo uniforme para todos los campos. La dificultad se presenta por el hecho de que todos los navegadores despliegan de manera distinta los campos, además de que según el sistema operativo que estemos utilizando es la manera en que se visualizarán los botones e incluso las fuentes.

Los bordes de los campos del formulario son deliberadamente hechos para hacer que el elemento se mire de manera tridimensional, como son parte ya del sistema operativo, estos campos fueron diseñados para ser visualizados en un programa más que en una página de internet, por lo que se tuvo que aplicar estilos que sugirieran una interacción con los campos, y por ello se recurrió a una visualización muy arcaica pero concisa, indicando cuales campos son para rellenar y cuales otros para aplicarles una acción.

Para evitar caer en una desuniformidad y modificar los estilos por defecto, el uso de CSS se ha vuelto fundamental, y gracias a él podemos cambiar los bordes, las fuentes y los fondos para llegar a un estilo que se adecue más a lo que queremos mostrar en nuestro sitio.

Bordes

Quizás la manera más rápida y sencilla de modificar radicalmente la apariencia de un formulario es cambiando los bordes de los campos que en él se despliegan; para ello tenemos que hacer uso de la propiedad CSS “border”, que nos permitirá cambiar el tipo de borde, su color y tamaño. Si quisiéramos por ejemplo tener un borde de tipo sólido, color gris y con 1 píxel de anchura, basta con utilizar una sentencia como esta:

input, textarea { border: 1px solid #333 }

Esto se aplicará a todos los elementos de tipo “input” y “textarea” que tengamos en el formulario, y hará que luzcan un borde algo delgado y sin nada tridimensional. En cambio, si quisiéramos apegarnos más al estilo original pero cambiando los colores, podemos utilizar la propiedad “border-color” con un valor para cada sección, como se muestra aquí:

input, textarea {
border: 1px solid;
border-color: #333 #666 #666 #333;
}

En cuanto a lo que bordes para cajas de selección se refiere, estos se ven más limitadas por parte de los navegadores, aunque en la actualidad estos problemas han tendido a reducirse. Lo mismo puede ocurrir con las casillas de verificación y los botones de tipo radio, su estilo puede permanecer diferente al resto de los bordes que manejamos.

Fuentes

Podemos especificar el tipo de fuente con la que se va a desplegar el texto dentro de cada campo del formulario, y para ello basta con recurrir a la propiedad “font” de CSS. Al igual que con el resto de los elementos donde podemos aplicar esta propiedad, el color y el tamaño son aspectos elegibles.

input, textarea { font: 10px arial }

Es recomendado realizar una especificación de fuente uniforme para todos los elementos del formulario, ya que por defecto los elementos “textarea” muestran el texto contenido con una fuente de tipo “Courier” mientras que los “input” hacen uso de fuentes “sans-serif”.

Fondo

El último aspecto relevante que se puede modificar para resaltar o dar un estilo distinto a los elementos, es el fondo. Por lo general esta propiedad, representada por “background”, es tratada con mucho respesto y sólo se utiliza en casos donde la interfaz lo amerite.

Cambiar el fondo de un campo puede mejorar su usabilidad y accesibilidad, pero debemos elegir correctamente la combinación entre color de letra y fondo del campo para no aturdir o dejar pasmado al usuario.

Un uso muy práctico del cambio de fondo se puede hacer en conjunto con el evento “focus” mediante CSS, así podemos cambiar el fondo del campo únicamente cuando el usuario se encuentre posicionado sobre él:

input:focus, textarea:focus { background: #ccc }

Publicado el 19/01/2012, última actualización 19/01/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras