Hey there! Today, we're looking into how to build an accessible menu. I decided to write this article because recently, while running an accessibil...
For further actions, you may consider blocking this person and/or reporting abuse
Excellent article. I've been working on my personal website and trying to update the navigation to be more accessible, and this has been really helpful.
I would really love to see a follow-up on how to make this navigation menu responsive, and hide the items in a "hamburger menu" on mobile. I've found dozens of different tutorials on this, but most are not very accessible.
Thanks for the suggestion, You've given me an article idea to write about, kindly follow so you get a notification when I post it
Great article Elizabeth. Super clear and concise. I am bit concerned about the
menubarandmenuitemrole. Some accessibility experts speak against usingmenubarrole for a navigation, since it is seemingly not a "menu" by standard definition (a menu is supposed to be more like File/Edit/Settings menu in a desktop application), like this and this. What are your thoughtsCould you explain why not just do it this way?
because:
you can have limitless
<a>and with your sight you know how many<a>in the list. But using<li>can help screen reader user to have an overview how many list are them without run through everything manually. It give sense of menu overview for non sighted user. It will be announced "list of x item, item y of x". Imagine you have 100 link and you are not aware that there are 100 of them.cmiiw
I doubt I would have more than 5 links in a Header navigation
Well, sighted users can easily know it consists of 5 links just from the layout. By using a list, Screen reader users can expect how many menu items are available since the first keyboard focus lands on the first nav bar menu. Imagine skimming without seeing. We sighted users skim just by scrolling in less than 5 seconds.