Category: cognition

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.2 Meaningful Sequence

A11y 101: 1.3.2 Meaningful Sequence

Published on February 10, 2025

The order of consumption of media affects its meaning.

As an 80s kid, I learned that the placement of a comma can change a sentence’s meaning. Of course we learned it through dirty jokes:

i helped my uncle jack off a horse
I helped my uncle Jack, off a horse.
I helped my uncle, jack off a horse.
I helped my uncle, Jack, off a horse.

Even the order makes a big difference:

I helped my uncle off a horse, Jack.
I helped Jack, my uncle, off a horse.

When we write and layout our document, we need to consider the rendered HTML and CSS. We also need to consider the HTML on its own. Some of your users will use tools to absorb the content in different manners.

We need to ensure a meaningful sequences when at the word, sentence, paragraph, article, and component level. We want to develop a meaningful order at the document level also. Usually we do this through landmarks or the use of headings to designate areas of the content. Depending on the relationships of the content, areas could dictate the understanding of the document. So does the header, footer, or main have to follow a certain order? Our instinct is to go header, main, footer. What if our HTML was Main, header, footer and we use CSS to visually move the navigation?

But should we?

Stepping in from the document level, there are things to consider within each component – visual presentation and content presentation. Look at these two cards:

See the Pen 1.3.2 Meaningful Sequence by Nat Tarnoff (@nattarnoff) on CodePen.

Without looking (I saw you look at the HTML tab), you might guess how this is coded. You’d likely think it is Card Title, CTA, image, paragraph, list. And you’d be pretty close. Next you’re thinking, “Ah, image first, that’s how cards are done.”

Both cards have this structure:

<div class="card" id="card1">
    <h2>Card Title</h2>
    <img src="https://placecats.com/millie_neo/300/200" alt="Millie & Neo resting on the cat tree."/>
    <p>Kool kats & kittens at the library!</p>
    <ul>
      <li>Where: Main Street Library</li>
      <li>When: 1pm to 4pm</li>
      <li>Day: Saturday 1/23</li>
    </ul>
    <button type="button">RSVP</button>
  </div>

We can move the content around using CSS. Are the details are more important than the image or the tagline? We try Title, Details, CTA, paragraph, and image. When we are at this stage of developing the code, it’s important to just focus on how the page reads. The two versions of the HTML do not effectively change the meaning of any of the content. Nor do they interfere with the visual display.

How do we fix the meaningful sequence?

We start by looking at individual pieces of content. Let’s start with a button. A button will fire an action, so I need to give it an accessible name to reflect that. I can add a pre-icon, and post-icon, and I know I’ll have at least two states. If I have visible text, then the icons don’t need alt text.

Step two, after styling the most basic of elements, we pair them together. We’re going to use our button to make a search component. This means I need a label, an input, and a way to fire the search. We’re keeping this simple to begin. We’ll use a button and a post action so the page refreshes with results. Most developers will code this label, input, button. But they don’t have to be in that order.

<div class="search-widget">
<input type="search" id="search" aria-labelledby="title"/>
<button id="title" type="submit"><img src="magnifier.png" alt="Search" /></button>
</div>

An easily recognizable or learnable icon can be used as a label as above. We of course provide the alt text. We can use the alt text of the icon in the button as the label for the form. We can change the order visually and it has no effect on how a non-visual user would understand it.

Break up content into the smallest functional pieces. Make sure each piece is understood fully within itself in a meaningful sequence. Then start layering those into the page document in the order to use them. A sales page would have account information first. Then it would include the client’s dashboard. Next, it provides access to individual child accounts. Finally, it lists leads and sales. There is a sidebar to do some research or note taking. We probably have some account screen for the sales person as well. Within each of those sections they’ll have an order that makes sense.

But at a page level the “main” content will be the what the user wants the most. So we put it first. Don’t run away yet. Initially, the order of the main section doesn’t matter. As this user gets used to it, they may want to show and hide different widgets. They might even want to move them. Let’s put a plan in place for that. We don’t want to forget our sidebar, main nav, or account information. These need to be placed in based on order of importance to the user at the code level. When you turn to CSS to position and decorate, is when we get the visual design.

