Nav type attribute
Disclaimer, I work on the Edge Web Platform team, but this proposal does not imply Microsoft’s support or lack of for this proposal, or any intent to implement. It is an individual proposal meant to start discussion on if it is a good idea or not.
HTML5 added the nav element. One problem with this is there is author confusion (including sometimes this author) on which sets of links should use nav. The spec has changed at least once to address this and it is still not concretely clear: http://html5doctor.com/nav-element/ .
For example the spec states:
The element is primarily intended for sections that consist of major navigation blocks
…but major may mean different things to different people.
Beyond developer experience, the current use of
<nav> is probably inconsistent for Screen Reader users. A nav element is a landmark, so if devs use it differently you get different experience for the same types of navigation. If you have a bare element a screen reader may just announce navigation.
Some devs that are more accessibility aware may label with aria-Label, such as Breadcrumbs component in the Salesforce Design System, A11y Style Guide, or the edge.ms dev site.
- requires localization
- different devs use different labels.
- in some languages the label combined with the control type might not read out ideally, such as the correct order
If we add the type attribute (or similar), we can:
- Explicitly define in spec correct/recommended use cases, while still allowing bare nav, or nav with aria-label for those not in spec
- Have localization built into the user agent so labels for same units of navigation are consistent
Example values could be:
site: Site wide navigation, usually found inside header element. Maybe this could be inferred if in header closest to root if no type.
page: Navigation for the current page. The ones usually found in a side bar. Not sure if this would be same as TOC or should be another for that, as the whole document/article is not always on one page
breadcrumb: Breadcrumb navigation
pagination: Pagination controls often found at bottom of articles
My thinking is this would do something similar to
<input type="number"/>, etc. where the A11y layer sets a localised control type. “Breadcrumb navigation”, or “pagination” for example. This would probably be defined in HTML AAM.
Currently all nav are part of landmark navigation. If this was included, they could be mapped differently if needed, such as if some more minor nav types shouldn’t be a landmark. Custom behaviour could also be applied if desired, and could also perhaps be used as an additional hint for content adaption such as browser reading modes, etc.
In the future it could also be extended to allow different contents for different types, such as maybe restricting contents of nav type=“breadcrumbs” to a list, or introducing new markup such as the equivalent of aria-current to notate the current breadcrumb.