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.

A11y Actions:

  1. Place your menu in one consistent area across all pages in your application
  2. Label your menus so they can be understood and differentiated easily
  3. Highlight the currently selected / active item in your menu using HTML or ARIA i.e.
  4. See the Order and Grouping section for best practices around grouping and ordering menu items
One of the best ways to check how accessible your navigation is, is to take on the keyboard / no-mouse challenge for web applications or the screen-reader challenge for mobile applications i.e. use your application with a screen-reader only

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.

A11y Actions:

  1. Ordered and unordered lists
  2. Use unordered lists for menu items where content can be accessed and consumed in random order, and
  3. Use ordered lists for menu items where systemic navigation matters
  4. Adhere to rules of lists
  5. Only have list tags (<li>) as children of your ordered and unordered lists. Avoid adding other types of elements to them.

Resources:

  1. Principles of improving app accessibility in Android - groups of related content

Semantics

Semantic elements are those that provide context about the nature of content held within them and include elements like <header>, <cite>, <section>, <p>, <footer>, and more while non-semantic elements like <div> and <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).

A11y Actions:

  1. Swap out all your non-semantic elements like <div> and <span> for semantic elements

Resources: