Medium-term wins are modifications that take a bit more time to implement in your application than accessibility quick wins. These are key, and we strongly recommend that you prioritize incorporating them into your application.
Structural presentation of a menu and its items i.e. in a list gives a good basis for assistive technologies to pick out menu items and serve corresponding functionality to assistive technology users. Coding menus semantically makes them adaptive to different scenarios i.e. different-size screens, varying zoom/ magnification levels and access via different assistive technologies.
- Place your menu in one consistent area across all pages in your application
- Label your menus so they can be understood and differentiated easily
- Highlight the currently selected / active item in your menu using HTML or ARIA i.e.
- See the Order and Grouping section for best practices around grouping and ordering menu items
Order and Grouping
Grouping related items in your application makes it easier for screen readers to keep track of progress and overarching context as a user navigates the application. Any items that are grouped visually should also be represented similarly semantically.
- Ordered and unordered lists
- Use unordered lists for menu items where content can be accessed and consumed in random order, and
- Use ordered lists for menu items where systemic navigation matters
- Adhere to rules of lists
- Only have list tags (
<li>) as children of your ordered and unordered lists. Avoid adding other types of elements to them.
Semantic elements are those that provide context about the nature of content held within them and include elements like
<footer>, and more while non-semantic elements like
<span>do not provide context about what to expect in them.
The four properties that constitute a semantic element are
- name (an element’s label),
- role (describes an element’s function like input or button),
- value (complements the role i.e. input=text) and
- state (communicates how elements are configured i.e. enabled, collapsed, etc).
- Swap out all your non-semantic elements like
<span>for semantic elements