In 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 CommentThat’s it. That’s the tip. WCAG doesn’t round.
… 1 CommentI’ll be honest, I often question if I’m evaluating this one right. Let’s look at what the text of 1.4.13:
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
- Dismissible: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
- Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
- Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.
I use my mouse or keyboard to focus on a control. When new content is exposed, I need to follow these rules.
I need to allow the user to dismiss this without moving the mouse or keyboard focus. OK, that is clear, but how do we do it? I can’t move the mouse, and I can’t move keyboard focus, then I need another action I can take. This is why we always implement the Escape key to close these exposed layers.
If you hit ESC while one dialog is open, it will close. If you hit ESC while 2 or three are open, they will all close. For single page applications, or modal “sheets,” if users are several levels deep, they go back to the beginning when they hit ESC. You need to keep control of propagation as well as a track of which dialog opened which. As the user hits ESC, we need to stop propagation after closing the dialog. We also need to return focus to the control that opened it.
If I opened the new content with mouse, I also need to move around inside the new content. This does mean that when we are opening it, we are waiting for an exit event before we close it.
Now, that exit event could be a variety of things. Hitting ESC. Mousing over another control that exposes content. Clicking outside the container. The choices are many, but that it is clear how to do it is crucial.
The best practice is to use an event tied to a button. This allows the keyboard user to activate the button to open it and close it. This also benefits users who rely on voice control. The mouse user can also open by clicking, or you can add hover to open the area. But mousing out on it’s own won’t close it. That needs another event that is clear the user is done with this object.
For me this is where I always got confused. What does it mean to be persistent? For how long? What if I click somewhere else on the page? Do I have to close the dialog before moving to some other control?
Persistent means once opened, it stays open until you close it. To close it you can do any of the following:
Best practice: Use at least one in addition to the ESC key.
Have more questions? Want to discuss this? Find me on LinkedIn and BlueSky!
1 CommentMany of the auto scanning tools on the market will flag for suspicious text on links and buttons. Sometimes the settings for that tool will flag long alternative text as well. Some look at short lengths. We flag character length because we can’t verify the item makes sense in context. This is something computers cannot do. Even with the best AI out there, computers can’t detect the intention of the control.
Comments closedThe internet is made for consuming content in two main ways:
But the people using the internet don’t all follow the rules and need modifications. One area where we see a lot of modification for customer control is through the text layout. In some cases the issue could be the font, the font weight, or color that makes it difficult to read. Sometimes it’s just the spacing.
1 CommentToo often, I see companies touting their high accessibility scores. They use tools like aXe Core, Lighthouse, Access Engine, or other free automated tools to derive them. But this only tells a part of the story, and it doesn’t even tell half of it. Let’s explore what is needed, why, and how we go about continuing the testing.
I work at Level Access. We have our own toolset that we use internally. While I work there, I try to remain agnostic in talking about tools and techniques.
Like any project, we need a few tools to help us do the job we’ll need.
We’ve gathered our tools and we are ready to begin testing…or are we? The last two items I mention in the Tools section are a scope and objective. We need to know the objective of the audit. Is it to update their backlog with any accessibility issues? Is it because they need a VPAT? I ask these questions because it influences how I scope.
Scoping is an art to itself. I’ll give a brief overview here. The first part of scoping is understanding the objective and the primary flows.
Look at each primary flow. Are there shared experiences? Yes, we probably only need to test one. Do they use the same header or footer? That can be one unit to test as it is global. Identify patterns used the site and capture them. If pages use templates, say a product details page, capture one of each to test. A thorough audit will likely involve more than 10 pages or units to test. Most of my clients come in around 15-20.
If there is a need for a VPAT, we will add a few more pages. We want to make sure we capture a sample of everything. In the first audit style we may not look at the About Us, Contact, Terms & Conditions, etc. But with a VPAT to be authored, I would be reviewing these as well.
Setup your spreadsheet. I like to make pivot tables and drop downs for key sections. Like which guideline is involved, what disabilities are affected, anything where you will be repeating things from a limited collection.
If your vision requires a screen reader, use it instead of the mouse.
Time to start testing. You have your scope. The key here is getting to know the site layout and functionality. Go through every single page in your scope with the mouse and only the mouse. Figure out what items are active controls and how they respond to the mouse.
Now that I have familiarized myself with site, I run my automatic testing tools. Depending on the tool you use and how you have it configured, you’ll have a few ways to do this. Some tools look at one page and report findings back in the Chrome Developer tools. If they allow you to export them to a spreadsheet, collect that. You have one for each page tested to compile later. If it doesn’t export, you will need to manually copy them to your spreadsheet.
You may want to roll your own testing bot that can push content to a database. There are several free and open source tooling that will let you run a headless browser with Node.JS to make calls to pages and return the tested output. I’m now playing around with this for a different project.
Automatic tools at best cover 40% of all WCAG criteria. If a company says their AI enhanced tool does better, you may hit 50% coverage. This is because AI doesn’t understand intent, purpose, or how people think into account.
Review every automatic to make sure there are no false positives. Every company out there is saying they get fewer or no false positives. I have yet to find a tool that can honestly say “zero false positives.”
If your vision requires a screen reader, skip this step.
Keyboard testing is based off our mouse testing. We now want to navigate the site like we did in step one without the use of the mouse. We want to ensure that only active controls receive focus. We also check that controls can be used by the keyboard fully in their design. Log anything that doesn’t work properly with keyboard only. Log anything that gets focus, yet is a static element. Caveat – if the link is an in-page link and the target is static a tabindex of -1 is allowable. Repeat this until the page is completely reviewed.
Now you may want to move onto another screen, and that’s fine. Many folks like to go through a project with one tool, then the next. I test my projects by page or screen. So I go through all the steps on a screen, then mark the screen done. You do this as it best works for you.
Pick your screen reader. Remember, these are often device dependent. Repeat Step 2 with the screen reader on. Now, we are determining if the active controls have proper accessible names. Do the names include the visual text? Will they work with the screen reader?
A control might work with the screen reader off but not with it on. You could be in the wrong mode of the screen reader. There is virtual browse mode. Here the screen reader intercepts all keystrokes as a way to provide faster navigating. This uses Tab to access active controls and arrows to read by line.
There is also a forms mode where the screen reader doesn’t intercept keystrokes. Usually this is invoked by moving into a form field. If it is not, use the screen reader’s hot key plus the space bar will usually change this. In NVDA, this is Insert/Caps Lock + Space bar. Try that widget now. It should work, and if it doesn’t, log it.
Pick your picker! Until you are capable of computing contrast ratios with your own eyes, you will need a color contrast testing tool. There are dozens out there. My favorite is Level Access’s Accessible Color Picker. Before that it was Colour Contrast Analyzer.
Which one matters less than if it is giving you accurate ratios.
There are multiple contrast ratio methods currently being discussed among the Accessibility Guidelines Working Group (authors of WCAG). We realize there are many color combinations that fail the WCAG standards. However, these combinations are perfectly viable for colorblind and low vision users. One of the calculation methods is called APCA. There is a strong probability it will be used in WCAG 3. However, it is not the standard now, so use a color contrast tool based on the WCAG 2.x algorithm.
You need to know the audience of the site or product you are testing. For instance, the targeted audience of this blog is people interested or involved in accessibility work. I have some basic posts, and some more advanced. My language is always meant to be as simple as possible. However, there are specific things I expect others in the domain to understand. One of these is the term WCAG.
Why do we need to know the audience? Because we need to check if the writing on the site is hitting the right audience.
For instance, providing a legal interpretation of a document. If the audience is other lawyers, you use one style. You include as much jargon and as many shortcuts as possible, because you expect them to know the domain.
If the audience is the general layperson, we need to write as if speaking to 13-year-olds. Our language should be clear and simple.
Over a decade ago, I wrote about this for the A11yProject.com. The post is still up and accurate. I’ll relist the resources for testing before the next step.
AI has many great features. One is its ability to identify when text should be simpler. I use it all the time to help clarify my writing. You may be able to use AI-based tools for this. It depends on your access to the admin portion or source code.
When it seems that I have completed my testing, I bring out the WCAG Quickref again. One by one, I read each guideline’s purpose and understanding. For each one, I’ll think through if I might have missed this in my testing. I check each page in scope and log anything I forgot to log earlier.
Now what do you do? Well, this depends on your contract. Good things to do with your client are review the list. Pull out 5-10 of the most important issues. Explain why you pulled them, their impact to users, and how to fix them. Leave them with a priority list of fixes. You could complete a VPAT and issue an ACR. You can work with their team on remediation efforts.
You don’t want to leave the client hanging. Don’t just log 100 or more bugs and walk away. Because next year when they update the product, they’ll need more testing. When they roll out a new product, they will need more testing. Help the client improve through training, fixing, or guiding them.
Don’t do this for free either. When I was independent, I would charge for the evaluation based on scope, not hours. But I’d also put in a recurring monthly support charge. This included 5 – 10 hours monthly paid up front. It is a retainer I take regardless if they use that support. If the time used in a month exceeds the retainer, that gets added to the next invoice. But now we’re entering business practices and that is a different blog post.
Happy Global Accessibility Awareness Day (GAAD)! Have questions or want to discuss this, hit me up on LinkedIn and BlueSky.
A little bonus – Level Access has a lot going on today if you’d like to check out training.
1 CommentI’ve been in the tech industry for over two decades. I’ve worked with Java, PHP, Ruby, JavaScript. I have really strong HTML and CSS skills. I know accessibility and how to manage an accessibility program. I talk weekly with executives and attorneys about their legal risks under ADA, EAA, Section 508, and other standards. I guide them on how to make their program robust to mitigate future legal action. And I’m wrong. Often. And I’m willing to admit it every time.
You will make a mistake. Hopefully it is small. But no matter what, it is OK to make mistakes. What matters is how you respond to your mistake. Take ownership. Review your thinking to see what you missed. If you can’t figure it out easily, ask for help.
The number of things I don’t know about in the accessibility space is tremendous.
– Nat Tarnoff
Sometimes the only way to learn something is to fail at it first, or for the 10,000 time. If you fail, own it and work it out. Feel free to fail.
I’m highly trained. I’m highly observant. I think outside the box. Throw whatever corps-speak you want my way, I don’t care. I learn something every day or I try to. The number of things I don’t know about in the accessibility space is tremendous. I’m not a writer, so I’m still learning about content creation. I’m trying to expand my knowledge and I’m sure I’ll never understand it all. And this is good. It drives me. It gives me space to fail. So when I do fail, I can learn, fix, and grow. And the more work you do, the less you will fail in that field.
If someone claims to be an expert and knows all the the things, make a tinfoil hat. This person may be highly skilled, but they have a superiority issue and will be hard to work with. They have hardened opinions on techniques. Even if the best advice has moved on, they stick to the old approaches. You have valid questions and ideas. Changing the “expert’s” mind will be challenging if your ideas and feedback challenges their idea of perfect. They will be less willing to look at new research. They’ll take offense to your opinion and suggestions.
This isn’t mine, I just learned it Thursday night and love it. Thank Kai Wong for it. The first thing is not call someone out. You call them in. If you see someone make a mistake, take them to the side and let them know. Give them the chance to fix it.
But there are some places we don’t get to call them in. Some platforms have a code of conduct that only allows direct, private messages if you get permission publicly first. In those cases, you may have to call them out.
Like I was the other day. I made a mistake and left part of my thinking out of a response. Someone else in the community asked for clarification. This made me revisit the comment. Turns out they were right. I made a mistake. I admitted it, corrected my meaning and thanked them for challenging me.
Keep learning. Challenge the experts. Your input and feedback is important to grow this community. It enhances our understanding of standards. It helps us know where to create new standards and when to throw others out.
Have comments or thoughts on this post, let’s talk about it on LinkedIn or BlueSky.
1 CommentKeep It Silly Simple
I sat down to review some code with my colleagues. It was clear that each of these solutions was heavily over-engineered. Each used custom web components, React, Angular, or other framework, and even basic HTML with aria added. All of them should get slimmed down and work to reduce or remove ARIA.
Comments closedOne of the most common issues I see when testing is the content not having enough contrast. With 1.4.3, we’re focus on the contrast of text. This can be text in an image or just on the page. Later we’ll talk about the contrast of active controls in 1.4.11.
Designers commonly complain that they can’t design with the restrictions that WCAG has in place for contrast. At the same time the great designers love restrictions. So your reception will vary when you work with a designer. Remember, they don’t get a choice about adhering to the contrast levels set out.
Outlined in WCAG, we have two contrast levels we need to look out for text. We divide text into “normal” or “body” text and “large” text. Body text is all text smaller than 18 point and not bold. If it is bold, it can be as small as 14 point. Everything bigger than that is large text.
This is body text at 14 point.
This is large text, bold at 14 point.
This is large text at 18 point.
1 point does not equal 1 pixel.
1 point is actually 1.3 CSS pixels.
If you are like me, you are looking at those blocks thinking that they don’t look like 14 and 18 pixels. Heck, this body text looks the same size as the 18 point. Well that is because I use a larger than normal font for easier reading. Additionally, 1 point does not equal 1 pixel. 1 point is actually 1.3 CSS pixels. This means 14 point is really 19 rendered pixels. Eighteen point comes out to 24 pixels.
In Chrome and Firefox, the web inspector tools offer a “Computed” section. After highlighting the element in the code, switch to the computed tab and look for font-size. This will show the rendered pixel height regardless of what measurement you used to set the size. In addition to points, font sizes can be set with EM, REM, pixel, percentage, viewport height and width, just to name the most common.
Now that we know how to measure our fonts, let’s look at the contrast levels. We have two remember. One for body text and one for large text. For body text, the contrast ratio is 4.5:1. For large text the contrast ratio is 3:1. There are many contrast checkers on the market, so feel free to find one and use it.
My personal favorite is Level Access’s Accessible Color Picker for Chrome. Full disclosure, I currently work for Level Access. However, I’m not pitching the company. This color contrast tester not only provides the contrast and if it passes A, AA, or AAA, but is also helps guide you to fixing the colors.
On the side of the contrast values is a five by five grid. Your picked colors are in the middle. If you move up or down in the grid, options are shown for your background. Moving left or right in the grid changes the foreground. These options may have better contrast.
As a developer using this tool, I look for contrast pairs that don’t work. When I find an issue, I will suggest a color combo from these suggestions that does work. Then the designer just needs to approve, moving the process forward.
The WCAG is imperfect. It is a volunteer organization of hundreds trying their best to develop accessible rules the majority can agree on. On of the flaws is in the algorithm for finding contrast. There are combos that fall below WCAG standards that are no issue for people with color blindness. There are also combos that meet the criteria, but are unusable because they irritate eyes.
When the efforts to bring WCAG to the next level beyond 2.2, those involved began investigating other contrast algorithms. APCA is one of those. It looks like it will be how we evaluate contrast in the future. However, if you are building a website today it doesn’t matter. The current rules and laws all point back to WCAG 2.x and the algorithm used in that is not APCA. To comply with the current law, you must test colors under the current algorithm. This is true even if you use APCA to choose your colors. If you can use combos that pass both, you are future protecting yourself.
Have questions on this topic? Find me on LinkedIn and BlueSky to chat!
2 CommentsColor is important. Color allows us to discern whether our fruit is ripe. We use color to control traffic. We spend time in school teaching kids their colors. We ask them to “Identify the red one.” But not all of us see color the same way, and some can’t see it at all. We cannot rely on it to be the sole means of communication.
Light hits an object, and the object applies a filter. This filter absorbs or reflects bands of the light spectrum. The filter is influenced by the materials used to make the object. This could be a pigment, but blue pigment is very rare in nature. When you see blue in animals, it is usually due to the structure not blocking blue light.
The eyes are made up of cones that absorb light. Humans have 3 cones, red, blue, and green. How much light hits each cone type also helps determine the color. Imagine a brand new tennis ball in full light glowing neon yellow. What happens if we cut the light in half? Is it still neon yellow? What if there is just enough light to see the ball? What color is it then?
Or was the tennis ball really neon green? Color blindness is the result of damage to the cones or them not fully developing. There are brain and optical nerve injuries that can cause it as well. To put it short:
My navy blue is not the same as your navy blue.
Trying not to put the horse before Decartes, but our brains are amazing machines. It takes in a extreme volume of stimuli and builds the world around us. While we teach each other a standard that allows us to participate in a society. But when you view blue (or any color), you don’t just get blue light, you get color influence. The colors surrounding your object will change how the colors appear.
These two circles are the same color. But they don’t look like it due to the backgrounds.
My wife has suffered several strokes and TBIs. We don’t see the same colors. It’s especially noticeable in the transition zones between colors. She asked me to grab something for her, but I couldn’t find it. She told me it was orange. Looking around I thought I found it, but it was red. She swears up and down it is orange. We’ve repeated this discussion with pinks, blues, and greens as well.
We each interpret colors differently. Therefore, it is vitally important that color is not the only way of communicating important information.
Like this article? Then please share. If you want to discuss it, find me on LinkedIn or BlueSky. If you liked my philosophical joke, leave a note and use the “polyphony.”
1 Comment
