Posted on

Designing Accessible Navigation Talk

About half year ago I was speaking accessible navigation patterns in Jyväskylä WordPress meetup. Designing Accessible Navigation is part two of that talk. It’s pretty much the same in the end but this time design had more focus.

Anyways it was great to meet everybody after summer holidays in our WordPress Helsinki meetup!

Meetup group

Here is the link to my Designing Accessible Navigation slidesLiisa Benmergui gave an excellent talk about designer and developer collaboration.

I highlight couple of things we discussed in the meetup.

Designing Accessible Navigation

How to define what does accessible navigation means? Joe Dolson have written article about designing accessible navigation and it sums the definition very well.

  • Works without Javascript and CSS (screen readers, search engine bots).
  • Works for users with difficulty reading text.
  • Works for users with difficulty seeing low-contrast colors or certain color contrast.
  • Works using keyboard only.
  • Works on “every” device and screen size.

In my opinion “do nothing” approach is the most accessible navigation pattern. It easily qualifies all the accessible menu definitions and doesn’t need any extra work from the user. Or from the developer.

In “do nothing” menu you just show the menu items all the time. There is no hamburger menu toggle buttons or any other extra steps to access menu items.

themehybrid accessible menu
Accessible menu in ThemeHybrid site.

Remember Color Contrast

Be careful with background images and color contrast in responsive design. It can be really hard to see white text on white background.

color contrast on background image and text is not good

Note that above image is not what we used on live site 🙂 As a solution use dark color overlay on image. Or put dark background on text.

Other design related notes

In my slides there are lot’s of technical stuff (but not in “do nothing” menu) you need to take care when building accessible menu. But here here are couple of notes about the design.

dropdown navigation

Should there be arrow icon as a dropdown indicator? I’d say yes.

mobile toggle button designs

Mobile toggle button design is sometimes hard. Even if I would prefer to just have the text open/close menu, it can be hard to fit to design on other languages. You know because of the long long words. New generation probably understands hamburger menu without any label but here are couple of interesting posts to read.

I’d say there is use case for every menu toggle design. It depends is boring answer but that’s all I got.

Update. Note that there is new recommended method using menu toggle button like this: <button class="menu-toggle" type="button">Menu</button>.

Notice the attribute type="button" there. Here is explanation from Joe Dolson why:

It means a button with no additional semantics: e.g., not a submit or reset button. It means that the button won’t do anything if your JS events don’t fire – e.g., no need for preventDefault, because there’s no default action.

For more technical details check the designing accessible navigation slides. Cheers!