Importancia de aria-labelledby, aria-label y aria-describedby

Con los lectores de pantalla, se pierde una gran cantidad de la información visual que se presenta en una página web. Debido a esto, tenemos que proporcionar información específica a lo que nos puede parecer obvio. Una forma común es definir la información específica solo para los lectores de pantalla, se envuelve el texto descriptivo de un elemento con una clase en particular, como por ejemplo .screen-reader-text, y ocultar el elemento que solo es reconocible para los lectores de pantalla .Aunque esto funciona, podemos usar atributos ARIA que son específicos para este propósito.

aria-labelledby

Este atributo se utiliza para especificar el nombre o etiqueta del elemento actual.

<div aria-labelledby="[ID de labelling elemento]"></div>

<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>

aria-label

Está diseñado para ser utilizado donde la etiqueta no es visible como un elemento en la pantalla.
se utiliza para definir una cadena que etiqueta el elemento actual. Úselo en los casos en que no haya una etiqueta de texto visible en pantalla.

aria-describedby


Este atributo se utiliza para especificar la información más descriptiva sobre el elemento. A diferencia aria-labelledby, que espera un nombre para el elemento, aria-describedby permite toda una frase o párrafo.


Apuntes tomados de:
https://developer.mozilla.org/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
https://olgacarreras.blogspot.com.es/2013/12/ayuda-contextual-de-los-formularios-mas.html
https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html