Web Accessibility Standards: Detailed Overview for Designers

/ March 21, 2020 | 6 Mins Read

Web Accessibility Standards: Detailed Overview for Designers

The Web Content Accessibility Guidelines, often abbreviated to WCAG, are a series of guidelines for improving web accessibility. Although the W3C’s Web Content Accessibility Guidelines 2.0 are a huge step forward in improving web accessibility, they do have their issues. Primarily, they are almost impossible to understand.

Many things may come to mind when you think of accessibility. After all, it is a broad term that covers a ton of things. 

Even if you talk about accessibility in design, the term still covers a vast range of standards, which of course, comes with a bevy of confusing acronyms. Following web accessibility standards can sometimes make or break a design. As a web designer, you know how important it is for everybody to be able to get value from your work. 

In this article, you’ll be learning more about web accessibility, which has become more critical in recent years. Not only is it an inclusive way to create your designs, but it’s also a great way to improve the conversion rate for a website since more people can access the content. 

1. What is Web Accessibility?

Web accessibility refers to the way that tools, technologies, and websites are designed, developed, and put together in such a way that people with disabilities can use them with ease. To be more specific, it’s essential to design with inclusivity in mind so that those with disabilities can navigate, understand, interact, and contribute to the web. 

Not only is web accessibility helpful to the differently-abled, but it is helpful for everyone in their daily lives as well. For example, some people may have some limitations that affect them in certain situations – like those who have light sensitivity, or those who are unable to listen to the audio. As you can imagine, this is incredibly useful for people who browse the internet with their volume off. 

2. The Web Accessibility Initiative

The Web Accessibility Initiative (WAI) was created to ensure that everyone, able and differently-abled alike, can access and contribute to the internet in similar manners. The WAI is typically considered by most designers as the standard when it comes to accessibility.

There are three components to the WAI:

  • Authoring Tool Accessibility Guidelines (ATAG) is the branch for development.
  • Web Content Accessibility Guidelines (WCAG) covers web content.
  • User Agent Accessibility Guidelines (UAAG) is for the users. 

The WAI is developed by the AG WG, or Accessibility Guidelines Working Group. This group is a part of the World Wide Web Consortium (W3C). 

On the W3C website, you’ll find many web accessibility resources and tools to help you get started as a new designer. If you’re already an experienced designer, don’t worry, because there will always be something new and useful to learn from there as well. 

The Three Tiers of Accessibility

So far, there have been two iterations of the content accessibility guidelines. WCAG was the very first iteration, which first came out in 1999. It was truly a big leap in accessibility, making it easier for designers and developers to design for inclusivity. WCAG 1.0 back in the day had 14 guidelines that were divided into three priorities. 

  • Priority 1 or level A is the minimum, which ensures the availability of the most features for basic web accessibility. Websites must satisfy Level A as an essential requirement for accessibility.
  • Priority 2 or level AA deals with mid-range accessibilities. Its guidelines deal with the most common barriers for the differently-abled. Websites should meet this checkpoint, or else someone will be unable to use all the features.
  • Priority 3 or level AAA is the highest web accessibility level. This is not required to be met by all websites, but if these guidelines are met, the website will be mostly accessible to all. 

3. Building on WCAG 1.0

Currently, there are 2 different iterations of the WCAG. Discussed above was 1.0. 2.0, the current standard, builds and iterates on this in several ways. 

WCAG 2.0

As a designer, you have to be knowledgeable in WCAG 2.0. In summary, the guidelines are: 

Content has to be perceivable.

You must provide alternative text (alt-text) for any non-text content (images, videos) so that accessibility aids can make use of this information. Alt-text is often converted to large print, text-to-speech, and braille, among others.

Alternatives such as captions and the like must be provided for time-based media like videos. Content has to be adaptable so that it can be presented in a myriad of ways, like more straightforward layouts without any information and structure loss. 

Adaptability includes designing for different screen sizes, for example. Finally, content must be distinguishable, and so you as the designer have to make it easy for your end-users to hear and see the content. To ensure distinguishability, certain things must be taken into consideration, such as text size, color contrast, and more. 

The content has to be operable.

This means that all functionality must be keyboard accessible so that the user can navigate all components of the webpage using a keyboard. Users must be given enough time for reading and using content, so you should make considerations for any blinking, flashing, scrolling, and auto-updating components. It’s best to avoid creating designs that may trigger seizures and similar physical reactions. 

To make it easier for your users, you have to make design decisions that will allow for easier navigation. Titles, headers, labeling, and other elements of information architecture will help with this. Finally, you should take into consideration other input methods – for example, have a minimum size for your touch targets. 

