4.6 KiB
4.6 KiB
id, title, challengeType, videoUrl, localeTitle
| id | title | challengeType | videoUrl | localeTitle |
|---|---|---|---|---|
| 587d7789367417b2b2512aa4 | Improve Accessibility of Audio Content with the audio Element | 0 | Melhore a acessibilidade do conteúdo de áudio com o elemento de áudio |
Descrição
audio do HTML5 fornece significado semântico quando ele envolve o som ou o conteúdo do fluxo de áudio na sua marcação. O conteúdo de áudio também precisa de uma alternativa em texto para ser acessível a pessoas surdas ou com deficiência auditiva. Isso pode ser feito com um texto próximo na página ou um link para uma transcrição. A etiqueta de audio suporta o atributo controls . Isso mostra a reprodução, a pausa e outros controles padrão do navegador e suporta a funcionalidade do teclado. Este é um atributo booleano, o que significa que não precisa de um valor, sua presença na etiqueta ativa a configuração. Aqui está um exemplo: <audio id = "meowClip" controla>Nota
<fonte src = "audio / meow.mp3" type = "audio / mpeg" />
<source src = "audio / meow.ogg" tipo = "audio / ogg" />
</ audio>
O conteúdo multimídia geralmente tem componentes visuais e auditivos. Ele precisa de legendas sincronizadas e uma transcrição para que os usuários com deficiências visuais e / ou auditivas possam acessá-lo. Geralmente, um desenvolvedor da Web não é responsável pela criação das legendas ou transcrição, mas precisa saber para incluí-las.
Instruções
audio após o p . Inclua o atributo controls . Em seguida, coloque uma etiqueta de source dentro das etiquetas de audio com o atributo src definido como "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" e type atributo definido como "audio / mpeg". Nota O clipe de áudio pode soar rápido e difícil de entender, mas essa é uma velocidade normal para os usuários do leitor de tela.
Testes
tests:
- text: O seu código deve ter uma etiqueta de <code>audio</code>.
testString: 'assert($("audio").length === 1, "O seu código deve ter uma etiqueta de <code>audio</code>.");'
- text: Certifique-se de que o seu elemento de <code>audio</code> tenha uma etiqueta de fechamento.
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Certifique-se de que o seu elemento de <code>audio</code> tenha uma etiqueta de fecho.");'
- text: A etiqueta de <code>audio</code> deve ter o atributo <code>controls</code>.
testString: 'assert($("audio").attr("controls"), "A etiqueta de <code>audio</code> deve ter o atributo <code>controls</code>.");'
- text: O seu código deve ter uma etiqueta de <code>source</code>.
testString: 'assert($("source").length === 1, "O seu código deve ter uma etiqueta de <code>source</code>.");'
- text: Sua etiqueta de <code>source</code> deve estar dentro das etiquetas de <code>audio</code>.
testString: 'assert($("audio").children("source").length === 1, "Sua etiqueta de <code>source</code> deve estar dentro das etiquetas de <code>audio</code>.");'
- text: O valor para o atributo <code>src</code> na etiqueta de <code>source</code> deve corresponder exatamente ao link nas instruções.
testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "O valor para o atributo <code>src</code> na etiqueta de <code>source</code> deve corresponder exatamente ao link nas instruções.");'
- text: O seu código deve incluir um atributo <code>type</code> na etiqueta de <code>source</code> com um valor de audio/mpeg.
testString: 'assert($("source").attr("type") === "audio/mpeg", "O seu código deve incluir um atributo <code>type</code> na etiqueta de <code>source</code> com um valor de audio/mpeg.");'
Semente do Desafio
<body>
<header>
<h1>Verdadeiros Ninjas Programadores</h1>
</header>
<main>
<p>Um clipe de áudio do leitor de tela Zersiax's em ação.</p>
</main>
</body>
Solução
// solution required