Mobile Tests: Navigation Landmarks

This is a test of how screen readers announce navigation landmarks, prompted by an apparent bug in VoiceOver in iOS.

Menu 1: <nav> element, no ARIA

Results

Menu 2: Added role="navigation" to <nav> element

Results

Menu 3: Same as Menu 2, plus aria-label="Main Navigation Menu" on <nav> element

Results

Menu 4: No role="navigation", just aria-label="Main Navigation Menu" on <nav> element

Results

Menu 5: Moved role="navigation" and aria-label="Main Navigation Menu" to <ul> element

Results

Menu 6: Same as Menu 2, but used role="main"

Results

Menu 7: Same as Menu 6, but added aria-label="Main Menu" to <nav> element

Results

Summary

This section is marked up with role="complementary", and VoiceOver in iOS 5 announces it with "Landmark start". So my conclusion is that VoiceOver in iOS5 recognizes landmarks, but does not announce their names. If an aria-label is present, it will announce that. This suggests that we should always use aria-label, even if the function of the landmark is obvious given its role. However, doing so creates a lot of extra verbiage in JAWS since it announces both if both area present.

Also, the behavior of VoiceOver on iOS5 does not hold true on <nav> elements. Even if an aria-label is present on a <nav> element, VoiceOver does not announce it. This suggests that we should avoid adding ARIA landmarks to <nav> elements. In the case of a menu such as this one, I recommend adding role="navigation" and aria-label="Main menu" to the <ul> element. Notice that I'm not using the word "Navigation" in the aria-label—this is to avoid redundancy in JAWS.