Aria-describedby

Existem elementos no HTML que podem ter uma relação, por exemplo uma label e um input, ou um input do tipo password e queremos ter uma informação de quantos caracteres são necessários, tal como:

<label for="pw">Password</label>
<input type="password" id="pw">
<button>Submit</button>
<p>The password should contain at least 18 characters</p>

Mas para pessoas que tem de utilizar um leitor de ecrã só chega à informação do tipo de password depois do botão de submeter, para isto estabelecemos uma ligação entre a password e a mensagem, utilizando o aria-describedby.

<label for="pw">Password</label>
<input type="password" id="pw" aria-describedby="pw-hint">
<button>Submit</button>
<p id="pw-hint">The password should contain at least 18 characters</p>
Exemplo do uso do aria-describedby