freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.spanish.md

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
587d7789367417b2b2512aa4	Improve Accessibility of Audio Content with the audio Element	0		Mejorar la accesibilidad del contenido de audio con el elemento de audio

Description

El elemento de audio de HTML5 da un significado semántico cuando envuelve el contenido de la transmisión de sonido o audio en tu marca. El contenido de audio también necesita un texto alternativo para que las personas sordas o con dificultades auditivas puedan acceder a él. Esto se puede hacer con un texto cercano en la página o un enlace a una transcripción. La etiqueta de audio soporta el atributo de controls. Esto muestra los controles de reproducción, pausa y otros controles predeterminados del navegador y es compatible con la funcionalidad del teclado. Este es un atributo booleano, lo que significa que no necesita un valor, su presencia en la etiqueta activa la configuración. Aquí hay un ejemplo:

<audio id = "meowClip" controles>
<source src = "audio / meow.mp3" type = "audio / mpeg" />
<source src = "audio / meow.ogg" type = "audio / ogg" />
</audio>

Nota
El contenido multimedia suele tener componentes tanto visuales como auditivos. Necesita subtítulos sincronizados y una transcripción para que los usuarios con discapacidades visuales y / o auditivas puedan acceder a ella. Generalmente, un desarrollador web no es responsable de crear los subtítulos o la transcripción, pero necesita saber para incluirlos.

Instructions

Es hora de tomar un descanso de Camper Cat y conocer a su compañero campista Zersiax (@zersiax), un campeón de la accesibilidad y un usuario lector de pantalla. Para escuchar un clip de su lector de pantalla en acción, agrega un elemento de audio después de la p. Incluye el atributo de controls. Luego coloca una etiqueta de source dentro de las etiquetas de audio con el atributo src configurado en "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" y el atributo type establecido en "audio / mpeg". Nota
El clip de audio puede sonar rápido y ser difícil de entender, pero esa es una velocidad normal para los usuarios lectores de pantalla.

Tests

tests:
  - text: Tu código debe tener una etiqueta de <code>audio</code> .
    testString: 'assert($("audio").length === 1, "Your code should have one <code>audio</code> tag.");'
  - text: Asegúrate de que tu elemento de <code>audio</code> tiene una etiqueta de cierre.
    testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Make sure your <code>audio</code> element has a closing tag.");'
  - text: La etiqueta de <code>audio</code> debe tener el atributo de <code>controls</code> .
    testString: 'assert($("audio").attr("controls"), "The <code>audio</code> tag should have the <code>controls</code> attribute.");'
  - text: Tu código debe tener una etiqueta de <code>source</code> .
    testString: 'assert($("source").length === 1, "Your code should have one <code>source</code> tag.");'
  - text: Tu etiqueta de <code>source</code> debe estar dentro de las etiquetas de <code>audio</code> .
    testString: 'assert($("audio").children("source").length === 1, "Your <code>source</code> tag should be inside the <code>audio</code> tags.");'
  - text: El valor del atributo <code>src</code> en la etiqueta de <code>source</code> debe coincidir exactamente con el enlace de las instrucciones.
    testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.");'
  - text: Tu código debe incluir un atributo de <code>type</code> en la etiqueta de <code>source</code> con un valor de audio / mpeg.
    testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.");'

Challenge Seed

<body>
  <header>
    <h1>Verdaderos Coding Ninjas</h1>
  </header>
  <main>
    <p>Un clip de sonido del lector de pantalla de Zersiax en acción.</p>



  </main>
</body>

Solution

// solución requerida