Ejemplo de aria-describedby para ayuda contextual en un campo de formulario

Autor: Olga Carreras

Este ejemplo forma parte del artículo: Ayuda contextual de los formularios más accesible con "aria-describedby" (WAI-ARIA)

Código del ejemplo

<label for="contra">Contraseña (obligatorio):</label>
<input name="contra" id="contra" type="password" aria-describedby="descripcionContra" aria-required="true" />
<p id="descripcionContra" class="ayuda">La contraseña debe tener mínimo 6 caracteres</p>


Soporte

Puedes comprobarlo abriendo un lector de pantalla y accediendo con el tabulador al campo de formulario "Contraseña". Como observarás, cuando el campo "Contraseña" coge el foco (accediendo al mismo con el tabulador) el lector de pantalla lee:

• NVDA 2013 (con IE11, FF25 y Chrome31) lee el campo de la siguiente manera: "Contraseña obligatorio. Edición contraseña. Requerido. La contraseña debe tener mínimo 6 caracteres. En blanco"
• JAWS 15 (con IE11, FF25 y Chrome31) lee el campo de la siguiente manera: "Contraseña abre paréntesis obligatorio cierra paréntesis. Password edit required. La contraseña debe tener mínimo 6 caracteres"
• VoiceOver (iPad) lee el campo de la siguiente manera: "Contraseña obligatorio. Seguro. Campo de texto para varias líneas. Obligatorio. La contraseña debe tener mínimo 6 caracteres. Pulse dos veces para editar"