Formularios accesibles, aria-labelledby, aria-describedby

Los formularios se utilizan para muchas interacciones en la web. Cuando hablamos de la accesibilidad de los formularios, generalmente nos referimos a su accesibilidad para las personas que usan lectores de pantalla o teclados. Las personas con otros tipos de discapacidades generalmente se ven menos afectadas. Sin embargo, todos se benefician de un formulario bien organizad y utilizable, especialmente aquellos con discapacidades cognitivas. Los formularios deben ser claros e intuitivos. El orden de tabulado entre elementos (o lo que es lo mismo, el acceso a ellos) ha de ser sencillo de entender. No es recomendable tener un formulario con veinte campos, de los cuales diecinueve son obligatorios y uno opcional. Cuando todo es importante nada lo es. Los <labels> deben indicar la función de cada campo, (nombre, adjuntar imagen, número de tarjeta de crédito…). La posición del <label> es recomendable que se coloque visualmente encima y asociada con su correspondiente etiqueta <input> porque el ojo humano suele escanear en lugar de leer y esto mejora su lectura.

 <label for="name">Nombre</label>
<input type="text" name="name" id="name">

A día de hoy, igual que sabemos una de las primeras cosas que debemos recordar, es añadir el atributo alt a una imagen cuando es preciso. También tenemos que recordar la necesidad de asociar a cada etiqueta <label> su etiqueta asociada.
Nota:
Los usuarios que navegan con el teclado y lectores de pantalla suelen utilizar la tecla “TAB” para pasar de campo a campo del formulario. Dichos lectores de pantalla leen las etiquetas asociadas para cada elemento del formulario cuando la persona navega por ellas.

Con aria-labelledby, el campo del formulario indica qué elemento lo etiqueta haciendo referencia a su atributo id:

<label for="name">
<input aria-labelledby="name">

aria-describedby

Hay ocasiones en las que un formulario necesita información adicional. Esta información puede asociarse al campo del formulario con el atributo aria-describedby.

<label for="pass">Restablecer Contraseña</label>
<input type="password" name="pass" id="pass" aria-describedby="nuevapass">
<span id="nuevapass">La contraseña ha de tener al menos 12 letras, una mayúscula, un número, un símbolo y sangre de unicornio (esto último es broma. Mejor que tenga sangre de elfo.)</span>

Al igual que con aria-labelledby, el atributo aria-describedby apunta al id del elemento.

Label Oculto
Podemos ocultar el <label> vía CSS. Aun así, aparecerá para el lector de pantalla.

<label class="hidden" for="search">Búsqueda</label>
<input type="text" id="search" name="search">

Información sacada de: https://octuweb.com/creando-formularios-accesibles/ y https://webaim.org/techniques/forms/