Skip to content

Tag: empathy

A11y 101: How to test manuallyNat standing in front of a shelf filled with toys, gadgets,skulls, and synths they collect. Nat is a white male with a long red and white beard. Nat is wearing a grey Level Access polo for GAAD.

A11y 101: How to test manually

Published on May 15, 2025

Too 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.

Important Disclosure

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.

Tools

Like any project, we need a few tools to help us do the job we’ll need.

  • Computing Device – This can be a Windows, Mac, iPhone, Android device, tablet, or even Linux. We can’t test websites without accessing them.
  • Screen reader – This will be device dependent. The Apple products have VoiceOver. Android has Talkback. For Windows, there is Narrator built in, JAWS, and NVDA. I recommend NVDA as it doesn’t lie and is free open source software. I also caution on relying on Narrator. It’s initial use was just to get someone to the point where they can download a “real” screen reader. Microsoft has continued to update it. It is acting more like a screen reader now. However, there’s still work to be done.
  • Browser – Unless you are working with VoiceOver, the recommended browser to use is Chrome. It has the largest market share and is at the tech edge of production browsers.
  • Spreadsheet – to log findings. Include columns for at least:
    • Finding description
    • Finding recommendation
    • Page found on (URL)
    • Guideline
    • Screenshot (I like to use ScreenCast for storing these images.)
    • Steps to reproduce
  • WCAG’s Quickref for the level I am testing against. I test to 2.2 A and AA as my standard.
  • Mouse
  • Keyboard (Doing a mobile audit? Use a Bluetooth keyboard without the screen reader.)
  • Automated tooling – It does help to run automatics at the beginning of an audit. It will reduce the time you spend documenting issues.
  • Contrast checker
  • Scope document
  • Objective of the audit

Setup

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.

Step 1 – Mouse

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.

Step 2 – Automatics

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.”

Step 2 – Keyboard

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.

Step 3 – Screen reader

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?

Advice

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.

Step 4 – Color contrast

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.

Advice

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.

Step 5 – Reading level

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.

Resources:

Step 6 – WCAG SC

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.

Follow Up

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 Comment
I’m wrong. This is good.

I’m wrong. This is good.

Published on May 12, 2025

I’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.

We are human, we make mistakes

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 am not an expert

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.

Don’t believe the experts

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.

How to challenge someone

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.

Time to get back to work

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 Comment
A11y 101: 1.4.11 Non-text Contrast

A11y 101: 1.4.11 Non-text Contrast

Published on April 28, 2025

We previously discussed contrast under Guideline 1.4.3 Contrast. So why is there a second AA criteria for contrast? The earlier guideline covers only text. With the introduction WCAG 2.1, we need to start being aware of the contrast of graphical items, particularly active controls. But the way we test contrast for graphics is different than how we test contrast for text, kind of…

Just as we did in testing text contrast, we’ll need a contrast checker. There are many out there, but for this article I’ll be using Level Access’s Accessible Color Picker. The one you use may be different, but the concepts should be the same.

What does WCAG say?

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

  • User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
  • Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Technical words for technical people. Welcome to the world of writing standards!

“The visual presentation…contrast ratio of … 3:1 against adjacent colors.” Cool. We’re familiar with 3:1, we know how to use the contrast checker, let’s test!

If it were that simple

There is a key phrase here that complicates the testing, “adjacent colors.” Our control must have a 3:1 contrast ratio against adjacent colors. Colors. How often have you tried to make a color palette with three colors that all have a 3:1 ratio? If you haven’t yet, it can be quite difficult. The more colors you add to the palette, the harder it gets.

But this adjacent colors is not expecting you to have a 3:1 contrast between all colors. The second bullet contains important information too. “Parts of graphics required to understand the content…” Of course there is more to it, but let’s start here. We’ll start with a simple button for a disclosure. Let’s get our example from WCAG.

Button to hide the techniques and failures from 1.4.11

This button has blue text on a gray button. The button has a darker gray border and sits on a white background. Most people will test the background color of the button to the white. And that is one way to do it. In this case, it will result in a false positive. First, because there is a border, the gray background is not adjacent to the white. So we measured the wrong thing. We need to compare the border with both the white background and the gray button background. This is because the border defines the edge of the control. This success criterion is about discerning actionable controls.

When we do this test, we find out that neither passes.

Border of #EEEEEE against a background of #E1E1E1 showing a contrast ration of 1.127:1

The border is #E1E1E1 and the gray only has a 1.127:1 contrast.

Border of #E1E1E1 against a background of #FFFFFF showing a contrast ration of 1.308:1

