Usar atributo TITLE remplazando a LABEL

post - - 2 replies - share

Supongamos que tenemos la siguiente tabla de datos:

En la tabla vemos que hay unos campos de formulario para introducir el número de unidades de cada producto y que no tienen un texto que pueda usarse como LABEL. Ante esta situación he pensado que podría asociar explícitamente el INPUT con un LABEL de cada campo en la columna producto (reproductor mp3, impresora, caja 25 dvd).

<tr>
	<th id="pro1">
		<label for="a_uds">
			Reproductor <dfn title="Es un formato de audio digital"><abbr lang="en" xml:lang="en" title="MPEG-1 Audio Layer 3">MP3</abbr></dfn>
		</label>
	</th>
	<td headers="pro1 tpvp">
		40 €
	</td>
	<td headers="pro1 tuds">
		<input type="text" id="a_uds" name="a_uds" value="1" size="4" />
	</td>
</tr>

Vemos que LABEL e INPUT se encuentran asociados por el identificador “a_uds”.

Aunque esta forma de proceder no sea “mala”, quizás la etiqueta textual queda “lejos” del control de formulario, lo que puede provocar cierta confusión a los usuarios de lectores de pantalla.

La solución más directa en estos casos es usar el atributo TITLE de los controles de formulario.

<tr>
	<th id="pro1">
		Reproductor <dfn title="Es un formato de audio digital"><abbr lang="en" xml:lang="en" title="MPEG-1 Audio Layer 3">MP3</abbr></dfn>
	</th>
	<td headers="pro1 tpvp">
		40 €
	</td>
	<td headers="pro1 tuds">
		<input type="text" title="Número de unidades para: Reproductor mp3" name="a_uds" value="1" size="4" />
	</td>
</tr>

Usando title="Número de unidades para: Reproductor mp3" podemos ayudar a que el usuario sepa como actuar con ese control.

Etiquetas dentro del control input (III)

post - - 1 reply - share

Hace casi un año hablaba sobre un posible problema de usabilidad y accesibilidad en el formulario de inicio de sesión que tiene Facebook.

Desde entonces han mejorado un poquito la accesibilidad, aunque siguen sin usar la etiqueta label para el campo de Email de inicio de sesión. En su lugar han puesto los atributos title y value. El problema es que algunas ayudas asistivas pueden no interpretar el atributo title, por lo que esta solución no sería suficiente.

Respecto a la usabilidad puede ser debatida, pero el hecho de perder (lo que tienes que rellenar en ese campo) cuando haces clic en el, me parece un error. Eso si, visualmente y a nivel de interacción queda chulisimo.

Hoy, Kus (de uninstallme.com) me comenta:

Acabo de encontrar esto http://www.csskarma.com/lab/slidinglabels/ y me he acordado de este post. No lo he analizado a fondo, pero me ha parecido una buena idea.

Y tanto que es buena idea, la accesibilidad es impecable. Se usa JavaScript como un complemento no intrusivo que se encarga de realizar el efecto y la transición del label. Solo le veo una pega, que puede resultar cansino, yo lo usaría para formularios muy pequeños, con 2 o 3 inputs.

Un lujo contar con tus aportaciones María 😉

Asociación implícita de etiquetas LABEL para controles de formulario

post - - 9 replies - share

Aprovechando las bondades del tag LABEL podemos mejorar tanto la accesibilidad como la usabilidad de los formularios en las interfaces web.

LABEL se encarga de asociar la etiqueta textual a un control determinado (input, radio, select, etc.) proporcionando información acerca del control.

Cabe destacar que LABEL cuando recibe el foco, automáticamente se lo cede al control asociado.

Read more