Headers and Peer Relationships
When we speak of peer relationships we are referring to the way screen readers group data elements. When a
screen reader user is reading data, it gathers things like header and list data... allowing the user to
compare and skip to the data they most want to read. So if there were four H2 elements on a page, the reader
would list those four items and the user could quickly skip to the fourth. When the reader gets to a list,
it speaks the lead content of each - again allowing the user to skip to the one they want.
See the following example...
- Apples
- Bananas
Sentence about Bananas goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Grapes
Sentence about Grapes goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Oranges
<ul class="list-unstyled odeListBuf5">
<li><span class="odeH2">Apples</span></li>
<li>
<span class="odeH2">Bananas</span>
<p>
Sentence about Bananas goes here. Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt...
</p>
</li>
<li>
<span class="odeH2">Grapes</span>
<p>
Sentence about Grapes goes here. Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt...
</p>
</li>
<li><span class="odeH2"><a href="">Oranges</a></span></li>
</ul>