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:
👉 https://www.youtube.com/channel/UCGpoeEhUBQBaaKZ_a8HB67Q/join
GET OUR HTML AND CSS COURSE
👌 https://www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-bootcamp/?couponCode=CODING2GO
Source Code on our website:
👉 https://www.coding2go.com
SOURCES AND CREDITS:
Coder Coder: https://youtu.be/pBv7igaxfQE?si=gvT13VTVAUsm81Br
Watch her video to learn more about accessibility in hamburger menus
DOWNLOADS ICONS HERE:
Menu Icon:
https://fonts.google.com/icons?selected=Material+Symbols+Rounded:menu:FILL@0;wght@300;GRAD@0;opsz@40&icon.size=40&icon.color=%23c9c9c9&icon.style=Rounded
Close Icon:
https://fonts.google.com/icons?selected=Material+Symbols+Rounded:close:FILL@0;wght@300;GRAD@0;opsz@40&icon.size=40&icon.color=%23c9c9c9&icon.style=Rounded
RELATED CONCEPT YOU SHOULD LEARN:
CSS Flexbox: https://youtu.be/bbaKrRU4MVk
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 ;)