When the border is against white, it only bumps up to 1.308:1. But we’re not done testing this unit. We’ve checked the border against adjacent colors and it fails. But WCAG gave us an out that the W3C is using on their own site. “Parts of graphics required to understand the content…”. What is important to understand the content? Is it the background, the border, or is it something else, say the text of the button.

The text on its own has enough contrast against the gray. No additional graphic is needed to understand the control.

Text color of #1F6DA6 and background of #EEEEEE showing a contrast ratio of 4.768:1

As seen in this image, the blue text against the gray has enough contrast to meet the 1.4.3 Text Contrast rules, and it still supports 1.4.11 despite the background failing.

Summation

When testing 1.4.11 non-text contrast:

  • You need a contrast checker
  • Check the graphic for any borders
  • If there are borders, use the border for the foreground
  • Check colors on both sides of the borders
  • If that fails, check the content of the control
  • If one of the three pass, the control passes this guideline

Thoughts, questions, have a different method? Reach me on LinkedIn and BlueSky to discuss the topic!

1 Comment
A11y 101: 1.4.10 Reflow

A11y 101: 1.4.10 Reflow

Published on April 21, 2025

We live in a time where our digital device screen sizes vary. We have 1 inch watch screens, phones, tablets, and even TVs with 100 inch screens. We never know what the end use will be using for a device. Reflow is needed to adapt to many of these screens. However, the core of what reflow is about has little to do with screen size. Let’s look at what we really need to know about 1.4.10 Reflow.

320 by 256

Looking at the WCAG Quickref, we see the following:

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels;

Except for parts of the content which require two-dimensional layout for usage or meaning.

Reflow talks about having no loss of functionality without having to scroll in two directions on screens as small as 256 pixels wide. It tells us that when the screen is at 256 pixels wide we can have horizontal scrolling, but not vertical. At 320, we can have vertical but not horizontal scrolling.

As a matter of good web principle, it is better to design vertically than horizontally in the majority of cases. For news, reading, and shopping it is easier to consume the content and it is the expected method of scrolling.

But what does it mean if not mobile?

Remember, we are talking about web content accessibility guidelines. For whatever reason, every time I discuss reflow with developers they automatically think it is for mobile devices. And yes, it benefits everyone on any device when implemented correctly. But so does just about everything listed under WCAG (Not all screen reader techniques benefit the able-bodied). And there is a key word that gets left out during those conversations.

Accessibility

This guideline is about making websites more accessible. Reflow wants to ensure that the site does not hide any functionality when any user is on the site. It should not obstruct, obscure, or remove functionality. This includes when that user adjusts their monitor to a different resolution.

A huge number of people on this planet have issues with vision. For most of them, a pair of glasses will correct it. We’re told by our doctors that 20/20 is the most accurate a human can expect. When a person’s vision reaches 20/200 after correction, they are considered legally blind. They have some vision though and decide to increase the resolution on their screen to read it easier. Likely they may not be aware of screen readers yet. Our volunteer here increases his screen resolution to 300% at which he can read it.

When discussing this addition to the guidelines, 1280×1024 was the most dominant screen size for desktops and laptops. There was also thinking that most disabled people are on fixed income and can’t afford current tech. This lead to thinking the disabled to be on older devices.

If we were to increase our zoom from 100% to 400% starting at 1280×1024, the page is rendered at 320×256. If something requires two way scrolling at this point, you need to revisit the reflow rules. We do not want to remove functionality, but it is ok if functionality goes into a menu or disclosure. We want to stack content in the scroll direction.

There are pieces of content that can have horizontal scrolling including carousels and tables. With carousels, ensure the controls are on the screen, but the contents can overflow. You can swipe, but provide buttons for fallback. For tables, ensure the header column is always visible with at least one other full column.

How to test

I’m not writing to a generic audience here. I hope you have deduced a method for testing, but I won’t leave you hanging. Testing is simple, set you browser viewport to 1280 by 1024. Load the page, then use Control/Command and the plus (+) key until you reach 400% zoom. Review the content to ensure nothing is removed. Make sure content is stacked or hidden by disclosures. Ensure there is no horizontal scrolling. You can flip the dimensions for horizontal scrolling sites.

Alternatively, open your developer tools in mobile emulation. You can leave zoom at 100%. Change the viewport to 320×256.

Have some thoughts or more questions on Reflow? Find me on LinkedIn or Bluesky to keep the conversation going.

3 Comments
A11y 101: 1.4.5 Images of Text

A11y 101: 1.4.5 Images of Text

