Una etiqueta de formulario (elemento HTML <label>) es el texto que describe el prop\u00f3sito de un campo de entrada: \u00abNombre\u00bb, \u00abCorreo electr\u00f3nico\u00bb, \u00abTel\u00e9fono\u00bb. Visualmente, es el texto que aparece al lado o encima del campo. T\u00e9cnicamente, tiene que estar asociado program\u00e1ticamente al campo con el atributo for. <\/p>\n
El criterio WCAG 4.1.2 exige que todos los componentes de la interfaz de usuario tengan un nombre accesible. Para los campos de formulario, esto significa que cada campo tiene que tener una etiqueta que el lector de pantalla pueda lea cuando el usuario llega. <\/p>\n
Imag\u00ednate llenando un formulario de contacto mientras un lector de pantalla te lee el contenido. Sin etiquetas correctas, el lector de pantalla dice \u00abeditar texto\u00bb al llegar a un campo, sin indicar si es el nombre, el email o el tel\u00e9fono. El usuario no sabe qu\u00e9 campo est\u00e1 llenando. <\/p>\n
El placeholder \u2014el texto gris dentro del campo que desaparece cuando escribes\u2014 no es una alternativa v\u00e1lida a la etiqueta. Por dos razones: primero, desaparece al empezar a escribir, y el usuario no puede revisar qu\u00e9 campo estaba llenando. Segundo, muchos lectores de pantalla no leen el placeholder como etiqueta del campo. <\/p>\n
El m\u00e9todo est\u00e1ndar es usar el atributo for a la etiqueta que coincida con el atributo id del campo. Cuando el lector de pantalla llega al campo, lee autom\u00e1ticamente la etiqueta asociada. <\/p>\n
La etiqueta puede rodear el campo directamente, sin necesidad de usar for y id:<\/p>\n Para casos donde la etiqueta visible no es posible (como un campo de b\u00fasqueda con bot\u00f3n), se puede usar aria-labelo:<\/p>\n Gravity Forms, el plugin de formularios m\u00e1s usado en WordPress, genera etiquetas correctas por defecto. Pero hay situaciones donde los formularios pierden las etiquetas: <\/p>\n El bot\u00f3n de enviar del formulario tambi\u00e9n tiene que tener texto accesible. Un bot\u00f3n con texto \u00abEnviar\u00bb es correcto. Un bot\u00f3n con un icono de flecha sin texto necesita aria-labelo=\u00bbEnviar formulario\u00bb para ser accesible. <\/p>\n La herramienta de autoevaluaci\u00f3n de webaccessible.cat identifica campos de formulario sin etiquetas asociadas. El informe indica qu\u00e9 campos est\u00e1n afectados y su ubicaci\u00f3n en la p\u00e1gina, permitiendo corregirlos de forma priorizada. <\/p>\n Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<\/div><\/div><\/div><label for=\"email\">Correu electr\u00f2nic<\/label><\/code>
\n<input type=\"email\" id=\"email\" name=\"email\"><\/code><\/p>\nM\u00e9todo 2: etiqueta envolviendo el campo<\/h3>\n
<label><\/code>
\n Correu electr\u00f2nic<\/code>
\n <input type=\"email\" name=\"email\"><\/code>
\n<\/label><\/code><\/p>\nM\u00e9todo 3: aria-labelo<\/h3>\n
<input type=\"search\" aria-label=\"Cercar al web\"><\/code><\/p>\nErrores habituales en WordPress<\/h2>\n
\n
El caso de los botones de enviar<\/h2>\n
Como detectar formularios sin etiquetas<\/h2>\n