Blog what I write

Usar atributo TITLE remplazando a LABEL

post - - 2 replies -

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.

  • Una pregunta un poco tonta tal vez, pero ¿porqué utilizas la etiqueta “th” en la primera celda de cada fila? Seguro que tiene su explicación lógica que se me escapa.
    Lo demás genial, siempre buenas soluciones para los posibles problemas que nos podemos encontrar.
    Saludos.

    • Buena pregunta Jota, (teniendo en cuenta que me puedo equivocar) yo veo que semánticamente las celdas de la primera columna son también encabezados. El tag TH sirve para identificar celdas de encabezado. Si te fijas le doy un identificador a TH y luego relación cada celda TD a través del atributo HEADERS. Es más simple de ver que de explicar.

      Me alegro que te parezcan buenas soluciones 🙂