Skip to content

Tag: user experience

A11y 101 – 3.2.3 Consistent Navigation

Imagine walking into your favorite library. You know exactly where the fiction section is. It’s always on the second floor, to the left of the stairs. The librarian knows where you go. Your feet know the way. It’s muscle memory.

It is a week later when you walk in, and suddenly fiction is in the basement, behind the coffee shop, accessible only through a secret door behind the periodicals. The stairs are now an elevator, but it’s on the other side of the building. The librarian has vanished.

You’d feel disoriented. Frustrated. Maybe even a little unsafe. You’re just trying to find a book, not solve a puzzle.

Comments closed

Quick Tip: Dialog Focus

The specifications for dialogs and modals recommend placing focus on the first focusable item in the dialog. The vast majority of the time this is a close button. this means that a screen reader user will hear something similar to “Dialog, Shopping Cart, Close, button.”

As a user this is confusing. I just added something to my cart, or I just opened it to checkout. And now your site is telling me that while I’m in the cart I should close it.

I strongly recommend that this is not the best practice we should be following. We should be providing the user with information they need in a way that encourages them to explore. To accomplish this, I recommend placing the focus on the heading of the dialog. We do this by providing a proper ID and tabindex="-1". Now when the user opens the cart dialog they would hear something like “Dialog, Shopping Cart.” This tells me my focus has shifted due to my actions, where the focus went by identifying, and I’m not hit with the confusing close button.

This is my opinion, it differs from many, but it fills the gap between accessibility and user experience to create a better flow for everyone. But I’m not alone in this opinion.

Comments closed