Its always best to do user research on new products. An application like we describe above will benefit from interviewing the potential users. Then within the design, marketing, executive, and client teams conduct some card sorting exercises. Keep repeating this as you develop and design the application. You may find you need to change your design or users didn’t think like you thought they would.

Have more questions? Let’s discuss it over on LinkedIn or BlueSky!

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?

Comments closed

A11y 101: 1.2.3 Audio Description or Media Alternative (Prerecorded)

A11y 101: 1.2.3 Audio Description or Media Alternative (Prerecorded)

Published on November 26, 2024

What is an Audio Description? Video has two main elements to it, what you see and what you hear. Imagine you go to watch Back to the Future. However, your vision has failed to the point where you can’t see the image. Audio description comes in to make it possible to get the visual cues needed to follow the plot. Let’s take a look at what they do.

Comments closed

A11y 101: WCAG 1.2.2 Captions (Prerecorded)

A11y 101: WCAG 1.2.2 Captions (Prerecorded)

Published on November 18, 2024

We’re still working with video and audio in 1.2.2. I’ve mentioned captions in the previous A11y 101 posts. Success Criterion 1.2.2 lays out the specifics for captions.

Simply put, if there is video with speaking you need captions. Did you provide an audio description? Those get added to the captions.

Caption Styles

There are two basic ways to provide captions, open and closed. In either case, you need to have someone transcribe the audio. They need to include the time when the display of the text starts.

Open Captions

Open captions are the minimum support you should provide. Open captions are “printed” into the video. They are baked in and designed to fit the design aesthetic of the video.

Why do I call this minimal? Well the user lacks control to customize it. Additionally, this only supports deaf and hard-of-hearing folks. Our next version offers more features.

Closed Captions

Since open captions are part of the video, they can actually create problems. The most problematic is that they may move around the screen depending on what the video needs. This makes it hard for users, especially low-vision users, to keep track and find them.

Closed captions provide and answer to this. Closed captions are a separate file called in the <video> element. Usually it is a .VTT file. It’s pretty simple to build. I have an article on a11yproject.com that I published in 2013 that explains how to do it.

The next thing that closed captions bring – screen reader and Braille display support. Closed captions are considered real text on the page for screen readers. Now the Blind-Deaf can get the story too. The low-vision user can lean back on the screen reader to help. It also helps with SEO.

Comments closed

A11y 101: WCAG 1.2.1 Audio-only and Video-only (Prerecorded)

A11y 101: WCAG 1.2.1 Audio-only and Video-only (Prerecorded)

Published on November 11, 2024

I discussed non-text content last week and mentioned video. WCAG decided to be specific when addressing items that fall under the bigger 1.1.1 criteria.

In success criteria 1.2.1, we’re informed we need to provide one of two options, unless the audio or video IS the alternative. Let’s look at our options:

Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.

Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.

https://www.w3.org/WAI/WCAG22/quickref/#audio-only-and-video-only-prerecorded

OK, what are our key words? “Time-based media” is mentioned in both. We see in three places, this is about pre-recorded media and not live. This means we can use the edited audio or video. We can then give it to someone to create a transcript. They can also make closed captions for videos.

Once returned, we offer a link to the transcript. This can be an accessible PDF, but it is often easier to to make it HTML. The transcript doesn’t need to live on another page. The preferred method is to use a disclosure next to or below the media. When closed the content is hidden. The user who needs it, can expand the transcript to read.

If we are working with video, does it have an audio track that describes everything in the video? This is usually an audio description track. It’s provided in addition to the regular audio track. It will describe what is happening without needing to see. One of my favorite examples is a Frozen trailer:

Transcripts are easy. There are many ways to get them done, and some are super cheap. But before you ever put the transcripts on your site, have someone, better yet several, proof them.

Comments closed

A11y 101: WCAG 1.1.1 Non-text Content

A11y 101: WCAG 1.1.1 Non-text Content

Published on November 5, 2024

