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 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 CommentYou’ve seen the warnings before TV shows and movies. “This show contains flashing lights.” This warning on visual media also applies web sites and apps. Guideline 2.3.1 addresses this by implementing a requirement that reduces the potential for severe damage. Let’s discuss why.
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 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 CommentsYesterday Apple unveiled their new design system, Liquid Glass. It is replacing the design we currently see in order to provide more design options to your device. The basic concept of liquid glass is that all UI will look like glass. This includes spectral aberrations, highlights, and shadows. All these elements are presented on a transparent background. The default font color looks adapts based on the background. Lighter backgrounds are supposed to show darker fonts, and dark background shows lighter fonts.They didn’t address what happens if the background has both.
Out of the box, this new design style presents accessibility issues. The contrast will rarely be correct for normal vision users to see, much less low vision users. Users can adjust this easily, and I expect Apple to respond with this as their “compliance” answer.
Am I being aggressive here? I hope not. I believe it is important to call out Apple on this. Apple is aware that the design styles they create will eventually take over design. It happened with the Mac, the iMac translucent back, and iMac swivel head. It also happened with MacBooks, the iPod, and the iPhone. Skeuomorphism is another example. Must I go on?
Unfortunately, Apple is more than a product company. They’re more than a software company. They’ve become a lifestyle company. They shift thinking. They spawn design thieves who make knock off products.
The federal government is taking actions that appear threatening to disabled people. Over the years, Apple, you have been doing a good job as an accessibility leader. We need you on our side now more than ever. Liquid Glass is not what we need in this moment.
Apple has iOS 26.1 in developer beta and some of the concerns about Liquid Glass are being addressed.
See me on LinkedIn or Bluesky if you want to discuss this.
1 CommentIn 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