Content must be understandable.

This point deals with readability for the most part. The text should be legible and understandable. A key should be provided for any idioms or abbreviations. Web pages should be designed to appear as well as operate predictably. Provide input assistance when and where you can.

Finally, the content should be robust.

This means you have to create your designs to be compatible with current as well as future assistive technologies. 

4. Authoring Tool Accessibility Guidelines

The ATAG covers authoring tools, which can be software or services that are used to make web content. This includes dynamic web apps and static websites or pages. These services and software are used by “authors” like you – web designers, web writers, and web developers. 

If you’re still unsure of what these authoring tools are, here are a few examples: online forums, wikis, and even social media.

ATAG splits into two parts: one to make authoring tools more accessible for the differently-abled, and one to help all authors to create web content that is more accessible in general. Essentially, ATAG exists to help enable and support the production of WCAG-conforming content. 

Part One: For Making Authoring Tools More Accessible

This part of the ATAG is meant to do three things. First, it ensures that all functionality of the authoring software, both web-based and non-web-based, is accessible to all. This means that the authoring software’s user interface has to follow all applicable guidelines for accessibility. 

Second, it makes certain that all editing views are understandable and perceivable. Alternative content must be made available to the authors. Presentation of editing-view should be able to be programmatically determined.

This means that the information has to be encoded in a manner that will allow other software, such as assistive technologies, to take the information and present it in a more accessible way. 

The third point ensures that editing views are all operable. For example, keyboard access must be provided to/for authoring features. The authors must be provided with enough time. They should also be alerted to any content that may cause seizures, also called seizure warnings

Furthermore, navigation and editing must be enhanced through the content structure. Text search capabilities must be provided of the content, and users should be allowed to manage their preferences. Previews should be at the very least as accessible as the user agents. 

Finally, the fourth point is included to make sure all editing views can be understood. This means authors must be helped to not only avoid but also correct their mistakes. The user interface should be documented, all accessibility features included. 

Part 2: Accessible Content Production Support

There are four guidelines under this point. The first is for when fully automatic processes are used to produce accessible content. This point ensures that the content created in this manner is always accessible and that the relevant accessibility info gets preserved. 

The second point supports authors when it comes to producing content with accessibility in mind. It ensures that the production of the content is possible. The authors are also guided during this production process. Furthermore, this point aims to assist authors when it comes to managing any alternative content like alt text. 

The third point is meant to support authors when it comes to making their existing content more accessible

The fourth and final point is to ensure that authoring tools are promoting as well as integrating their accessibility features. 

5. User Agent Accessibility Guidelines 

UAAG is meant to address user agents like media players and web browsers, as well as some aspects of existing assistive technologies. 

The UAAG documents are used to explain how you can make the user agents more accessible to differently-abled people. This is because there are certain aspects of accessibility that are better addressed by the user agent(s) than by the content itself. This involves things such as user preferences, UI accessibility, and text customization. 

Thankfully, as a web developer or designer, you won’t need to be familiar with these UAAG 2.0 standards unless you are working on a user agent like browsers and media players.

If you’re wondering about the UAAG standards anyway, well, you can learn about the specifics if you’d like. However, they are generally similar to WCAG, following the base principles like perceivable content, operable, and understandable content. 

Final Thoughts

If you’re looking to build a business website as a client project, or if you’re just trying to learn how to improve your skill set, it’s always a good idea to know as much as you can about web accessibility. And while a lot of these guidelines are presented to you almost in checklist form, it’s important to look beyond just ticking boxes. 

To improve on your website or user agent’s accessibility, you should do some exercises. For example, you can look into the Inclusive Design Activities by Microsoft, which will help you to identify what you need to do to help your users further. Knowing what needs to be done and how you can do it will make it easier for you to design with your user’s ease in mind. 

As a designer, it’s a good idea to make it one of your missions to establish your policy for accessibility. This allows you to keep your work along the same line, and make it accessible to most if not everybody. 

What do you think? Let us know in the comments below.

Vincent Sevilla is a professional web designer and inbound strategist for Grit PH. His goal? To innovate ideas, create good art, and to travel all the best places in the Philippines.

How can Explainer Videos Drive more Leads?

There is no doubt that you need to focus...

6 mins read

5 Facebook Messenger Hacks to Power Your Marketing Strategy

I am sure you have already commenced your marketing...

5 mins read

Scale Your Startups with these 4 Technologies

Launching a startup is one thing, turning it into...

5 mins read