Dr. Ronny Andrade Parra

Annotations are a powerful way to communicate accessibility intent to when handing designs to developers. Using annotations leads to a more smooth design handover. This post demonstrates the use of annotations to indicate headings and tabbing order.

Heading annotations

According to the WebAIM screen reader user survey 2023-2024, 71.6% of screen reader users navigate a new website relying on headings, so it is critical that the right elements are marked as headings, and that they use the right heading levels.

The above example clearly shows how headings of levels 1 through 4 are used to create a logical structure for the content on the page. Additionally, the side navigation bar also includes headings. We decided to place the side navigation bar last in the “tabbing order” (see below), so through headings and the use of the <nav> tag, screen reader users can jump to it more efficiently.

Tab order annotations

Keyboard and screen reader users use the Tab key to navigate websites. So, it is important to indicate the order in which elements receive focus as users “tab” through a page. Other assistive technologies also rely on this “tabbing” order, even if the interaction does not necessarily occur through a keyboard.

The example above shows that the “Apply” and “Enquire” buttons are the first elements that users tab through, followed by a stylised radio group that lets users switch between “Domestic” and “International”. Finally, the tab order example shows that the navigation links on the side bar must be the last elements to be reached with Tab. This was a deliberate decision to ensure assistive technology users can access the content more efficiently.