The purpose of this exercise is to demonstrate how the use of semantically meaningful HTML elements effects a webpage when it is being processed through voiceover. As described in module-4, start by forking and cloning this repository. When you open up the page on your local machine, you should listen to it using voiceover. While the page visually appears to have structure, it is very difficult to understand that structure via audio. To improve the accessibility of the page, you should do the following:
- Replace the
<span>
elements that currently represent the headers with proper<h*>
elements - Provide appropriate
alt
attributes in the<img>
tags - Encapsulate the elements at the bottom of the page in a
<footer>
tag - Wrap the main content of the page in a
<main>
tag
When you are finished, the page will look the same, but it will sound quite different. You should
See the complete
branch for answers.