POUR Explained: P is for Perceivable Part 1

The P in POUR is for Perceivable:

Information and user interface components must be presentable to users in ways they can perceive. (Ensure content is accessible to people who are blind and/or deaf.)

Let me Level with you…

Each guideline has success criterion, and each one of these are placed at a level of A , AA , or AAA. Now what these levels refer to is the level of their conformance to Accessibility Laws, A being the minimum and AAA being the max. In most cases you will see a Level AA conformance, because it is achievable as well as meaningful, but will fall short here and there because really every guideline success criterion is necessary to at least some users with disabilities. So essentially do not ignore level AAA completely.

1.1 Text Alternatives

So what exactly does this mean? What elements do we need to apply this guideline to?

Ok I know what you’re thinking…

Images, Am I Right???

Well that’s true, but there are plenty of other places where we need to think about alternative text. We often skip right over them, because to many of us these elements seem so obvious and need little explanation. Thisis where it is key to remember as developers and designers that we are not just designing of ourselves, we are designing for everyone!

Success Criterion 1.1.1 Non-text Content -- Level A

So let’s first go through the list of elements that we need to consider when thinking about text alternatives:

Non-Text Content:

Controls and/or Inputs

• A name that describes the purpose of the control is required

Time-Based Media

• This will need a descriptive identification of some sort.
  • This is discussed further in 1.2

Tests

• If a test or exercise is in invalid when presented in text, then it needs to have a descriptive identification of the non-text content.

Sensory Experiences

• You will need to provide descriptive identification of the non-text content.

CAPTCHA

• A CAPTCHA is where the program is checking to make sure the user is a person and not a bot of some kind. The text Alternative needs to Identify that this is a CAPTCHA and what it’s purpose is. Alternative forms of CAPTCHA may also need to be provided to accommodate for different sensory disabilities.

Decoration, Formatting, Invisible

• Implement this in a way that allows assistive tech to ignore.

Alright well that seems simple enough, right? So let’s see some examples.

Let’s start with one that we have some familiarity with.

<img alt=”people eating” href=”/images/people-eating.jpg” />

Notice that I just describe the content of the image. I do not need to add the word image or picture, because assistive technology will announce that this is an image. Now if this image was just decorative we would want to make sure our assistive technology skips over it.

<img alt=”” href=”/images/blue-texture.jpg” />

As you can see here I leave the alt attribute as an empty string. This will signify to the assistive tech that it is not important. To go one step further you could add aria-hidden=”true” to really make sure it’s skipped over.

Alright so let’s talk about controls and inputs. This is something we’re familiar with as well but probably didn’t really think of as needing Text Alternatives. A lot of the time our text alternative in the cases of Controls and Inputs is our related or adjacent text. For instance, a button should have concise, instructive text related to it.

<button>Download Document</button> 

The text encapsulated in the button tags is its ‘alternative text’ if it clearly defines what the purpose of the button is. However, the button could be styled in a way that it may not encapsulate any text at all. If that is the case we need to make sure the assistive technology can announce its purpose.

<button aria-label=”Download Document” >
<img aria-hidden="true" href="download.svg"/>
/* since we have the aris label on the button 
we don't need the image announced so we place 
an aria-hidden on the image so it won't be 
redundantly read */
</button> 

Using aria-label is one way of doing that. In fact there are a couple of ARIA attributes that we can use when needing text alternatives. They can be used to associate text so that assistive tech can describe our controls or more complex images more efficiently.

Let’s look at the different ways that we can add Alternative text to our inputs. Generally speaking using HTML5 tags is the best practice for associating text to controls and inputs, because ARIA (WAI-ARIA: Accessible Rich Internet Applications) is only detected through assistive technology purposes.

/* htmlFor = id */
<label htmlFor=””></label>
<input id=””/>

/* Label Wrap */
<label>
  First Name
<input/>
</label>

/* aria-label */
<input aria-label=”First Name” placeholder=”First Name”/>

/* aria-labelledby */
<p id=”firstNameLbl”>First Name: </p>
<input aria-labelledby=”firstNameLbl”/>

For complicated images such as graphs or detailed paintings sometimes the alt attribute does not fully allow us to describe the content, in this instance we would want to add a text-based description that is more elaborate so our user can truly understand what’s going on in the image. There are a few ways to do this.

Adjacent text that is references what is in the alt attribute or vise versa

<img alt=”A Sunday Afternoon on the Island of La Grande Jatte, painted by Georges Seurat”  href=”#” /> 

<article>
<p>
In the painting of ”A Sunday Afternoon on the 
Island of La Grande Jatte” we can see that 
painter Georges Seurat... 
</p>
</article>

Below is a visual representation of what that would look like:

In the painting of ”A Sunday Afternoon on the Island of La Grande Jatte” we can see that painter Georges Seurat captures the enjoyment of a number of Parisians at a park on the banks of the River Seine. This piece is by far the most famous in Seurat's catalog, often referred to as the leading example of pointilism.

Usearia-describedby

<img alt=”A Sunday Afternoon on the Island of La Grande Jatte, painted by Georges Seurat”  href=”#”  aria-describedby=”paintingDescID”/> 

<p id=”paintingDescID”> 
In the painting of ”A Sunday Afternoon on the Island 
of La Grande Jatte”we can see that painter 
Georges Seurat...
</p>

If the image is a SVG you can add a <desc> tag and inject your long description directly into the image.

As for Time-based media having an aria-describedby or aria-label would be helpful but does not fully support the concept of accessibility. We want to be fully inclusive. That being said please be on the look out for Part 2 of 'P is for Perceivable' where we go over section 1.2: Time-based Media.

Thank you for reading!