Navs and Navbar
Notes on Implementation
We implement Bootstrap’s Navs and Navbar components, with some tweaks to the visual appearance of the text to increase color contrast and include an underline. The documentation for Bootstrap Navs and Bootstrap Navbar is applicable.
Add a role=”navigation” to the parent container of the <ul>, or wrap a <nav> element around the whole navigation.
If more than one navigation menu is on a page, a label is necessary to distinguish between them. Use an aria-label or aria-labelledby attribute to provide the label on the <nav> element.
Use the aria-current=”page” attribute on the current/active element to indicate the current page in the menu.
We do not recommend using the Bootstrap dropdowns, as they do not use the proper attributes for accessibility.
Links must look like links. Color alone must not be used for distinguishing links (this is why an underline is often recommended). Navs and navbars should be styled consistently in terms of their behavior, appearance, and location on pages across a site. If this is done well, the underline on link elements is not necessary and can be removed. A navbar example without the link underlines is given below.
(Elements are not equal-width and nav fills entire width.)
(Elements are equal width and nav fills entire width.)