Solution Applied Accessibility: Improve Accessibility of Audio Content with the audio Element

Contributors
#1

What is your hint or solution suggestion?

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

<audio id="meowClip" controls>
  <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg" />

</audio>

  </main>
</body>

Challenge: Improve Accessibility of Audio Content with the audio Element

Link to the challenge:

#2

Hello there.

Thank you, for your contribution. For future contributions, please wrap your solution within :

[details]
```
code goes here...
```
[/details]

Also, provide all of the necessary code to pass the challenge.

Also, when you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor ( </> ) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

#3

Can you please provide a brief explanation to accompany your solution?

#4

Hello I was having difficulty in this topic and I saw that there was no tip or solution so I tried to contribute.

If I did something wrong sorry

#5

You didn’t do anything wrong. I just reformatted your submission so the code is wrapped in spoiler tags.

Can you please provide a brief explanation to accompany your solution?

#6

[Tips 1]

You need to create an audio tag with a source of attribute controls 

<audio id="meowClip" controls source>

[Tips 2]

Include src whith type audio.

``` src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg" ```

[Tips 3]

Include a `type` attribute on the `source` tag with a value of audio/mpeg. 

<source src="audio/meow.ogg" type="audio/ogg" />

[Solution]

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

<audio id="meowClip" controls source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg" />
  <source src="audio/meow.ogg" type="audio/ogg" />
</audio>

  </main>
</body>
1 Like
#7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.