Skip to content

Category: development

A11y 101: 2.5.3 Label in Name

We all navigate the internet and computers in different ways. Some use screen readers, others keyboard, and some people by voice. Success Criterion 2.5.3 was created to support these diverse methods. While it helps all users, it was created to address using voice control because typing is a struggle for the user. On the screen is a button that clearly says “Submit Order.” You speak the command: “Click Submit Order.”

Nothing happens.Or worse, it clicks the wrong thing.

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

A11y 101: 2.5.2 Pointer Cancellation

Last week I wrote about gestures and pointers. This week we look at the next criteria, Pointer Cancellation. I mentioned that we wanted events to fire on the “Up” or “release” action. And that’s what this criteria is all about. We need to make sure that if a user creates a down event on a control, we need to allow them to cancel. Let’s look at the methods used.

Comments closed

A11y 101: 2.5.1 Pointer Gestures

If you’ve been following my work or this blog for a while, you’ll know I’m always referencing that authors need to support both mouse users as well as keyboard users. What I haven’t mentioned much of is touch. Touch devices have given us a number of different modalities to interact with applications and the web. The problem arises when users don’t have the ability to touch the screen, or only have a single pointer when multiple are needed. Or perhaps they can’t perform the gesture. This is the point of this success criteria, providing an alternative for those users. Let’s check out how we do this.

Comments closed

Quick Tip: Do Not Replicate OS Behavior

This applies to browser behavior as well. I’ve been encountering a significant number of sites recently where the site tries to offer the user ways to make the site more accessible. Sometimes these are part of an overlay or widget providing accessibility “fixes” and sometimes they are part of the core code. In both cases they are taking the wrong approach to implementing help. Let me explain why.

Comments closed

A11y 101: 2.4.7 Focus Visible

Disabilities come in all sorts. So do users. Some users can manipulate a mouse. Some rely on keyboard alone. Others have assistive technology. When you use a mouse, where your mouse is located is visible. This lets the sighted mouse user know what they are clicking on and where the focus is. Keyboard only users need something else. Let’s get into the details of what is needed.

Comments closed

A11y 101: 2.4.5 Multiple Ways

In the physical world we understand that not everyone can climb 20 flights of stairs, so under the ADA we created rules to overcome these situations. Buildings now have commitments they need to make during construction to include ramps and elevators to access areas that someone might not be able to climb stairs. This is an example of multiple ways. Let’s review how that translates to digital spaces.

Comments closed

Rethinking Cookie Dialogs

If you are anything like me, you don’t want your data sold to third parties. You probably run ad blockers. Maybe a VPN. Some governments are trying to help by requiring the site to declare what cookies are used and providing the user to opt out. But the current method of displaying this information tends to have some serious accessibility issues. I have another way of thinking about them I’d like to propose.

Leave a Comment