Page features


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.
      <div class="image-class">
       <a href="linklocation" aria-hidden="true">
         <img src="image-name.jpg" alt="descriptive alt text">
      <header><h2>Article header text</h2></header>
      Content or introductory text
      <a href="linklocation">link text</a>