3.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d7789367417b2b2512aa4	Mejorar la accesibilidad del contenido de audio con el elemento de audio	0	https://scrimba.com/c/cVJVkcZ	301014	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:

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg">
  <source src="audio/meow.ogg" type="audio/ogg">
</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--

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".

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.

assert($('audio').length === 1);

El elemento audio debe tener una etiqueta de cierre.

assert(
  code.match(/<\/audio>/g).length === 1 &&
    code.match(/<audio.*>[\s\S]*<\/audio>/g)
);

La etiqueta audio debe tener el atributo controls.

assert($('audio').attr('controls'));

Tu código debe tener una etiqueta source.

assert($('source').length === 1);

La etiqueta source debe estar adentro de las etiquetas audio.

assert($('audio').children('source').length === 1);

El valor para el atributo src en source debe coincidir exactamente con el link en las instrucciones.

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.

assert($('source').attr('type') === 'audio/mpeg');

--seed--

--seed-contents--

<body>
  <header>
    <h1>Real Coding Ninjas</h1>
  </header>
  <main>
    <p>A sound clip of Zersiax's screen reader in action.</p>



  </main>
</body>

--solutions--

<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>

3.6 KiB Raw Blame History