Headings and labels need to describe the content they are identifying in the content. This means when you have a H1 is should describe the page as a whole. Labels need to describe the data they are collecting. Seems simple. And usually it is. Let’s look at some examples of when it isn’t as clear.
Comments closedIn 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 closedYou’ve most likely heard the term “skip link.” The standard take on the skip link is we include a visually-hidden link at the top of the page. When it receives focus, it becomes visible and when activated jumps you to the main content. While this is the primary use and function of this guideline, I’ve found it applies to other areas. Let’s look at the different reasons and methods.
1 CommentSEO folks, come at me. The overall product card has gotten cluttered with too many calls to action. It’s killing the point of the interface.
Ecommerce sites have a mind-boggling amount of links. Especially if you are a large company selling diverse things. Just to get to the product list, we first navigate through a mega menu. We do this to choose a category on most eCom sites. Then on the category page, we have to deal with a bunch of filters. If we’re lucky they will be in accordions and we can close them to skip.
1 CommentIt was Christmas Day in 2012 that I had my first major incident. You see, for as long as I could remember I suffered from migraines. I recall having to takes days off school when I was a freshman. But they started before that. At this moment in time, I was getting 20+ migraines a month. I had migraines that would last days. I had some last hours. Those were the worst. I’d start to feel better to only have another come on before the end of the day. Along with the migraines would come anxiety, nausea, dizziness, brain fog, aphasia. But that day was different.
1 CommentYou know the feeling. You’ve just spent the last twenty minutes filling out a form on a website. Suddenly, it asks for a specific piece of information. You need to dig for this information. You spend the next 7 minutes digging in your desk, files, computer, until you find it. Flip back to your form, and you are logged out.
If you are lucky, the form will allow you sign back in and continue from there. There’s a good chance you may need to start over. For you it is frustrating and takes time. But what if you can’t complete the form in the time given? Maybe it’s because you can’t answer the questions quickly enough.
1 CommentHopefully those of you working towards EAA are breathing a little easier today. While some of you were pushing last minute updates, I attended my local Pride celebration.
Well organized and attended, it reminded me why I do this work. People from 1-99+. People with visible disabilities. People with disabilities only visible because they made it so by wearing a device to control the disability (hearings aids off, headphones, walkers instead of canes). This wasn’t a celebration of LGBTQ+, this was a celebration of people being people.
1 CommentThis is being posted Monday June 23rd, 2025. On Friday, the 28th, EAA goes into effect. If you haven’t completed your efforts to be completely accessible, I have one piece of advice:
Don’t stop now. Keep working on it.
2 CommentsAdmiral Ackbar is letting us know something important. When we navigate by keyboard, we need to make certain of one thing. Make sure that a user doesn’t get trapped with no where to go.
This seems really simple, but it gets complicated quickly. And I know what seems simple to one person is traumatically difficult for another. Let’s talk about what a trap is, some examples, and ways to prevent them.
A keyboard trap is any control that receives focus, but does not release it. Usually, the keyboard is trapped from moving in any direction. Sometimes it may be trapped in one direction, generally forward.
I’ve encountered some that prevent moving forward, but allow moving backward. Usually this presents a workaround, but not always. Even if there is a word around, it is still a violation.
Often developers will put a “forward” action on an input when the content meets a certain regex or pattern. This is difficult because the input is saying, “If I have 5 numbers, tab to the next control.” This becomes a keyboard trap as the keyboard only user cannot tab back into the field to correct it.
More common though is a disclosure control that isn’t following the <h3><button>Title</button><h3> pattern. Often the button is somewhere else or outside the heading. When the control is in focus, nothing happens.
If you do not need a screen reader to understand the screen, turn it off. If you require a screen reader, put it in forms mode. Forms mode will only respond to Tabbing and form control with the default keys. We don’t want interference from the AT.
Tab. Again. Shift tab. Keep using tab to navigate through the page, and do it in reverse. If you get stuck, try using the Escape key. Did that get you out? if yes, did it push you backwards or forwards?
If you find you can escape the trap, try repeating the situation in both directions multiple times. If you got out, this belongs in usability advice. If you can’t get out or can’t move in both directions, you have a violation.
In most cases of keyboard traps, the cause is going to be JavaScript. Typically there is a function tied to the field being focused or activated. This can cause a race condition freezing the browser. More likely, there is function that prevents tabbing out, or the function tied to moving out is not firing.
Take the object where the keyboard trap is happening. Reproduce it locally, then start stripping back all that is tied to it. For example, if you are using custom dropdown, remove all the custom code. Begin with the base HTML <select> and <option> elements.
Is there still a keyboard trap? If you extracted all JS hooks and custom HTML, there should be no trap. Once we establish that the basic HTML works, let’s expose the custom HTML.
Hide any classes tied to JS functions. Remove data attributes. Get the JS out of the way. And try it again. Is it stuck now? Then it is time to examine out HTML again. No, then we slowly start adding in JS one item at a time until we find out trap.
I cannot really tell you how long to remediate this would be. Everyone’s architecture is different and will cause different problems in different ways. But finding the trap’s location might take a day. Determining the cause could also take time, even for the most skilled developer. I recall early on spending 10 hours searching for an error in my code. It turned out to be the dreaded missing semicolon. It happens to all of us. Its about how do we fix it once we know of it.
Have questions? Come talk to me on LinkedIn or BlueSky!
2 CommentsIn the beginning, there was only the command line.
Xerox and Apple brought us a graphical user interface (GUI)and the mouse. A small handheld tool to help you move across the GUI and interact with the objects on it. But we still had the keyboard. As time wore on, people forgot about the keyboard more and more.
… 1 Comment
