This site contains a variety of tests of web features, with a specific interest in identifying best practices for designing websites that work well on mobile devices, especially for users with blindness and low vision.
The current page uses HTML5 semantic elements plus five ARIA landmark roles.
VoiceOver supports navigation through the all five landmarks, but it doesn't identify the landmark by name (e.g., "navigation", "main"). To address this shortcoming, each element that has an ARIA landmark role also needs an aria-label attribute. VoiceOver now announces each landmark by the value of its aria-label.
NOTE: If the landmark region starts with a list, VoiceOver does not announce the name of the landmark. Initially I discovered this because I had placed role="navigation" and aria-label="Navigation" on the <nav> element, but VoiceOver was just announcing "Landmark start", not announcing this as the navigation region. Subsequent tests revealed that this happens in any region where a list is the first child of an element with a landmark role. This happens regardless of whether the list contains links. I found two workarounds:
- Make the list itself the landmark region. In the case of the navigation menu, add role="navigation" and aria-label="Navigation" to the <ul>, not to <nav>
- Add content prior to the list (e.g., a heading or paragraph). If this content is hidden by positioning it off-screen (e.g., position:absolute;left:-9999em) it still works (it doesn't work if hidden using display:none). Unfortunately this workaround introduces redundancy for screen readers that already announce landmark names, but I think it can be used wisely.