Jeffrey’s Believe It or Not
Here is my small contribution to Mr. Ripley’s wealth of true stories that were hard to believe:
I made this site’s menus accessible in about 11 minutes.
Oh, that’s nice,
you say? I am betting that you
are not a Web developer if this is your reaction.
Their reactions are more along the lines of: He must be smoking those funny cigarettes.
A common defense for not making accessible Web pages is lack of time. The perception is that accessibility always involves adding huge amounts of HTML attributes and dozens of lines of extra JavaScript.
This perception sometimes is correct. My frustration is that, many times, it is absolutely not more work but few people listen.
Here is my true story, believe it or not.
- I began by creating the basic menu structure with standard HTML elements for lists, buttons and links. So far, this was a pretty ordinary approach. I had a system that screen reader users could navigate using the keyboard, but they probably would not know they were in a menubar or popup menu.
-
I spent about 30 seconds to wrap the menus with a
<nav>element. This enables screen readers to announce when the user is working in the main navigation area of the page. -
In a minute or 2, I added
aria-labelattributes to the menubar buttons. This enables screen readers to announce a label like “articles menu.” -
In another 2 or 3 minutes, I added the
aria-controlsandaria-expandedattributes on the buttons that control menus. This enables screen readers to announce that the button controls a menu and whether the menu is open or closed. -
Finally, in 4
or 5 minutes, I added a few lines of JavaScript code to control the
aria-expandedattribute and to set the browser focus in the popup menu when it opens.
Menu projects are rather ordinary and there are many examples on the Web for making them accessible. That is part of why my accessibility efforts here went so fast. I was not reinventing the wheel.
My primary inspiration was the blog by well-known accessibility guru Bryan Garaventa at Creating Accessible Menus and Mega Menus. His approach supports creating more complex menus than what I need for my little site. So I simplified his idea a bit.
Certainly, you can find some accessible menu solutions that are time-consuming to implement. The result can be very impressive. I just prefer promoting solutions that are more practical.
Published: