Category: hearing impaired

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: 1.2.6 Sign Language (Pre-recorded)

A11y 101: 1.2.6 Sign Language (Pre-recorded)

Published on December 16, 2024

This week we meet our first AAA level success criterion. This put me in a pinch. I had to decide if I wanted this series to include all criteria. Alternatively, it just includes the ones needed to get conformance to current legal standards. And I’m coming out in between. I’ve decided to include only the AAA that should be covered in my opinion.

So this week we’ll look at the needs around Sign Language. We’re still discussing video, but we’re back at pre-recorded video. I will say, if you are holding a webinar, you should have a live sign language interpreter.

Comments closed

A11Y 101: WCAG 1.2.4 Captions (Live)

A11Y 101: WCAG 1.2.4 Captions (Live)

Published on December 2, 2024

Nothing super high level this wee. Two weeks ago I mentioned how you need to have captions on your site. If you haven’t read that article yet, take a few minutes and do so.

This week we’re talking about captions in a live scenario. When we consider closed captions on a prerecorded video, we could send the video to a transcriptionist. The transcriptionist would then build our caption file. But what if you are doing a webinar or streaming?

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

You Need Accessibility Testing

You Need Accessibility Testing

Published on January 5, 2016

This probably isn’t the first time you’ve heard it. Somewhere along the line somebody asked you how well your site or application works for people that are blind. You probably mumbled something along, “They don’t use our stuff,” or maybe, “I don’t know, does it matter?” The short answer is, yes it matters. And you want to pay attention to why.

Accessibility isn’t Just the Blind

Accessible products and websites are often built with the blind in mind, however what it means to be truly accessible runs much deeper than that. Accessible by it’s very nature means that anyone, anywhere, with any tool of their choosing can use it. This means the disabled, which is not just the blind, but those with hearing, neuro-diversity, mobility, physical, and learning disabilities; and it means the abled that are compromised by other means.

Economics plays a huge part in accessibility. AOL still has 2 million people using dialup internet. This is an economic issue. ISPs have decided it isn’t beneficial enough to run faster lines to these areas or they are on fixed incomes and can’t afford the rising cost of internet access. Developing nations don’t have access to the funds to buy the latest and greatest technology, so they use products released years ago to get online.

As developers we all cheer when we hear that Microsoft is dropping all support for browsers below Internet Explorer 11 next week, but how does someone in an African country who can’t afford to upgrade from XP going to feel when we don’t support IE9? And what if that great new mobile application you created only works on iOS 9+ and Android 4.4.4? Many lower income folks in the developed and developing worlds have phones that are 2, 3, 4, or 5 years old and don’t support the latest things we can do with the web or mobile.

Building accessible products and sites means taking all this into account. It is using responsive web design to make sure your content is readable on all devices regardless of size. It is using solid HTML to make sure the content is parseable by a variety of technologies on the client side from browser, to apps, to refrigerators and TVs. It is using progressive enhancement to make certain that the product is usable even when the CSS or Javascript fail to load. It requires building products that while that may be single page applications running on Angular, React, or Ember continue to be useful applications when the CDN doesn’t connect or the connection is slow. It means setting a performance budget so that we aren’t trying to load 3 megabytes of data to run a blog. Knowing to reduce images, minify scripts, use CDNs to load things faster, and trying your darndest to limit any single page to something that will load in under 4 seconds and be usable.†

But Why?

Getting back to the disability side of things, recently the DOJ has taken to pushing through that public websites are liable to be accessible to the disabled. There is recent legislation that is forcing airlines to improve their websites. Netflix, Target, H&R Block, and eBay have all been sued by disabled people because their websites weren’t accessible.

You probably have a good idea what a lawsuit brought in federal court would cost your company even before remediation and damages are incurred. Why get sued when you can save money fixing the problems first?

I’m Here to Help

Your competitors haven’t solved this problem yet. Many are in the same boat as you and don’t know where to start.

With over decade of experience in front end development, user experience design, and accessible development I can get you ahead of the curve. Working together we can do a proper assessment of your website in all the major assistive technologies to make certain any deficits are found before you end up in court. With an active assessment done and a remediation plan in place you can resolve many legal actions before they get started.

Once you know where the problems lay, I can work with or train your team on how to resolve those issues bringing your site up to par with WCAG 2.0 AA standards. This is the standard level used by the Canadian, United Kingdom, Australian, and Japanese governments to write their web accessibility legislature. The European Union has used it to craft theirs; and the United States has similar legislation based on WCAG 2.0 AA facing it for a vote.

Contact me to set up a time to discuss your needs so we can set your product or site off as a differentiator in your industry because it is accessible.

† 4 seconds is a magic number that will cause people to think your app is slow. If your customer is using dialup, then a 500kb page will take 1 minute and 13 seconds to download. Sure 3 megabytes is instantaneous on your home cable connection or 4G smartphone, but in the developing world it could be a minute.

Comments closed