Featured Blog Article
Zenyth blog 1
The four wcag principles: the road to compliance
The Four WCAG Principles: The Road to Compliance The Web Content Accessibility Guidelines (WCAG) define four principles for making content usable by people with disabilities. They're open-ended in themselves, suggesting broad directions. Turning them into a plan of action requires specific goals and practices, and WCAG provides those with guidelines under each principle.Reaching the goals is a step-by-step process. An exist...
Icon clock 19 July 2018

The Four WCAG Principles: The Road to Compliance

The Web Content Accessibility Guidelines (WCAG) define four principles for making content usable by people with disabilities. They're open-ended in themselves, suggesting broad directions. Turning them into a plan of action requires specific goals and practices, and WCAG provides those with guidelines under each principle.

Reaching the goals is a step-by-step process. An existing site needs to take each relevant guideline, one at a time, and improve the areas where it falls short. A new site needs to start with a plan that sets out which guidelines it will comply with. Not every site needs to follow every guideline.

The four principles state that to be accessible, content must be perceivable, operable, understandable, and robust. They form a natural sequence, moving from the most basic to the broadest. How far you go in meeting them depends on your site's and its audience's needs. Some parts are within everyone's reach and are part of a good design, while others take a concerted effort.

Let's look at how a site can follow the road to the greatest amount of WCAG compliance. The primary documents explain what features go with which compliance level; this piece looks at compliance more as directions it can take.

Principle #1: Make content perceivable

The starting point for access is being able to observe and grasp the content. Fail in this, and the user can't do anything. Making the content perceivable starts by thinking of it not as a fixed, visual form, but as information to present in whatever way communicates it best.

Text is versatile. Browsers and add-ons have many ways of presenting it, so if you can get information into text form, browsers have ways to present it to almost anyone. It might be visible (characters on a screen), audible (text to speech), or tactile (Braille). It might be enhanced (large text). It's information that's independent of any fixed form.

Because text is so broadly usable, the first guideline under Principle #1 is to "provide text alternatives for any non-text content." If nothing else, there should be descriptive text for each item that is an image, audio, video, etc. Controls need to have a text description. Text shouldn't be presented as an image unless there's a strong reason to.

This much is basic, and every site should have it, but it's possible to do even more with text, and all it takes it following the principles of good design. If the visual layout is the only indicator of structure, text-to-speech software might present it in a confusing order. The HTML tags have to show the content's structure, so the users can get it in the right order however they read it.

Structure or text, not appearance, should indicate the significance of items. A common mistake is using color and nothing else to convey information (e.g., indicating urgent items in red). Positioning shouldn't be critical. For instance, it should be possible to blow up a table to a larger text size without making it unreadable.

The more of the guidelines a page complies with, the less likely it is to give people trouble reading it. As a bonus, making content flexible enough to follow them goes a long way toward creating a responsive design. They're both aspects of the same issue, separating content from presentation.

Principle #2: Make content operable

When pages are interactive, accessibility requires letting all users use them as well as viewing them.
Following the guidelines makes life better for all kinds of people, whether they have handicaps or not. One of the guidelines is "Provide users enough time to read and use content," and that's just common sense.

The details of what constitutes enough time and how to provide it are specific, but following them contributes to good design. There's an exception for "essential" functions that need time limits by their nature, such as timed quizzes.

Most people like GUIs, but not everyone can easily work with them. Keyboard input is within the reach of most people, so the first guideline under Principle #2 says all functionality should be accessible from a keyboard. A lot of people just prefer keeping their hands on the keyboard as much as possible, so following this guideline benefits many users.

As with Principle #1, having well-structured HTML goes a long way toward operability. Titles and headings should explain controls. Link text should be relevant to the link.

Principle #3: Make content understandable

That last point shades into the third principle. Again, it's common sense that the presentation of the content should help users understand it, rather than getting in the way. One of the guidelines says that pages should "appear and operate in predictable ways."

Navigation should be consistent. A menu that appears on every page should always have the same structure.

The browser needs to be able to identify the language of the content, usually through HTML attributes. That way, text-to-speech and other interpretive software can handle it properly.

Designing good forms is a big part of this guideline. It should be hard to make mistakes and easy to fix them. For instance, error checking should catch an invalid phone number and tell the user exactly what the problem is.

This is especially important if the user is making a binding commitment such as a purchase. It's worth putting extra effort into making forms understandable. All users benefit, and the site owner gets better response quality.

Some of the AAA level guidelines call for explaining unusual words and providing a version of the content that doesn't demand too high an education level. Whether this is important depends on the context, but it's worth keeping in mind that some readers might be well-educated yet not very proficient in the language of the page.

Principle #4: Make content robust

The pages need to work well with any browser and assistive technology. Once some site developers thought Internet Explorer was the only game in town. Today it's Chrome. Tomorrow it might be something else. But there have always been many people who use other browsers, and people who require accessibility features are especially likely to make unusual choices. Good pages follow standards that work everywhere.

The fourth principle has just one guideline: to "maximize compatibility with current and future user agents." This doesn't require a crystal ball, just conforming with proper HTML and avoiding dependence on browser-specific features. JavaScript that modifies the page on the fly has to avoid breaking the standards. Testing should include a variety of browsing software and user agents.

A meta-principle: Usability over legalism

The purpose of these principles is to make pages usable to as broad a range of people as possible. Accomplishing this for the relevant audience is more important than counting the number of requirements met. Usability testing and reviews are essential to deciding whether a site really meets its goal.

Not every guideline is equally important to every site. A site needs to be accessible to its intended audience. This always includes a more diverse range of people than you might expect.

At ZenythGroup, we understand all aspects of Web design. Accessibility, branding, responsiveness, and attractive appearance are all part of the same process, and the sites we create get high marks in all of these areas without sacrificing one to another. The result is sites that appeal to the largest possible number of users.

Talk to ZenythGroup about WCAG compliance today!