greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/curriculum/challenges/espanol/01-responsive-web-design/applied-accessibility/improve-accessibility-of-au...

116 lines
3.6 KiB
Markdown
Raw Normal View History

chore(i8n,learn): processed translations
2021-02-06 04:42:36 +00:00
---
id: 587d7789367417b2b2512aa4
title: Mejorar la accesibilidad del contenido de audio con el elemento de audio
challengeType: 0
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
forumTopicId: 301014
dashedName: improve-accessibility-of-audio-content-with-the-audio-element
---
# --description--
El elemento `audio` de HTLM le da un significado semántico cuando contiene sonido o contenido de flujo de audio en el código. El contenido del audio también necesita un texto alternativo para que las personas sordas o con dificultad para escuchar puedan acceder al mismo. Para esto debe tener un texto cercano en la página o un enlace a una transcripción.
La etiqueta de `audio` suporta los atributos `controls`. Esto muestra los controles por defecto de reproducir, pausar, entre otros controles, y soporta la funcionalidad del teclado. Este es un atributo booleano por lo que no necesita un valor, su presencia en la etiqueta activa la configuración.
Acá tenemos un ejemplo:
```html
<audio id="meowClip" controls>
chore(i8n,learn): processed translations (#41433) Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
2021-03-10 15:16:44 +00:00
<source src="audio/meow.mp3" type="audio/mpeg">
<source src="audio/meow.ogg" type="audio/ogg">
chore(i8n,learn): processed translations
2021-02-06 04:42:36 +00:00
</audio>
```
**Note:** El contenido multimedia generalmente tiene componentes visuales y de audio. Se necesita sincronizar los subtítulos y una transcripción para que los usuarios con dificultades de vista o con problemas para escuchar puedan tener acceso a las mismas. Por lo general, un desarrollador de web no se responsabiliza de la creación de subtítulos o transcripciones pero necesita saber para incluirlos.
# --instructions--
chore(i18n,learn): processed translations (#41378) * chore(i8n,learn): processed translations * Update curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
2021-03-05 15:43:24 +00:00
Es hora de salir del Camper Cat y conocer a nuestro compañero Zersiax (@zersiax), un campeón en accesibilidad y un usuario de lector de pantalla. Para escuchar un clip de su lector de pantalla en acción, añade un elemento `audio` después de `p`. Incluye el atributo `controls`. A continuación, coloca una etiqueta `source` dentro de las etiquetas `audio` con el atributo `src` establecido en `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` y el atributo `type` establecido en `"audio/mpeg"`.
chore(i8n,learn): processed translations
2021-02-06 04:42:36 +00:00
**Note:** El clip del audio puede sonar rápido y quizás sea difícil de entender pero esta velocidad es normal para los lectores de pantalla.
# --hints--
Tu código debe tener una etiqueta `audio`.
```js
assert($('audio').length === 1);
```
El elemento `audio` debe tener una etiqueta de cierre.
```js
assert(
code.match(/<\/audio>/g).length === 1 &&
code.match(/<audio.*>[\s\S]*<\/audio>/g)
);
```
La etiqueta `audio` debe tener el atributo `controls`.
```js
assert($('audio').attr('controls'));
```
Tu código debe tener una etiqueta `source`.
```js
assert($('source').length === 1);
```
La etiqueta `source` debe estar adentro de las etiquetas `audio`.
```js
assert($('audio').children('source').length === 1);
```
El valor para el atributo `src` en `source` debe coincidir exactamente con el link en las instrucciones.
```js
assert(
$('source').attr('src') ===
'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
);
```
El código debe incluir un atributo `type` en la etiqueta `source` con un valor de audio/mpeg.
```js
assert($('source').attr('type') === 'audio/mpeg');
```
# --seed--
## --seed-contents--
```html
<body>
<header>
<h1>Real Coding Ninjas</h1>
</header>
<main>
<p>A sound clip of Zersiax's screen reader in action.</p>
</main>
</body>
```
# --solutions--
```html
<body>
<header>
<h1>Real Coding Ninjas</h1>
</header>
<main>
<p>A sound clip of Zersiax's screen reader in action.</p>
<audio controls>
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
</audio>
</main>
</body>
```