Page features

Navigation

To support people who use screen readers to navigate through a site;

• make sure the navigation is wrapped in a <nav> tag
• if dropdown menus are used, esure aria-haspopup="true" is used to tell screen readers that a navigation item has child elements and aria-expanded="true/false” is used to tell a screen reader when the dropdown is open or closed.

Call to action / banners

Ensure a consistent approach is used. For example: banners should be consistently presented so users can quickly understand their layout and what elements are links, content blocks or media. This is especially important for screen reader users.

Articles / listings

When creating a listing of articles, events or a grouping of banners, ensure that the following elements are included to help screen readers undertand their format:

• use list items for each article, screen readers can then announce the number of items in your article list
• use an <article> tag for each item
• include a <header> tag within each article to display the title
• if an article has multiple links for example on the image and a button, ensure that only one is read by a screen reader. Use aria-hidden=true to hide any secondary links
• in some listings you may be appropriate to include a <footer> tag. These should be used if a listing has any meta data such as tags or categories.

<ul>
  <li>
    <article>
      <div class="image-class">
       <a href="linklocation" aria-hidden="true">
         <img src="image-name.jpg" alt="descriptive alt text">
       </a>
      </div>
      <header><h2>Article header text</h2></header>
      Content or introductory text
      <a href="linklocation">link text</a>
    </article>
  </li>
</ul>