Published on April 14, 2025

I’ve been in developing websites for over twenty years. When I started in the industry, we had to create images of text if we wanted to use a specific font. This was necessary to make things work the way we wanted visually.

The problem of images of text is that screen readers can’t see the text. Like other images we need to provide alt text that reflects the text in the image. It was early in my career, so I tried to find a way to write. I used individual PNGs of letters with the alt text set to that letter. What I didn’t fully understand was assistive technology. My attempted method ended up with the AT announcing each letter. This is because they read each image as a separate unit of text. Spelling my name would be announced as, “N image, A image, T image.” This doesn’t help anyone.

20 years later…

The folks at the W3C’s CSS working group have been working overtime. They have provided us ways to import fonts from CDNs. We have the ability to clip with text. Drop shadows, gradients, transforms provide additional customization.

We also have SVGs. They allow us to put text directly into an image as text. This text is available to AT. This allows us to put stylized text on a path for display.

And…

We do not need to put text in our images anymore. And I’m not referring to logos. That another can of worms. We have multiple ways to add stylized text with unique fonts. We don’t need to use text in images anymore. Just don’t do it.

But…

I know what you are thinking, “My current platform doesn’t allow me to…” or “That requires me to work with IT to make changes and I don’t have many hours…”

There are always constraints. What I described earlier is a best case scenario where all conditions are right to make this problem go away. But that’s not how life works. You will need to use a custom font as an image of text at some point.

And it isn’t difficult. We treat it just like we do with other images. We use alternative text to supplement the image with a text equivalent. In the case of text in an image, that includes all the text.

If you alt text is over 150 characters, I want you to pause. When alt text gets really long it can overwhelm some users. Neuro-typical brains will probably be fine. But neuro-divergent users will have problems. This may be an area where you can break up the image into smaller images. Break the text up to match the images. You can also use figure and figcaption. Here, everything is wrapped in a figure. The alt text is placed on the image. The figcaption contains the rest of the explanatory text.

<figure>
  <img src="https://placekitten.com/200/300" alt="Text in the image." />
  <figcaption>The remainder of the the text described in the image to complete the message needed to express things.</figcaption>
</figure>

And the most important tip I can leave you with is:

Always put sentence ending punctuation at the end of your alt text.

When you don’t use closing punctuation, most AT browser combos will start reading the next item. They will read it as if it were a run-on sentence. This causes added confusion. With the punctuation in place, the AT will pause or announce the punctuation. This is determined by the user’s settings. In either case, the user understands the concepts better without the run-on sentence.

Have some thoughts on this topic? Let’s talk over on LinkedIn and BlueSky!

2 Comments
A11y 101: 1.3.5 Identify Input Purpose

A11y 101: 1.3.5 Identify Input Purpose

Published on March 3, 2025

We have four main principles in accessibility: Perceivable, Operable, Understandable, and Robust (Accidentally wrote robot butts first!). The P.O.U.R. principles guide us in how we classify, identify, and fix issues.

When we provide a clear and concise label to an input, we move it from Perceivable to Understandable. Without a clear role, the user will not understand how to interact with it. When we use the same input for the same information in another place on the site, we must keep the naming consistent.

You will often see issues show up under SC 4.1.2 if they flag here. Fortunately, when inputs are named correctly, it resolves both issues. Inputs must have their proper role. Any additional data needed to operate them should be provided. What does this look like? Well it depends on the control type.

Input

The <input> element offers up many alternatives. The default is the type of text. If you forget to include any type, the user will be able to type anything in. You should be familiar by now with radio buttons, checkboxes, and passwords. But we also have more specific versions like search, tel (telephone), URL, range, and color. When you use these native HTML versions, you are provided the the type of input for free. The browser and screen reader both recognize that they are special and behave a different way than type text.

It’s important to note a key point. While I’m discussing the details of the input element itself, the rules mentioned here apply to all active controls.

Labeling

Labeling of an input can be handled multiple ways. The first way you should always attempt looks like this:

<label for="fieldID1">First Name:</label>
<input type="text" id="fieldID1" />

Simple, native HTML. Beyond connecting the label to the field for the screen reader, we assist other users. If a user has issues with their fine motor skills, they don’t need to click on the field alone. The label will place focus in the field. This is super handy for radios and checkboxes due to their size. Further, voice control users will be able to see the label. They can then say “Click First name” and focus will go there.

But this isn’t the only way to do it. If we venture off the above method, we need to make sure we bring the right ARIA along with us.

Auto complete (Optional?)

