HTML5 sectioning elements and screen readers



(Please note that the Edge browser has been updated since this testing was conducted.)

HTML5 offers a number of sectioning elements, which might be perceived as equivalent to Aria roles. Actually only some of these elements are fully equivalent to ARIA roles, so they should be used very carefully. Attention should even be paid to elements listed as ones which directly define ARIA landmarks (see HTML Sectioning Elements: ARIA Landmarks Example), because various screen readers on various browsers may not support a particular element.

The following elements were tested: Section, Article, Header, Footer, Nav, Aside, Main and Form were tested with Aria-Label, Aria-LabelledBy and Title attributes. Tests were conducted with the following screen readers on the following platforms: JAWS 2019 on Chrome 73 and Firefox 69 (Windows 10), NVDA 2019.2 on Chrome and Firefox (Windows), Narrator on Edge 11 (Windows), TalkBack 8 on Chrome 76 and Firefox 68.1 (Android 11), VoiceOver on Safari (iOS 12.4).

Edge is still not well supported by JAWS and NVDA. At the same time Narrator supports Edge, but its functionality with other browsers is extremely limited. That is why Narrator was tested only with Edge, whereas NVDA and JAWS were not tested with Edge.

Results

Results: Header, Nav, Aside and Main were interpreted by screen readers the same way as corresponding Aria landmarks, i.e. they were navigable by a hotkey or a gesture assigned to a landmark (or region) navigation available within a particular screen reader. They were also, with some exceptions, announced by screen readers with the same phrase as Aria landmarks are.

HTML5 sectioning elements which were interpreted by screen readers the same way as equivalent ARIA roles

Footer element

The Footer element is interpreted as a landmark by most screen reader and browser combinations. The exception is TalkBack on Chrome. Unlike on Firefox, on Chrome Footer is not recognized as a landmark. As a result, the user cannot quickly get to a footer by switching TalkBack to navigation by landmarks and using swipe up/down gesture. It is worth noticing that a DIV with ContentInfo Aria role is interpreted correctly by TalkBack on Chrome.

Screen reader’s support for Footer element

SECTION element

TalkBack on Chrome is the only screen reader and browser combination which interprets Section as a landmark. Using Section with Aria-LabelledBy, Aria-Label or Title makes screen readers treat the Section element as a landmark, but there are a few exceptions.

Screen readers’ support for Section element

FORM element

Narrator on Edge is the only screen reader and browser combination which interprets Form as a landmark. Adding Aria-Label, Aria-LabelledBy or Title makes JAWS and NVDA on Firefox interpret the tag correctly. However it does not apply to Chrome. On Chrome for Android with TalkBack there is an issue which does not allow getting any results (any operation with a screen reader is not possible when the focus gets to the form area).

Screen readers’ support for FORM element

Article element

Narrator, NVDA and TalkBack on Firefox do not interpret the Article tag in any noticeable manner. JAWS interprets the tag, but it is not included within navigation by landmarks. If the user wants to get to the article by using a hotkey, instead of pressing “R” (next landmark), they should press “O” (next article). This separation of article and other landmarks might be done for user’s convenience.The Article tag is supported and included within navigation by landmarks by TalkBack on Chrome and VoiceOver on Safari.

Screen readers’ support for ARTICLE element

Conclusion

With only four HTML5 sectioning elements being supported by screen readers it is still much safer to use Aria roles even in case of simple pages. If HTML5 sectioning elements are being used, the page should be manually tested with various screen readers to make sure the tags are correctly interpreted.

Combined results

Navigation by landmarks

Screen readers allow users to quickly navigate between elements on a page. On Windows the navigation is done by pressing a hotkey. Almost every kind of element has its own hotkey assigned, so “H” and Shift with “H” is navigation by headings, “E” and Shift with “E” is navigation by edit fields, etc. Navigation by landmarks also has a separate hotkey. Some hotkeys are the same for all screen readers and some are not. On smartphones navigation by certain elements is achieved by a sequence of gestures.

JAWS

• Navigation by regions: R, Shift with R
• Navigation by articles: O, Shift with O

NVDA

• Navigation by landmarks: D, Shift with D

Narrator

• Navigation by landmarks: D, Shift with D

TalkBack

To switch navigation in TalkBack you use one finger up/down gesture. However navigation by landmarks cannot be selected this way. To enable navigation by landmarks do as follows:

• Open a web page and make sure the focus is not on an editable element.
• Swipe one finger up and right (if nothing happens, repeat the gesture – TalkBack does not always recognize this gesture well).
• Select “landmarks” from the list of available navigation options.

Now using one finger swipe right/left you should be able to navigate between landmarks.

VoiceOver

In VoiceOver you can switch navigation granularity by a rotor gesture which is performing a semicircle with two fingers slightly apart from each other. Navigation by landmarks is not added by default to rotor list. You need to add it. Do as follows:

• Open Settings or General or Accessibility or VoiceOver or Rotor.
• Select “Landmarks”.

Since now navigation by landmarks will be available via rotor gesture. On a page perform a rotor gesture until you see and/or hear “landmarks”. To navigate between landmarks use one finger up/down gesture.