Adding visually hidden headings to complete a page's outline
Not only the main content of a web page needs to be marked up using headings, but also other elements like header, navigation, footer, etc. As the visual design usually does not include those headings, they need to be visually hidden by moving them off-screen.
Additional regions on a web page
Besides the main content, a web page usually consists of many additional regions: a header, navigation(s), related sections (like advertisements), and a footer.
On the visual level, these regions typically are designed very distinct:
The header usually sits on top of the page, consuming the full page width.
The navigation may be part of the header, or on the left side of the main content.
Related sections may be at the right side of the main content, or below it.
The footer usually sits at the bottom of the page.
<divid="header"><p>
John Doe's Web Presence
</p></div><divid="nav"><ul><li><ahref="#">Home</a></li><li><ahref="#">Hobbies</a></li><li><ahref="#">About</a></li><li><ahref="#">Etc.</a></li></ul></div><divid="main"><h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><h2>
Physical Activities
</h2><h3>
Playing Soccer
</h3><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p><h3>
Dancing
</h3><p>
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p><h2>
Relaxing Activities
</h2><h3>
Watching Movies
</h3><p>
A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
</p></div><divid="footer"><p>
Copyright 2057 John Doe
</p></div>
Screen reader users do not perceive any visual attributes like size, shape, colour, etc., see Screen readers do not convey visual attributes. They rely solely on semantic information and descriptive text labels. The above example is missing all additional regions in the document outline.
Adding headings to additional regions
For screen reader users, descriptive elements are needed to give a page region a label. Again, the best way to provide such labels is using headings. So let's add those missing headings.
<divid="header"><h1>
Header
</h1><p>
John Doe's Web Presence
</p></div><divid="nav"><h1>
Navigation
</h1><ul><li><ahref="#">Home</a></li><li><ahref="#">Hobbies</a></li><li><ahref="#">About</a></li><li><ahref="#">Etc.</a></li></ul></div><divid="main"><h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><h2>
Physical Activities
</h2><h3>
Playing Soccer
</h3><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p><h3>
Dancing
</h3><p>
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p><h2>
Relaxing Activities
</h2><h3>
Watching Movies
</h3><p>
A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
</p></div><divid="footer"><h1>
Footer
</h1><p>
Copyright 2057 John Doe
</p></div>
<divid="header"><h1class="visually-hidden">
Header
</h1><p>
John Doe's Web Presence
</p></div><divid="nav"><h1class="visually-hidden">
Navigation
</h1><ul><li><ahref="#">Home</a></li><li><ahref="#">Hobbies</a></li><li><ahref="#">About</a></li><li><ahref="#">Etc.</a></li></ul></div><divid="main"><h1>
My Hobbies
</h1><p>
These all are activities I love to do on a regular basis.
</p><h2>
Physical Activities
</h2><h3>
Playing Soccer
</h3><p>
Soccer is a team sport played between two teams of eleven players with a spherical ball.
</p><h3>
Dancing
</h3><p>
Dance is a performing art form consisting of purposefully selected sequences of human movement.
</p><h2>
Relaxing Activities
</h2><h3>
Watching Movies
</h3><p>
A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.
</p></div><divid="footer"><h1class="visually-hidden">
Footer
</h1><p>
Copyright 2057 John Doe
</p></div>