Along with the ARIA, we want to use autocomplete. The concept of autocomplete has been around for a while. We have browsers that help us save important information. We have password managers the do the same thing more securely. These are wonderful things! They help all users get to the end goal faster. So why doesn’t everyone use autocomplete?

For the majority, it is a security issue. They prevent copy and paste on the input field forcing you to recall the information. But I’m not the first to tell you how hard it is to remember them. Which is why people use the same passwords everywhere and are easy to hack.

One of the ideas about accessibility that people often forget is that accessibility is security. Let’s imagine you are blind and need cash now (J.G. you out there?). You find an ATM, but there is no Braille, no headphone jack, and it is touchscreen only. If the world has been graceful, they are with a confident they can trust with their private information. But if they are solo, who do they ask? Anyone becomes a security threat then.

This same user arrives at work, sits at her desk and boots up the computer. Headphones on, and login, but she isn’t aware that someone has shoulder surfed her password.

Heading back home on the bus, she takes out her phone to buy more dog food online. She tries to input her credit card info. Due to poor labeling, she inputs the card number in the wrong box. She then asks a stranger for help…

When you allow users to paste and use autocomplete on their end, you help those with disabilities. And the security gaps get smaller as the user is more independent.

Have questions or challenges with this topic or my position? Let’s talk them out on LinkedIn or BlueSky!

1 Comment
A11y 101: 1.3.4 Orientation

A11y 101: 1.3.4 Orientation

Published on February 24, 2025

It’s not the 80’s. We don’t live in a world where “the fold” exists any longer. We’re not locked to a 4:3 viewing experience. Our movies are most commonly 16:9 ratio. Our TVs and phones have followed this pattern. In short, we need to pay attention to how our sites look on various screen dimensions. We won’t know what the viewer is using.

What does that mean though?

We need to be flexible in our designs. Most of the time when we design a website or application we do so with a primary orientation. For all devices other than tablets and phones, this is in landscape mode. But for phones and tablets we primarily design for the portrait mode.

There are times when a user may have their device stuck in a position that they are unable to change. When this situation occurs, if our design is locked into the Portrait orientation, we make it very difficult for some users. It would be much more usable in landscape for this moment or by the user. Therefore we should make it work in both ways.

The primary example of this is someone using a mounted iPad on their wheelchair. They could have it in portrait mode, yet not have the strength to turn the device.

Are there any exceptions?

But of course! There are certain tasks that the orientation can’t change. Usually you hear about digitally depositing checks. The thinking here is using the phone in landscape mode is required to get the right photo. This is a crap example. I can just as easily take that photo in landscape as long as I can square it in the view. A better example might be needing you to turn your phone landscape to read and interact with a chart. Another would be watching a video. If shot for mobile device apps like TikTok, it doesn’t work as well in portrait.

Mobile Apps

Mobile platforms have the ability to do dynamic layouts now. These layouts allow the user to change their display orientation without affecting their use of the product. However, using a dynamic layout requires you start coding with that in mind. Trying to fix the layout after the fact is much more difficult.

Have some thoughts you’d like to discuss? Maybe other exception examples? Reach out to me on BlueSky or LinkedIn.

1 Comment
A11y 101: 1.3.3 Sensory Characteristics

A11y 101: 1.3.3 Sensory Characteristics

Published on February 17, 2025

I have a bad habit of saying, “this is easy” or simple. It’ll only take a moment. Like I said, a bad habit that I try hard to break. Why? Just because it is easy to me doesn’t mean it is to you. I was about to start this off with, “This is pretty much straight forward and don’t reference anything requiring senses.”

And I realize, that this isn’t that simple. I’ve been doing this for over two decades as of this writing. Today may be your first day. English may not be your first language. Maybe you can’t relate to the idea of senses.

What do we mean by Sensory Characteristics?

All animals on the planet have the ability to experience their environment. They do this with their senses. Senses are built in detectors to assess our environment. In the accessibility industry, we create solutions. These solutions are for people who may have malfunctioning senses.

When we are little, we are taught about our 5 major senses: Sight, Taste, Touch, Hearing, and Scent. But we also have senses that can detect electrical stimuli, heat, cold, our awareness in space. If you tell someone to find the green button, you’ve violated the success criteria.

So how do we avoid it?

First, we make sure that everything has a proper accessible name. Next, we make sure it unique to the page we are on. It’s super easy to say, “click the submit button” in your instructions if there is only one submit button.

Of course we want to keep the page as simple as possible, so we probably won’t use instructions like that. We wouldn’t say, “click the triangle.” Instead, we should let the construction of the page tell us what to do next.

