Web Accessibility: The 4 Principles of Inclusive Design

What is Web Accessibility?

Web accessibility is best described by what it’s not. The Australian Department of Social Services put it well:

Ultimately, the goal is to make the web a technology that can be used by as many people as possible. That includes:

• Devices
• Browsers
• Ages
• Backgrounds
• Abilities

Why Does Web Accessibility Matter?

Big picture: it’s everyone’s responsibility.

The web has the potential (and already has begun) to create huge advancements in human technology and achievement. It can also leave people behind.

In a business sense, a site burdened by accessibility barriers excludes people – the people you care about.

We love buyer and user personas – they’re a great way to define your target audience, their needs, their unique characteristics. Not everybody is in your target audience, and they shouldn’t be.

But not providing a clear, easy way for people in your target audience to reach you, based only on a very particular characteristic, doesn’t make business sense.

Therefore, the more accessible your website is to users, the more people will understand you more easily.

Who Defines Web Accessibility?

There are a few entities you need to be familiar with in the accessibility realm: in the US, the Department of Justice (DOJ), and the World Wide Web Consortium (W3C). Respectively, the rules to know are the Americans with Disabilities Act (ADA) and the Web Content Accessibility Guidelines (WCAG 2.0).

The ADA

We’ll start with the DOJ’s requirements under the ADA. In 2010, the ADA standards were set for public and commercial entities with “places of public accommodation,” which includes the internet. While the Department is currently determining the regulatory process specific to the web, it has made it clear (through court cases) that the web is covered.

Currently, the ADA encourages self-regulation while the Department gets more specific. In the meantime, it encourages WCAG 2.0 level AA guidelines.

WCAG 2.0

WCAG 2.0 sets specific techniques and qualifications for web compliance, which we’ll outline below. It is generally recognized as the international industry standard.

It’s important to note that the WCAG standards are guidelines, not law. The W3C itself evaluates organizations based on these standards but doesn’t have the authority to enforce them. Given that the Department of Justice encourages following WCAG 2.0 standards in preparation for its own enforcement mechanism, it’s a good idea to use the guidelines as a good basis.

TheW3G organizes the standards into four principles:

• Perceivable
• Operable
• Understandable
• Robust

Specific guidelines all fall within one of these principles and are then categorized into three levels of compliance: A (must support), AA (should support), and AAA (may support).

When designing and developing for accessibility, we typically use WCAG 2.0 AA as a standard.

The AAA level of compliance includes such features as having a sign language interpretation for any audio content, a mechanism for identifying pronunciation of some words, etc. Many of the AAA standards, such as restricting flashes known to cause seizures and identifying a user’s location on the site, we follow.

Web Accessibility Guidelines

Here, we’ll outline at a high level the WCAG 2.0 requirements for web accessibility, including levels A and AA compliance. While you’re reading, for a more detailed and highly customizable reference of requirements, reference the W3C’s online tool.

Principle 1 – Perceivable

Provides text alternatives for non-text content.

Non-text content ranges from images to buttons to forms. Most of these elements have prebuilt alternatives. The easiest example is what’s called an “alt tag” for images. Alt tags provide just that – a text alternative for an image file. They’re useful for users with slow internet connections so if an image fails to load, the alt attribute displays instead.

In addition, alt tags are great for search engine optimization. A description that succinctly and accurately describes the subject of the image helps Google and users understand it, even if they can’t see it.

Other forms of text alternatives include descriptive captions, well-titled forms, and even text tables to support visual graphs. As a result, users have a better experience across any device.

Provide captions and other alternatives for multimedia.

Time-based media, such as audio-only or video-only media, can provide different forms of conveying information. It’s important to support these media in ways that can be accessed regardless of device or disability. Often, users will want to play a video with the sound off.

Captions help make video content readable. Or, to take one step further, a transcript below the video or audio element can help users read the content at their own pace.

Create content that can be presented in different ways.

This is largely a technical and structural consideration. In layman’s terms, what’s happening here is that the content is being provided, without the styling.

