form-control-programmatic-label-quality

Los controles de formulario no deben depender de placeholder o title como etiqueta principal

manualWCAG 4.1.2 (A)confianza: mediumgravedad: moderaterobust

Marca los controles de formulario cuyo nombre accesible calculado depende de placeholder o title como método de etiquetado principal. Se prefiere <label> o aria-labelledby.

Ámbito de aplicación. Se aplica a los controles de formulario nativos etiquetables expuestos a las tecnologías de asistencia:

  • input (excluyendo type=hidden|submit|reset|button|image)
  • select
  • textarea

role="presentation"/"none" se excluyen solo cuando no son enfocables.

Resultado esperado. Si un control tiene un nombre programático, no debe depender ÚNICAMENTE de:

  • placeholder (no vacío)
  • title (no vacío)

Se prefiere un <label> asociado o aria-labelledby.

Ejemplos

can't tell
<input type="text" placeholder="Email address">

El único nombre del control proviene de `placeholder`, que desaparece en cuanto el usuario empieza a escribir.

n/a
<label for="email">Email address</label>
<input type="text" id="email" placeholder="name@example.com">

Un `<label>` persistente proporciona el nombre; `placeholder` aquí es solo una pista de formato.

Reglas relacionadas

Ver código fuente