This looks like first coding the HTML so that if nothing else loads everything is presented and understandable. You can’t position items in a visual order or paint them pretty colors. You also can’t make them do magic. Therefore, we need to rely on the content itself. If your content can’t stand on it’s own, rewrite it.

With the content corrected, we can build out the site. Paint it, position it, then test it. Does it still make senses in the reading order? Focus order?

Lastly, teach the team. Make it an internal standard. Put in monitoring just in case someone makes a mistake.

Want to discuss this more? Come say hi on BlueSky and LinkedIn.

Comments closed
A11y 101: 1.3.1 Info and Relationships

A11y 101: 1.3.1 Info and Relationships

Published on January 13, 2025

Whenever I come across a a violation of 1.3.1, I have a primal need to look deeper. I investigate because I believe if something falls under this success criterion, it is most likely improperly classified. It is extremely important that we understand the relevant context, information and relationships of content. Frequently, I observe that this particular success criterion is misused. It often serves as a catch-all for “Where does this go?”

So then what does go here?

Per WCAG, 1.3.1 Info and Relationships is:

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Cool. We used the original words to define it. I didn’t like third grade English when I was in third grade.

Let’s look at the intent:

The intent of this Success Criterion is to ensure that information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes. For example, the presentation format changes when the content is read by a screen reader or when a user style sheet is substituted for the style sheet provided by the author.

Now this is better. We’re given a breakdown and example. The intent is to ensure that what is visually indicated as structural, explanatory, and informational is available to everyone. This includes people using different presentation formats.

Structural

When talking about structure, it is crucial to distinguish between visual structure and code structure. We need to consider both.

When we look at our mock-up of a page, we want to absorb it visually. Is the most important item in the page grabbing the eye? Does the way it is designed lead you to the next thing you want to say or a primary CTA

(Call to Action)? Take it all in, then we start deciding what HTML elements best represent all those pieces of the page. We begin to think of how we order them. Should it be in a landmark like header, aside, footer, main, or nav? Or is does it need a textual element like headings, anchors, paragraphs, lists, or quotes?

Information

We need to ensure that any information expressed visually is communicated non-visually. If a button is disabled, how do we inform a screen reader user it is disabled? How does a screen reader user know if a Menu is opened? This is the information we should be looking for. In many cases ARIA attributes will be the answers to provide this information.

Relationships

Under relationships we find little programmatic lines connecting the page together. We might specify via aria-label that the first navigation is the “Primary navigation.” Forms point to a more direct relationship in how we set up labels, inputs, and error messages. Using the label’s “for” attribute we build a relationship of the name and input. Aria-describedby with the ID of an error message is another bridge creating a relationship.

Here’s my problem

Much of the time these are not errors of information or relationships. They’re a failure of properly using HTML or ARIA. Sometimes both.

In my example of using the landmarks to construct the basic layout, it isn’t a violation. But we didn’t provide an accessible name. That’s a violation of 4.1.2, so why dump it here?

My disabled button? Case of missing aria-disabled, a 4.1.2 issue.

Headings used out of order? Not a WCAG SC.

Headings not sized to their importance? Now you have a 1.3.1 violation! The visual size provides a hierarchy of importance. On the code side we do this with heading elements H1 – H6.

The Fix

Info and relationships are important on the web. They provide context and details that may not be picked up right away. Anything we do on this account visually needs to be conveyed programmatically too. But that doesn’t mean everything that falls into this bucket belongs. Dumping things in here can harm your clients. You might not provide them enough context to resolve their issues.

Look deeper at the issue. Is it a matter of a screen reader not announcing something? Look at the code, is it missing ARIA? Does it apply to another criteria? Make sure you flag it the right way. And don’t flag it twice, once here and once under the other SC. If it fits under another SC, then fixing it under that criteria will fix it for 1.3.1 as well.

Have a thought, feedback or concern about this article, let’s discuss it on BlueSky or LinkedIn.

Comments closed
A11y 101: WCAG 1.2.5 Audio Description (Prerecorded)

A11y 101: WCAG 1.2.5 Audio Description (Prerecorded)

Published on December 9, 2024

This week we’re still talking about video. They say a picture can say one thousand words. Video is thousands of images that tells us more than what the audio alone says. Most video on the web these days is between 24 and 30 frames per second. That potentially would put a one minute video at roughly 1.8 million words. Even if 30 frames equal one picture, you are still responsible for up to 60,000 words. How do we do this?

Continue readingA11y 101: WCAG 1.2.5 Audio Description (Prerecorded)
Comments closed