freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-au...

---
id: 587d7789367417b2b2512aa4
title: Improve Accessibility of Audio Content with the audio Element
challengeType: 0
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
forumTopicId: 301014
dashedName: improve-accessibility-of-audio-content-with-the-audio-element
---

# --description--

HTML5's `audio` 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 `audio` tag supports the `controls` 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>
```

**Note:** 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.

# --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 `audio` element after the `p`. Include the `controls` attribute. Then place a `source` tag inside the `audio` tags with the `src` attribute set to `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` and `type` attribute set to `"audio/mpeg"`.

**Note:** The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.

# --hints--

Your code should have one `audio` tag.

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

Your `audio` element should have a closing tag.

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

The `audio` tag should have the `controls` attribute.

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

Your code should have one `source` tag.

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

Your `source` tag should be inside the `audio` tags.

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

The value for the `src` attribute on the `source` tag should match the link in the instructions exactly.

```js
assert(
  $('source').attr('src') ===
    'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
);
```

Your code should include a `type` attribute on the `source` tag with a value of 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>
```
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`---`
			`id: 587d7789367417b2b2512aa4`
			`title: Improve Accessibility of Audio Content with the audio Element`
			`challengeType: 0`
			`videoUrl: 'https://scrimba.com/c/cVJVkcZ'`
fix(curriculum): Added forumTopicId to remaining 1200 challeng… (#36558) 2019-08-05 16:17:33 +00:00			`forumTopicId: 301014`
feat(curriculum): restore seed + solution to Chinese (#40683) * feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com> 2021-01-13 02:31:00 +00:00			`dashedName: improve-accessibility-of-audio-content-with-the-audio-element`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`---`

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			`# --description--`

			HTML5's `audio` 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 `audio` tag supports the `controls` 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.

feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			`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 08:11:58 +00:00
			```html
			`<audio id="meowClip" controls>`
fix: remove forward slash from <source> tag (#41422) The forward slash at the end of the <source> tag in the example is removed, as this is more common. 2021-03-09 16:20:22 +00:00			`<source src="audio/meow.mp3" type="audio/mpeg">`
			`<source src="audio/meow.ogg" type="audio/ogg">`
fix(curriculum): Convert blockquote elements to triple backtick syntax for Responsive Web Design (#35993) * fix: converted blockquotes to code fences 2019-05-14 08:11:58 +00:00			`</audio>`
			```

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			`Note: 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.`

			`# --instructions--`

chore(learn): audit files for crowdin (#40838) * chore(learn): audit files for crowdin Audits the challenge text in the Responsive Web Design superblock to account for words/phrases that should not be translated because they refer to code. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: remove quotes from code Removes instances of quoted code blocks, or code blocked quotes. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: additional uncaught quote-codes Thanks Oliver :) Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: so many quotes Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: missing punctuation Noted in a Crowdin comment. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: remove more quotes Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> 2021-02-01 19:56:07 +00:00			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 `audio` element after the `p`. Include the `controls` attribute. Then place a `source` tag inside the `audio` tags with the `src` attribute set to `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` and `type` attribute set to `"audio/mpeg"`.
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00
			`Note: The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.`

			`# --hints--`

			Your code should have one `audio` tag.

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

			Your `audio` element should have a closing tag.

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

			The `audio` tag should have the `controls` attribute.

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

			Your code should have one `source` tag.

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

			Your `source` tag should be inside the `audio` tags.
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			```js
			`assert($('audio').children('source').length === 1);`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00			```

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			The value for the `src` attribute on the `source` tag should match the link in the instructions exactly.

			```js
			`assert(`
			`$('source').attr('src') ===`
			`'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'`
			`);`
			```
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			Your code should include a `type` attribute on the `source` tag with a value of audio/mpeg.
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			```js
			`assert($('source').attr('type') === 'audio/mpeg');`
			```

			`# --seed--`

			`## --seed-contents--`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
			```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 00:01:53 +00:00


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

Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format. 2020-11-27 18:02:05 +00:00			`# --solutions--`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 22:01:58 +00:00
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 13:42:46 +00: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 22:01:58 +00:00			```