I created some navigation bar using CSS and JavaScript, all are simple beginner level codes. Hope this will help you some day, I did not make the design complicated, you can use your skills on these to create awesome designs.
You can find my Navigation Design Collection in codepen here. If you have time please provide feedbacks, I did not take accessibility features into considerations and these are not optimized for production, just want to experiment with code as I am trying to gain more knowledge in web development.
Top comments (14)
Don't forget semantic HTML and accessibility bud!
<nav>instead of<div class="nav"is much better for instance as that allows people using assistive tech to jump to the site navigation with shortcuts!Also you have a few little issues such as:
<ul>and<li>(which is super useful for screen reader users as it tells them how many items there are in the navigation list then "1 of 6" for example)<div>as a child of an<ul>(which is invalid HTML and will cause strange issues in some screen reader / browser combos).A big issue is for the menus that "open" (6th example) you aren't using a
<button>to open the menu so that will make it unusable via keyboard. (You also needaria-expandedandaria-controlsbut tackle the big issues first!)Other than those points there are some great examples of design ideas etc. here, just want to make sure stuff marked "#beginners" is correct so we don't reinforce bad habits!
Let's make 2022 the year of semantics and accessibility (or at least that is my mission 🤣)! ❤
It really is disturbing how many people can't even code the HTML for a menu properly, crapping pointless "DIV for NOTHING" all over the place, omitting lists... and then when they get to the layout and design it all reeks of utter and complete ignorance of the most basic of accessibility minimum.
I mean seriously, white text on yellow and lime-green? REALLY?
That said, don't think that aria role trash does ANYTHING of value. If he had the proper semantics, it's a menu. Concepts like "expanded" and "controls" is pointless, redundant, and to be frank border on saying what things look like or how they behave, NEITHER of which is any of HTML's business. Neither of those do anything that the NAV tag and proper UL/LI wouldn't provide... especially the mentally enfeebled "aria-expanded" nonsense as if a screen reader, braille reader, or search engine gives a flying purple fish about whether something is open or not. In most cases, that isn't even a thing that matters for them!
But what do I know? I don't even use JavaScript for menus that open and close. And no I don't use BUTTON for that either. It's called hash links, the :target pseudo-state, anchors, and ID's.
See my article "Semantic UI Doesn't Even Use Semantic Markup"
If you go into the demo:
cutcodedown.com/for_others/medium_...
There's not a single line of JavaScript involved, there is NO reason to add Aria roles to any of it.
The hash technique being so powerful, you can even use it to make modal driven sites with little to no JS... which I wrote about in this article:
levelup.gitconnected.com/modal-dia...
The best part being that for non-visual UA's the anchors for closure are "hidden" si they don't exist, they're empty so even if they did exist they wouldn't show, and for ones like modals where we want the link to do something, it's just a hash link on-page so it still navigates to those sections. No extra semantics, aria nonsense, JavaScript, and so forth needed!
Fun stuff. So much of the stuff people waste JS on aren't even JS' job.
A comment worthy of being one of my accessibility rants! 🤣
The problem with the
:targetmethod is the fact you have to change the URL (which affects the back button obviously) in order to perform actions that should not update the URL.I am quite a fan of using it as a no-JS fallback but overall it is better to use minimal JS to move focus to the close button on an open menu (and even more importantly to return focus to the button that opened the menu in the first place) and prevent the URL updating so you don't clutter the browser history.
(for example in the demo of yours when I open the menu the focus is not on the close button so I have no focus indicator and then when I close it my focus is not on an active item so I have no focus indicator, I can also tab out of the menu without it closing and also tab to items within the menu when it is closed etc.). Also you still need JS to close the modal with Esc so you can't avoid it entirely!
As for
aria-controlsandaria-expandedthey are useful for complex SAAS applications, but it is certainly food for thought on whether they should be used on simple websites as the focus management aspects are more than sufficient!Interesting one to think about as sometimes it is easy to follow "best practices" without questioning whether they actually are!
Certainly one I will be exploring in a series I have planned for this year "Ultimate-UI" (which will be a great one for you to rant on if you think I get things wrong as it is meant to be "perfect" UI elements! So I would love feedback when those come out!).
As for the rant on semantic UI - Mwwwaaahhh (chefs kiss noise) it is similar to my rant on "Headless-UI "Fully Accessible" - it's not your fault you believe the 💩 BS 💩" as there is no consequence for these companies making false claims!
Also while I am self-plugging things that I think you might enjoy ultimatemotherfuckingwebsite.com/ will hopefully make you semantically happy and smile at me poking fun at idiocy all at the same time!
Great rant, wish I could give you a unicorn but a ❤ and a thanks for the smile will have to do!
Sorry to my limited knowledge, I will invest some more time to get better on accessibility, thanks for the feedback.
Let's make 2022 the year of semantics and accessibility, yes, I think I need to give more importance to it, but I am confused where to start, I tried to learn but I get confused and stop implementing it. Before I asked you some resources that will help me to get better in accessibility, you did provided, as I was fighting with some really bad health issues I was away for some time. So for a fresh start can you link some resources, beginner level stuff that will be helpful to make my code more friendly. I hope you will be successful in your mission.
I will do you one better, you tell me which bits you are struggling with and I will write an article designed around you!
Hope your health is improved now? ❤
You could right an article briefing about necessary accessibility features a website must have, where to use aria roles, required aria properties, states etc..
Health is getting better ❤
Thank you for this post. I'm a beginner in frontend and I'm trying to learn semantically correct HTML but almost in every tutorial or course I'm finding deviation from the "light side of the force".
When practicing coding I try to do everything to avoid div tags. I really enjoy using nav, section, article, ul, and so on.
It would be awesome to have some kind of semantically correct template for html which will include some most often used tags.
I am doing 2 series this year (well I am doing 4!) that will help with a lot of this:
Ultimate UI [💻 EP0: Series introduction and posts for the year! 🎨]
InHuOfficial ・ Jan 3 ・ 4 min read
and
WCAG in plain English [🦾 EP0: Series introduction and posts for the year! 🦾]
InHuOfficial ・ Jan 3 ・ 5 min read
So hopefully they should cover nearly everything related to semantics, HTML and Accessibility in a beginner friendly way!
I find it disturbing that you'd even use JavaScript -- for ANYTHING -- on a menu like this, much less feel the need to use it to calculate the layout... something Flex or Grid can do with ease. If you have to resort to JS for layout, you need to learn more HTML and CSS.
Likewise all of these menus lacking the proper semantics of NAV, UL, and LI tags is doing no favors on the accessibility front.. but I guess that goes with the fafct that not a single one of these menus would meet accessibility minimums in terms of colour contrast, font faces, or font metrics.
Sorry to say that ALL of these seem to have deep-rooted problems in terms of accessibility usability, semantics, and every other basic concept of design and web coding.
Yes, you are right what you said about accessibility, usability, semantics... totally agreed.
Love it ❤️👍
This is amazing! Great work Dev!
SOMETHING COOOOOOOOLLLLLLL Thanks Bud