Passo 6

Instruções

Como você se lembra das lições anteriores, o atributo aria-labelledby é usado quando há texto existente na página que pode ser usado como rótulo. Neste caso, você adicionou o atributo id aos seus elementos span que agora serão usados aqui. Adicione um atributo aria-labelledby ao elemento input definido como volume-label volume-description.

O que fazer:

Testes:

Seu elemento `input` deve ter um atributo `aria-labelledby`.
Seu elemento `input` deve ter um atributo `aria-labelledby` com o valor `volume-label volume-description`.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Accessible Controls</title>
  </head>
  <body>

    <h1>Audio Controls</h1>

    <button type="button">Play</button>

    <div>
      <span id="volume-label">Volume</span>
      <span id="volume-description">Adjust the sound level</span>
    
    <input type="range" min="0" max="100" value="50">
    
    </div>

  </body>
</html>

Preview