Me dio fuerte por el tema LABEL (es cierto!), pero esta vez dejo el tema de la asociación explicita e implícita para comentar el uso de las etiquetas dentro de los propios controles. En estos casos en vez de usar LABEL se sitúa un valor textual para el atributo value de un INPUT, generalmente por medio de JavaScript.

Ejemplo

El propio login de Facebook usa este sistema como se puede ver en la imagen superior.

¿Problemas?

* Antes de nada comentar que he husmeado un poco en el blog y encontré un post del 2007 donde hablo de lo mismo (me empiezo a repetir, mala cosa 🙁 ).

Bajo este sistema las ayudas asistivas pueden tener problemas para detectar o comprenda adecuadamente lo que el usuario debe introducir en los campos de texto. De hecho si vemos la web con JavaScript desactivado no sabremos que hay que introducir en esos campos (imagen inferior del ejemplo).

¿Causas?

Es posible que Facebook no le de importancia a estas «tonterías obsesivas» y más teniendo en cuenta su target y los millones de usuarios que tienen.

Por otro lado, ¿no os ha pasado nunca que con este sistema has hecho clic en el control (la etiqueta desaparece) y en ese momento sucede algo que te distrae?. Cuando retomas la atención surge la pregunta: ¿que era lo que tenía que poner aquí?.
El problema es aún más acuciante si hay que rellenar varios inputs haciendo uso del tabulador siendo muy probable que cuando estés en el campo siguiente no te hayas ni fijado en su etiqueta.

Volviendo al caso concreto de Facebook, sabemos que se trata del login, pero han puesto un tamaño similar en ambos campos, lo que no ayuda a discernir cual es el campo e-mail y el de la clave.
La página en cuestión tampoco válida debido a errores «muy tontos», no creo que cueste tanto optimizar un poquito el XHTML aunque solo sea por abrir el código y poder tenerlo claro y elegante para actuar rápidamente. En fin… se trata de una sola página (la home de Facebook).

Se me hace tan raro que grandes empresas y proyectos como este no mimen un poco más estos detalles…