To support people who use screen readers to navigate through a site;
- make sure the navigation is wrapped in a
- 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=trueto 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>