Improve Accessibility of Audio Content with the audio Element:
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:
<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.
Improve Chart Accessibility with the figure Element:
HTML5 introduced the figure element and the related figcaption.
Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption.
Wrapping these elements together gives a two-fold accessibility boost by semantically grouping related content and providing a text alternative explaining the figure.
For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments.
Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.
Here's an example - note that the figcaption goes inside the figure tags and can be combined with other elements:
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
No comments:
Post a Comment