Accessible Navbar
This project is an implementation of an accessible navbar. It is built with HTML, CSS and JavaScript.
The navbar is implemented with semantic HTML elements, making it accessible for screen readers. The navbar also has ARIA attributes and keyboard interactions, making it easier for users to navigate with a keyboard. The dropdown menu is hidden by default, but is displayed when the user focuses on the menu item or clicks on it. It can also be closed by pressing Enter or Escape.
The navbar has been tested on Chrome and Firefox, and should be compatible with other modern browsers.
Case Study
The goal of this project was to create a navbar that was both accessible and keyboard navigable. The following items were taken into consideration when creating the navbar:
- Keyboard navigable using tab
- Add aria-hidden
- The drop-down list is activated using the tab key
- Enter activates the dropdown, escape closes the dropdown
- Dropdowns should close when switching from one dropdown to another
- Using vanilla js or React js