O atributo aria-describedby é usado para fornecer informações adicionais sobre um elemento para usuários de leitores de tela referenciando conteúdo existente na página. Ele cria uma associação programática entre o elemento e o conteúdo (tecnicamente referido como uma descrição acessível), que leitores de tela podem usar para informar os usuários sobre a informação adicional quando eles interagem com o elemento. O uso mais comum para aria-describedby é associar instruções e mensagens de erro com campos de formulário. Devido aos vários métodos que os usuários de leitores de tela têm para navegar em uma página, eles podem perder essas mensagens ao navegar entre os inputs. Usar aria-describedby ajuda a garantir que eles irão ouvi-los. Vamos dar uma olhada em alguns exemplos para entender como funciona. Neste primeiro exemplo, temos um elemento form que aceita uma senha. Ative o editor interativo e digite alguns caracteres no campo de entrada de senha. Você verá que a senha é mascarada na janela de visualização. Você também deve ver que o texto password-help permanece vermelho até que você forneça 8 ou mais caracteres no campo de entrada. NOTA: Este exemplo interativo está usando CSS e JavaScript para atualizar dinamicamente a cor do texto password-help. Não se preocupe em tentar entender o código JavaScript porque você aprenderá JavaScript em módulos futuros.

<link rel="stylesheet" href="styles.css">

<form>
  <label for="password">Password:</label>
  <input type="password" id="password" aria-describedby="password-help" />
  <p id="password-help">Your password must be at least 8 characters long.</p>
</form>

<script src="index.js"></script>

#password-help {
  color: red;
}

const passwordEl = document.getElementById("password");
const passwordHelpText = document.getElementById("password-help");

passwordEl.addEventListener("input", (e) => { 
  const userInput = e.target.value;
  passwordHelpText.style.color = userInput.length >= 8 ? "green" : "red";
});

Estamos usando um elemento label para o texto Password e associando-o ao campo de input de senha. Também temos um elemento de parágrafo que descreve os requisitos da senha. Estamos usando o atributo aria-describedby para associar o campo de input de senha com os requisitos de senha no elemento de parágrafo. Quando um usuário de leitor de tela interage com este input, seu leitor de tela anunciará o nome do input (Password) e pode então também anunciar os requisitos de senha. No entanto, isso não é uma garantia absoluta, pois alguns leitores de tela podem não anunciar automaticamente o conteúdo adicional ou podem anunciá-lo apenas em circunstâncias específicas. Isso não é incomum. Cada leitor de tela é diferente e lida com os atributos ARIA de sua própria maneira. Isso não anula o uso de aria-describedby, pois beneficiará os usuários de leitores de tela em geral. Outro bom caso de uso para o atributo aria-describedby é quando você tem um button de exclusão. Aqui está um exemplo de um button de exclusão seguido por uma mensagem descrevendo o que acontecerá quando o button for clicado:

<button aria-describedby="delete-message">Delete</button>

<p id="delete-message">Warning! All deletions are permanent.</p>

Assim como no exemplo anterior, associamos o botão de excluir com a mensagem usando o atributo aria-describedby. O valor de id e o valor do atributo aria-describedby devem corresponder. O atributo aria-describedby é um atributo poderoso que pode ser usado para ajudar a garantir que informações adicionais sobre um elemento sejam fornecidas aos usuários de leitores de tela quando eles interagirem com o elemento. É mais comumente usado para associar instruções e mensagens de erro com entradas de formulário a fim de reduzir a chance de que usuários de leitores de tela percam essas mensagens enquanto navegam pelo formulário.