I build these two navbars but constantly doubting myself that weather these are good or not in terms of my code, design, and accessibility stuff. I will very much appreciate feedback from you guys, If there are any mistakes, bad practices or hard coding in my code, please tell me because it helps me a lot in the long-term because I am a beginner and these are my micro-projects. Btw these navbars are made with only HTML and CSS and no Javascript because as a Pro Developer you must know fundaments excellently.
The hamburger menu icon needs to be in a <button>. Right now I can’t open it with the keyboard. Changing it to a button will fix this. Also, it needs to have some text associated with it for people who use screen readers. When focus is set on the hamburger button the screen reader needs to tell the reader what the button is for. So the text should be something like “Show Menu”. You can either put the text inside the button and visually hide it or add it to the button with the aria-label attribute.
If you want to be semantically correct then I think you need to use the <nav> tag.
Navbar 2 looks basically the same as 1 except the hamburger icon is on the right side. Same issues as above.
