Build Navbar Menus That Actually Work for Everyone
Get started with Miro: https://miro.pxf.io/xLL1ev
How to use Aria Attributes and Responsive CSS to build an Accessible and Responsive Navigation Bar Menu using HTML, CSS and JavaScript.
You will learn how accessibility works in HTML using aria-attributes like aria-expanded, aria-controls, aria-hidden, and of course how to make a navbar responsive using Flexbox and media queries. This responsive navigation uses the inert attribute to make a navbar untabbable when it is collapsed. You will also learn the difference between the hidden and inert attribute in html.
Become a Member to Support our Channel:
👉 / @coding2go
GET OUR HTML AND CSS COURSE
👌 https://www.udemy.com/course/learn-ht...
Source Code on our website:
👉 https://www.coding2go.com
SOURCES AND CREDITS:
Coder Coder: • How to build an accessible hamburger ...
Watch her video to learn more about accessibility in hamburger menus
DOWNLOADS ICONS HERE:
Menu Icon:
https://fonts.google.com/icons?select...
Close Icon:
https://fonts.google.com/icons?select...
RELATED CONCEPT YOU SHOULD LEARN:
CSS Flexbox: • CSS Flexbox Tutorial for beginners
CONCEPTS YOU WILL LEARN IN THIS VIDEO:
✔ Responsive Navbar with HTML CSS and JavaScript
✔ Accessible Navigation Menu with ARIA-Attributes in HTML
✔ Navbar Accessibility
✔ understand aria-attributes
✔ aria-label, aria-expanded, aria-controls, aria-hidden
✔ responsive hamburger menu
✔ accessible hamburger menu with ARIA
✔ WAI-ARIA
✔ web accessibility
✔ responsive web design
✔ responsive navbar with aria
✔ accessible and responsive website navigation
I hope you learned something new ;)