Skip to main content
Oregon.gov Homepage

A2O Questions

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>

Your browser is out-of-date! It has known security flaws and may not display all features of this and other websites. Learn how

×