It’s one thing to use a component that someone else has built. It’s another thing to know how it works. This is the fundamental difference between “someone who makes websites” and a professional web developer. So, it was high time I built my own - no frameworks, just me, HTML, CSS and JavaScript. Oh and Astro. Coz I want to get some experience using it.
I wanted to build a megamenu that would / could be W3C ARIA compliant. Particularly, I wanted good keyboard control. I haven’t tested it against a screenreader. It could be interesting to do so but this is a thing that is firmly in the “maybe later” column.
For keyboard control, I referred to the ARIA Authoring Practices Guide section on the Menu and Menubar Pattern. Specifically, I referred to the (Navigation Menubar Example)[https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/] for a description of the keyboard controls.
The top level design consisting of an HTML button element sitting beside an HTML anchor element both wrapped in an HTML LI element sourced from the ACCC website (https://accc.gov.au). I liked the ideas they use here:
Using HTML UL elements for the megamenu levels adds strong implicit semantics to the menu structure, enhancing the accessibility qualities of the megamenu pretty much for free. This yields some very useful results for a screenreader such as:
I’m not sure what the addition of the aria-role attributes do that I added - they were present on the ARIA Authoring Practices Guide, so I inserted them here.
The wrapping nav element has an aria-label set to “Main menu”, so a screen reader would read “Main menu”, when you focus the nav element then “List of 4 items” when you focus on the UL. Cool. That seems helpful.
In general for items that visually are a list, you gain benefits from making them a semantic list. Sure, there is likely to be some additional CSS but it’s hardly a burden, especially when you gain things for free with the screenreader.
Many of my constraints are a function of time. I just needed to get to “done enough”.
Adding additional keyboard support is a lot of work. While you do get some keyboard support out of the box, it is very limited.
Adding the ability to use the arrow keys requires thought and work to program but the result is well worth it. I would definitely not use my code as is - it’s very much still demoware and could use refactoring but it’s definitely a good start.
The use of the anchor tag and the button yield some good benefits.