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

---
id: 587d7789367417b2b2512aa4
title: Improve Accessibility of Audio Content with the audio Element
challengeType: 0
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
---

## Description
<section id='description'>
HTML5's <code>audio</code> element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.
The <code>audio</code> tag supports the <code>controls</code> attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on.
Here's an example:

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

<strong>Note:</strong> Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them.
</section>

## Instructions
<section id='instructions'>
Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an <code>audio</code> element after the <code>p</code>. Include the <code>controls</code> attribute. Then place a <code>source</code> tag inside the <code>audio</code> tags with the <code>src</code> attribute set to "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" and <code>type</code> attribute set to "audio/mpeg".
<strong>Note:</strong> The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.
</section>

## Tests
<section id='tests'>

```yml
tests:
  - text: Your code should have one <code>audio</code> tag.
    testString: assert($('audio').length === 1);
  - text: Make sure your <code>audio</code> element has a closing tag.
    testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g));
  - text: The <code>audio</code> tag should have the <code>controls</code> attribute.
    testString: assert($('audio').attr('controls'));
  - text: Your code should have one <code>source</code> tag.
    testString: assert($('source').length === 1);
  - text: Your <code>source</code> tag should be inside the <code>audio</code> tags.
    testString: assert($('audio').children('source').length === 1);
  - text: The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.
    testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3');
  - text: Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.
    testString: assert($('source').attr('type') === 'audio/mpeg');

```

</section>

## Challenge Seed
<section id='challengeSeed'>

<div id='html-seed'>

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


  </main>
</body>
```

</div>


</section>

## Solution
<section id='solution'>

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

</section>
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`---`
			`id: 587d7789367417b2b2512aa4`
			`title: Improve Accessibility of Audio Content with the audio Element`
			`challengeType: 0`
			`videoUrl: 'https://scrimba.com/c/cVJVkcZ'`
			`---`

			`## Description`
			`<section id='description'>`
			`HTML5's <code>audio</code> element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.`
			`The <code>audio</code> tag supports the <code>controls</code> attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on.`
			`Here's an example:`
fix(curriculum): Convert blockquote elements to triple backtick syntax for Responsive Web Design (#35993) * fix: converted blockquotes to code fences 2019-05-14 01:11:58 -07:00
			```html
			`<audio id="meowClip" controls>`
			`<source src="audio/meow.mp3" type="audio/mpeg" />`
			`<source src="audio/meow.ogg" type="audio/ogg" />`
			`</audio>`
			```

fix: updated the note sections for responsive web design english (#35528) 2019-03-22 22:02:12 +08:00			`<strong>Note:</strong> Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them.`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`</section>`

			`## Instructions`
			`<section id='instructions'>`
			Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an <code>audio</code> element after the <code>p</code>. Include the <code>controls</code> attribute. Then place a <code>source</code> tag inside the <code>audio</code> tags with the <code>src</code> attribute set to "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" and <code>type</code> attribute set to "audio/mpeg".
fix: updated the note sections for responsive web design english (#35528) 2019-03-22 22:02:12 +08:00			`<strong>Note:</strong> The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`</section>`

			`## Tests`
			`<section id='tests'>`

			```yml
chore(curriculum): Remove files in wrong format 2018-10-04 14:37:37 +01:00			`tests:`
			`- text: Your code should have one <code>audio</code> tag.`
fix: removed assert msg argument (#36405) 2019-07-24 02:42:26 -07:00			`testString: assert($('audio').length === 1);`
chore(curriculum): Remove files in wrong format 2018-10-04 14:37:37 +01:00			`- text: Make sure your <code>audio</code> element has a closing tag.`
fix: removed assert msg argument (#36405) 2019-07-24 02:42:26 -07:00			`testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.>[\s\S]<\/audio>/g));`
chore(curriculum): Remove files in wrong format 2018-10-04 14:37:37 +01:00			`- text: The <code>audio</code> tag should have the <code>controls</code> attribute.`
fix: removed assert msg argument (#36405) 2019-07-24 02:42:26 -07:00			`testString: assert($('audio').attr('controls'));`
chore(curriculum): Remove files in wrong format 2018-10-04 14:37:37 +01:00			`- text: Your code should have one <code>source</code> tag.`
fix: removed assert msg argument (#36405) 2019-07-24 02:42:26 -07:00			`testString: assert($('source').length === 1);`
chore(curriculum): Remove files in wrong format 2018-10-04 14:37:37 +01:00			`- text: Your <code>source</code> tag should be inside the <code>audio</code> tags.`
fix: removed assert msg argument (#36405) 2019-07-24 02:42:26 -07:00			`testString: assert($('audio').children('source').length === 1);`
chore(curriculum): Remove files in wrong format 2018-10-04 14:37:37 +01:00			`- text: The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.`
fix: removed assert msg argument (#36405) 2019-07-24 02:42:26 -07:00			`testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3');`
chore(curriculum): Remove files in wrong format 2018-10-04 14:37:37 +01:00			`- text: Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.`
fix: removed assert msg argument (#36405) 2019-07-24 02:42:26 -07:00			`testString: assert($('source').attr('type') === 'audio/mpeg');`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00
			```

			`</section>`

			`## Challenge Seed`
			`<section id='challengeSeed'>`

			`<div id='html-seed'>`

			```html
			`<body>`
			`<header>`
			`<h1>Real Coding Ninjas</h1>`
			`</header>`
			`<main>`
			`<p>A sound clip of Zersiax's screen reader in action.</p>`
fix(challenge-md): Fix quotes that failed in the transform 2018-10-08 01:01:53 +01:00


feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`</main>`
			`</body>`
			```

			`</div>`



			`</section>`

			`## Solution`
			`<section id='solution'>`

fix(curriculum): Add solutions to 16 Applied Accessibility challenges #35751 (#35809) This commit adds 16 full working solutions to the responsive web design principles dealing with applied accessibility. 2019-04-24 09:42:46 -04:00			```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>`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			```
fix(curriculum): added extra line before </section> tag - Engl… (#36278) 2019-07-18 08:24:12 -07:00
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`</section>`