ADA Accessibility Principle #1: Perceivable

New federal ADA accessibility guidelines are starting this month – are you ready? To better understand these guidelines, we’re breaking down the rulebook by each of its four principles. This time we’re taking a deeper look at the first principle, perceivable.

New ADA Compliance Recap

Starting January 18^th, 2018, all new websites and updates to existing websites will need to comply with specific legal guidelines on ADA accessibility. The Web Content Accessibility Guidelines (WCAG) 2.0 were created by the W3C’s Web Accessibility Initiative and are available to view in their entirety here.

If you’re just starting to learn about ADA compliance, get caught up by reading a couple of our previous articles. These articles share the benefits behind ADA compliance from a business standpoint, but also the consequences that can happen if you fail to meet the legal guidelines.

Your Overview to ADA Compliance for Websites in 2018

The Importance of ADA Website Compliance [VisionCorps Case Study]

The guidelines are broken down by four main principles: perceivable, operable, understandable, and robust. Under each principle, there are guidelines that provide specific goals a website should work toward. Under each guideline, there are testable success criteria. Those criteria are graded A, AA, or AAA. This grade shows the level of conformity to accessibility, AAA being the highest. The law only requires A and AA criteria to be met, so those will be the specific criteria we mention in this series.

Let’s breakdown the first principle within the guidelines – perceivable.

Principle #1: Perceivable

Defined by WCAG 2.0, this principle states that “information and user interface components must be presentable to users in ways they can perceive.” This principle ensures that content is available to view in multiple forms, and is easy to see or hear regardless of disability type. A website visitor should be able to understand all of the information presented on the page. Here are the guidelines and their recommendations to meet the perceivable principle.

Guideline 1.1: Text Alternatives

“Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.”

This guideline wants text alternatives to be presented in electronic text, not text only available within an image. The benefits of electronic text include:

• Can be rendered in variety of forms including visual, auditory, and/or tactile.
• Can be easily enlarged on a page without losing context.
• Can be spoken aloud through assistive technologies.

What falls under non-text content? It’s any content that cannot be programmatically determined or is not in a human language. This could include ASCII Art, emoticons, leetspeak, and images representing text.

Examples of proper text alternatives:

• An audio clip of an interview also includes a link to a text transcript of the interview right after the clip.
• You’ve made a visual bar graph of important data. You include a longer description that breaks down a summary of the data and its inferences given in the graph.
• All images on a web page are given alt text tags that describe what is happening in the image in the context of the page.
• A visitor takes a test on your website. While the test uses sound effects to signify a right or wrong answer, there is also a text description included that says whether the answer was correct.

Guideline 1.2: Time-Based Media

“Provide alternatives for time-based media.”

This guideline applies to both time-based and synchronized media that is either prerecorded or live. Some of the same criteria used to meet the text alternative guideline could be applicable to this guideline as well.

Examples of proper alternatives to time-based media:

• A silent movie on your website also comes with an optional audio track that describes what’s happening in the video.
• A video includes captions of the speaking in the video as well as any additional auditory elements like music or laughing.
• A manual on your webpage comes with synchronized video clips in each section. Since the video clips correspond exactly to the section they are located, and all of the same information is already mentioned in the text manual – no captions or transcripts are needed.
• A live news story utilizes captions on their live media broadcast.
• A video tutorial inserts an audio description in between the presenter talking to explain what the presenter is doing when they aren’t describing their activities.

Guideline 1.3: Adaptable

“Create content that can be presented in different ways (for example simpler layout) without losing information or structure.”

This guideline seeks to ensure that the structure and relationship of the content doesn’t change when given in an alternative manner, that the correct reading sequence is maintained, and that the content doesn’t rely solely on any sensory data.

Examples of adaptable content:

• Required fields in a form are not only distinguished by a red outline, but also an asterisk character. Complimentary instructions state the purpose of the asterisk.
• A simple text document follows standard formatting conventions that will allow assistive technologies to convert it in its proper sequence.
• If multiple columns are used to display content, the linear progression of the content goes from top to bottom and then to the top of the next column.
• A multi-page text uses an arrow icon to signal where to click to continue on to the next page. In addition to the icon, the arrow is labeled ‘continue’ and includes directions for how to navigate to the next page.

Guideline 1.4: Distinguishable

“Make it easier for users to see and hear content including separating foreground from background.”

This guideline focuses on making the primary visual and audio content as distinguishable as possible for users with disabilities, not just providing alternatives to the primary content.

Examples of distinguishable content:

• A form with required fields shows that they are required with text and/or symbols, not just by the color red.
• A page that starts audio automatically provides a link at the top of the page to easily stop the audio – or better yet, doesn’t automatically start any audio but provides a link with the option to start the audio.
• All visual text and images have a contrast ratio of 4.5:1.
• Text on a webpage can be zoomed in up to 200% without the loss of context or functionality.
• A web page uses text rather than an image of a text to achieve the same visual effect, like using headers. If the same effect cannot be achieved, the image has the ability to be customized to a specific font size, color, and alignment that makes it easily perceived by the user.

To Recap

The perceivable principle is all about making a website’s information available to view and understand by all users, regardless of disability. There should be alternatives to all visual, text and auditory content, and all content should be adaptable and distinguishable. You can get an even more detailed breakdown of each guideline under the principle in the official recommendations.

If you have any questions about how to apply to this principle onto your own website, talk to your website agency. They should be able to answer any questions about these mandatory regulations.

Is Your Website Accessible to the Blind?

Creating a website accessible to all users is not just important because of a possible lawsuit or government action, but also because you want your business to be available to all potential customers. It’s simply a good business practice and an example of positive customer relations.

Find out if your website meets ADA guidelines.

Contact us now for a FREE consultation!