One of my roles as a consultant is to coach others. Clients & colleagues, from junior testers to CEOs. Each of them learns in a different style. That is why I’m starting this A11y 101 (short for accessibility – pronounced “ally” or “a-eleven-y”) series. It will break down some of the major topics in different ways. This approach hopefully connects easier than technical specification documents.

Success Criterion 1.1.1 Non-text Content

What is “non-text content”? The Web Accessibility Content Guidelines (WCAG) makes it pretty simple, if it isn’t text, it falls under here. As a developer, you are promising that there is a text fallback for the non-text content.

Videos, images, charts, animations are all examples of non-text content. Some times these are decorative. Sometimes they add meaning. When we are talking about non-text content, we really only mean meaningful non-text content.

Video

For video, we have two options for text alternatives, captions and transcript. Captions come in two types. While both cover the text alternative for video, one carries us beyond 1.1.1. Users can choose real-time captions. Alternatively, they can take their time to read the transcript.

Open Captions are captions that are embedded into the video. They can be positioned within the video to maximize the visual. Yet, this jumping around the view can be problematic for users. Additionally, this style of captions are not screen-reader accessible.

Closed Captions consist of a separate file the user can turn on and off. Each file will include a time-stamp followed by the words used on screen. Bonus feature is that closed captions can be read by screen-readers and Braille displays.

Not everyone reads at the same speed. Many factors affect reading speed. People with issues like TBI, ADHD, Dyslexia, or low literacy may need to slow down the tools. This allows them to read at their own pace. Transcripts allow this as well as supporting screen-readers and other assistive technology.

When deploying a video to your site, the best practice is to provide both the transcript and closed captions. You can save yourself time by creating the closed caption file, then using that to create the transcript. It works the best when the transcript is HTML loaded directly next to or under the video. This can be behind a disclosure or a link to another page. You can provide an accessible PDF as a transcript. Still, these are rarely easier to create than HTML.

Images

Images are the first thing we think of when we think non-text content. There are many image types available. We need to consider just a few methods to provide a text equivalent. This is highly dependent on how you call your images.

<IMG>

When using the <img> element, it MUST have the “alt” attribute in the tag. Here we provide a value that doesn’t describe the image, but rather the meaning of the image. Keep this in mind, we’ll talk more about it later.

<SVG>

There are several ways to place an SVG into a page. This technique addresses when the <svg> is placed into the HTML. First, we need to understand the SVG and how it is to be used.

Static image placed on the page? Then we can provide aria-label and put the meaning there. We could also provide the meaning in the SVG <title> element. Provide an ID and use aria-labelledby. This is super handy if your design teams are building SVGs this way.

Referenced by the <img> element as the source, use the rules for <img>.

Inside the <picture> element? The picture element requires several source files, but also includes a fallback to the <img> element. In the picture element, the alt text of the fallback image serves as the text alternative. So, don’t leave it out!

Using the <figure> element? This is a fun one because it combines all the techniques into one. A figure can have anything in that creates some sort of drawing. Whatever you put inside will dictate how to create the text alternative. For example, you can use an <img> inside. Or <svg>. In either case, we’d use the same rules as above.

Of course you could also draw something with HTML & CSS. In this case we provide an aria-label on the wrapping element of the drawing and also provide a role="img".

Figures also allow us to provide a caption using <figure>. While it is not required, if there is a complex message this is where we put it. We still need alternative text for the image, but we can go into more detail here.

Canvas

Canvas is a really cool set of tech we can use on the web. Yet, due to it’s nature, it isn’t really accessible. You can put HTML between the canvas tags. You can map the bitmap images to HTML elements. There are easier ways to do this too.

Always provide an aria-label; or aria-labelledby on the canvas element. Your descriptive content can live inside the canvas element and still be referenced.

Charts & Animations

Charts and animations are a combination of the above. Usually charts are crafted using SVGs on the client side or static images on the server side. Animations are usually made in JavaScript with SVGs or Canvas.

Keep in mind, that charts get complex really quickly. You should strive to provide two types of interaction:

Tab stops on all data points that convey both x & y titles and values.
Data table backup

Lastly, if you can, provide a summary for the chart. These usually either lead or follow the table in the HTML.

Comments closed