When considering accessibility, consider what content may look like if styling isn’t available, either due to technological or sensory restraints. Does it still make sense? Is there a clear structure?

Again, this has an SEO benefit as well. Clearly structured content, whether by correct header levels or by correctly identifying elements like tables as such, helps search engines understand the content on a page.

Make it easier for users to see and hear content.

Color blindness affects up to 8% of men and 0.5% of women in some way. Other sight deficiencies, even those short of total blindness, are much more common.

Color is a powerful visual element that a website can certainly use to its fullest extent to drive action and create a strong, cohesive brand. Within that, sites should also use color with consideration, and not as the only visual means of conveying information.

Other considerations include a high enough contrast level between text and its background (4.5:1 if you’re curious), text that’s resizeable without the loss of content or functionality (part of responsive design), and providing alternatives for images of text.

Principle 2 – Operable

Make all functionality available from a keyboard.

You’re familiar with the common functionality of jumping between elements on your computer using your tab button. Your keyboard actually has a lot of functionality; for the most part, it’s possible to go throughout your day without the use of your mouse if absolutely necessary.

Making all functionality available from a keyboard relies largely on not blocking any functionality. In addition, if it’s necessary to change the typical keyboard interaction for an interactive element, advise the user on how to use their keyboard to navigate.

Give users enough time to read and use content.

Modern web design and user experience principles generally don’t rely on timing – it’s just not a good experience.

One exception that sites still occasionally use is sliding images at the top of a home page. Adding the ability to pause or navigate through the slides is a simple way to make sure the user has control.

Do not use content that causes seizures.

The firm rule that WCAG 2.0 uses (at the A level of compliance) is that “web pages do not contain anything that flashes more than three times in any one second period.”

While this may seem self-explanatory, there are a few use cases you may not think of right off the bat.

A video of a flashbulb, for example, may violate this rule. In such a case, you may either slow down the flash to below the threshold or momentarily decrease contrast the content to significantly reduce the effect of the flash.

Help users navigate and find content.

As you might imagine, helping users navigate and find content is simply a best practice. Consequently, it’s an accessibility necessity.

Most of the specific techniques in this area of site operability include:

• Clear page titles
• Well-organized content
• Easy-to-understand website architecture
• Descriptive link text (as opposed to “click here”)
• Clear and frequent headers that provide structure to on-page content

Principle 3 – Understandable

Make text readable and understandable.

The language of a page should be able to be programmatically determined – that is, it should be clear that a page is in English.

For any technical content or jargon, when it is necessary, make sure to explain it within the surrounding text.

Make content appear and operate in predictable ways.

Each individual page should have a clear purpose and focus, that doesn’t change based on any particular user interaction. That’s the purpose of content architecture and navigation.

Relatedly, navigation should be both constant and consistent – the main navigation should always remain the same on any page, and should always remain in the same location. On more complex sites, there may be sub-navigation areas for certain areas of the site. Again, the same location and clear denotation are essential.

Help users avoid and correct mistakes.

If a user makes a “mistake” on a website, it’s likely in an interactive element, such as a form. Some examples may be skipping a required field or inputting an incorrectly formatted email address.

A good form will provide error messages, either by default of customized to an individual field.

Principle 4 – Robust

Maximize compatibility with current and future user tools.

The full definition of the principle of robustness states that “content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.”

Clean, thoughtful code accomplishes this. Some of the specifics include unique attributes, a complete start, and an end to every element, unique element identifications, and clear element names.

It also includes a responsive design and cross-browser compatibility, meaning that a website does not change in its content, meaning, or delivery depending on a user’s browser (Chrome, Firefox, Internet Explorer, etc.)

Conclusion

Technology changes rapidly. That’s an absolutely wonderful thing, and it allows those at the forefront – creators – to constantly improve and push the boundaries to create better experiences for users.

The only way to create better experiences for users is to make the web a technology that can be used by as many people as possible.