🚀 We've just released our new subscription model.

Check it out

Web Content Accessibility Guidelines (WCAG)

spiked wheel icon

The Web Content Accessibility Guidelines is documentation containing guidelines and good practices to create a website accessible to people with disabilities. WCAG guidelines are mandatory for companies financed by the state budget or which are public institutions. However, documentation has become universal, and many private companies implement its rules. The article explains and describes the WCAG documentation and lists ways to improve the website regarding web accessibility.

Author

Date added

Read time

29 min

Table of contents:

In the context of UX, the concept of accessibility appears extremely often. This category has become a kind of determinant of a good user experience. Currently, it is necessary to consider various types of disabilities and adapt the website or mobile application in this regard.

The Web Content Accessibility Guidelines, which were created by the WAI (Web Accessibility Initiative) of the W3C (World Wide Web Consortium), come in handy. It contains guidelines that should be followed while designing a page and while writing it in the code. It is also worth noting It should also be noted that state -institutions and institutions financed from the state budget must adapt the website to the WCAG guidelines.

There are many different types of disabilities, including intellectual, physical, sensory, and mental illnesses. Every person with such a disability should have open and easy access to digital products – each one is unique, and everyone deserves to be treated equally.

We can encounter a similar situation in the urban space. If everyone cannot enter a particular building, the public space and its architecture should be adapted to people with disabilities. This way, we create some facilities for them, such as elevators or ramps with which they can effortlessly enter another floor, tacticle pavings with texture surface indicators, or sound signals that give a clue about the way for vision-impaired pedestrians. It’s similar to a digital product. However, in the context of accessibility in digital media, we speak of web accessibility.

Web accessibility is the design and development of digital technologies so that people with disabilities can use them - it means that access to the website is easier and access to content is equal. This includes, for example, allowing proper navigation through the website using a screen reader or adjusting the appropriate contrast so that a person with visual impairments becomes familiar with the content on the website. It also means providing multimedia with a transcript or a film with sign language interpretation so that deaf people can access the content. Some people cannot make complex movements - for this purpose, for example, navigation with multi-gesture movements should be limited.

The examples can be multiplied as well as their solutions.

Moreover, many facilities for people with disabilities are used when people measure against all sorts of limitations. Sometimes it is not even people with disabilities but also the elderly, people with broken limbs, or people with a slow internet connection. As you continue reading the article, you will notice that web accessibility makes it easier for everyone to access and has led to a remarkable transformation of technology.

It may seem that this issue only concerns people with disabilities. However, it is worth rethinking this issue and looking at it from a broader perspective. Currently, the issue of web accessibility is expanding. It's not just about disabilities anymore – you should also consider temporal disabilities and situational limitations in your design.

Microsoft Inclusive Design Toolkit Manual distinguishes 3 disabilities categories:

  • Permanent – is a disability of people who have permanently lost a limb, hearing, speech, or sight;
  • Temporary – a situation where the person has a short-term injury and suffers from limitations. It could be a broken limb, infection of the eye or ear;
  • Situational – is a temporary, place-and-time-dependent situation that can create limitations. These are situations where hearing (e.g., a loud concert), movement (e.g., holding a child with one arm), sight (e.g., darkness), or speech (e.g., a strong accent) is limited.

Suddenly, the issue of accessibility is not narrowed down to a few percent but increases by a more significant number of people. Therefore, it is often said that if accessibility is considered on a website or in a mobile application, more people will benefit than assumed. You can find some examples of the impact in our article about inclusive design.

In the Microsoft document “Inclusive 101” on inclusive design, we can find data that clearly states how creating something for one type of disability contributes to the extension of technology to other people:

Suddenly, we are no longer talking about 0.01% of the population for which we will design the site in terms of accessibility. When all limitations are taken into account, this figure becomes 7% –  this is only one possible situation, one scenario. There is something to think about.

At first, glance, designing an accessible website seems like a demanding job. It's true – you should remember about web accessibility at almost every stage of creating a website. Designing based on certain biases may result in a design being narrowed down to a small number of people. It cannot be assumed that the majority of users don't have hearing, vision, motor, or speaking problems.

Fortunately, the web has all the documentation needed to create an accessible website. This collection of documentation is called WCAG, i.e., Web Content Accessibility Guidelines. The documentation was created thanks to the W3C initiative called WAI (Web Accessibility Initiative) - it constantly develops, improves, and perfects guidelines to improve web accessibility. It is also worth noting that the initiative also helps to understand the documentation it has created. Many of its points may not be fully understood by someone who has never written a line of code or is a beginner in IT.

You can find all the technical information you need on the W3C (World Wide Web Consortium) website. It's also a nice touch that each team member can find the right guidelines for themselves or tutorials on how to improve the accessibility of the website.

Moreover, the accessibility policy documentation is constantly updated – this article is based on the current version 2.1. Work on WCAG 3.0  started in 2021, but on the W3C website, there’s only a draft.

WCAG 2.1 Principles are divided into 13 guidelines, each of which is further divided into specific requirements (“Success Criteria”). Each of these “Success Criteria” is labeled as A, AA, or AAA, and they form a “conformance level”. Listing all guidelines, success criteria, and their levels are important to understand the complexity of the WCAG documentation.

Information and interface components (like buttons, checkboxes, icons, and notifications) must be presented to users to perceive them using their available senses.

Guidelines:

1.     Text Alternatives – Level A – providing alternative text for non-text elements of the website;

2.     Time-based Media

Providing subtitles and audio descriptions of other types of multimedia, which means:

Level A:

  • Audio-only and Video-only (Prerecorded): pre-recorded audio or video recordings require transcription or alternative text or audio description describing what the video depicts;
  • Captions (Prerecorded): multimedia subtitles should contain not only dialogues but also audio information relevant to the context;
  • Audio Description or Media Alternative (Prerecorded): it should prepare an audio description, that is, an audio recording that describes the visual or transcription content.

Level AA:

  • Captions (Live): providing subtitles for live broadcast recordings;
  • Audio Description (Prerecorded): providing audio description for video content on the site.

Level AAA:

  • Sign Language (Prerecorded): providing sign language interpretation of content on the website;
  • Extended Audio Description (Prerecorded): provide extended audio descriptions for pre-recorded videos.
  • Media Alternative (Prerecorded): provide text alternatives for pre-recorded videos.
  • Audio-only (Live): provide an alternative to live audio content.

3.     Adaptable

Adapt your content so you can present it in various ways without compromising intelligibility. These guidelines are about adapting the page to assistive technologies, i.e., for example, the use of appropriate tags in the HTML (Hypertext Markup Language) code when creating forms and data tables:

Level A:

  • Info and Relationships: use semantically correct markup in HTML so that assistive technologies read the content on the page appropriately and in the proper order;
  • Meaningful Sequence: ensure intelligible order of content;
  • Sensory Characteristics: the information on the website should not be presented only with the help of aesthetic impressions (color, image, icons, symbols).

Level AA:

  • Orientation: it should be possible to use the phone in different orientations (portrait, landscape);
  • Identify Input Purpose: providing the function of “autocomplete.”

Level AAA:

  • Identify Purpose: ensuring that all fields can be filled by autocompleting mode.

4.     Distinguishable

Customize your content so that it is easy to see, but also to hear. In this principle, it is about the appropriate visual adjustment of the website, i.e. ensuring good contrast, font size, and providing good page scaling. This rule also assumes that the background and content of the page are easy to distinguish:

Level A:

  • Use of Color: color cannot be the only carrier of information;
  • Audio Control: the audio material should not start automatically on the website, or it is possible to disable it.

Level AA:

  • Contrast (Minimum): provide a contrast ratio between text and background of at least 4.5:1;
  • Resize Text: the text should be legible, even when the user zooms in on the screen to 200%;
  • Images of Text: avoid images of text, instead use electronic text. However, if you are using an image of text, enter alt text;
  • Reflow: the content retains the same meaning when scrolling horizontally and vertically;
  • Non-text Contrast: the contrast between non-text content (photos, graphics, and others) is at least 3:1.
  • Text Spacing: the text is not cluttered, and there is "breath" between the parts of the text;
  • Content on Hover or Focus: the website provides hover and focuses status while interacting with the content using the keyboard or mouse.

Level AAA:

  • Contrast (Enhanced): provide a contrast ratio between text and background of at least 7:1.
  • Low or No Background Audio: the site does not contain background audio, or it is used minimally;
  • Visual Presentation: provide users with a variety of ways to present a block of text on a page;

Images of Text (No Exception): categorical not to use a text image.

Interface components must be operable. Users should find and use the page content regardless of how they navigate the page (e.g., using only the keyboard or mouse). There is a reason that UX pays a lot of attention to the website navigation itself. It’s in this part of the WCAG documentation that good practices for simplifying it can be found.

Guidelines:

1.     Keyboard Accessible

Adjusting the functionality of the website to people using only a keyboard or devices imitating a keyboard.

Level A:

  • Keyboard: all page functionalities should be accessible using only the keyboard, and the user should be able to navigate using the arrows and the SPACE or ENTER keys;
  • No Keyboard Trap: Ensuring that items that appear on the page can be closed using the keyboard;
  • Character Key Shortcuts: ensuring that the user can disable or change the one-key shortcuts.

Level AAA:

  • Keyboard (No Exception): the keyboard can be used in any situation.

2.     Enough Time

Give users enough time to read and use your content. It is about providing adequate time to read the content but also about the possibility of stopping the functions, delaying them in time, or completely removing the function that counts the time of the action.

Level A:

  • Timing Adjustable: if timing elements appear on the page, provide control to the user to disable, adjust or extend time limits;
  • Pause, Stop, Hide: giving the user control to pause, pause, and hide moving and automatically updating content.

Level AAA:

  • No Timing: the site has no time limits;
  • Interruptions: users can postpone or pause non-emergency interruptions;
  • Re-authenticating: it is possible to save user data at the next authorization;
  • Timeouts: there are warnings on the page if the user should lose data.

3.     Seizures and Physical Reactions

Avoiding content that causes seizures or physical reactions. Providing a simpler alternative for them and the ability to turn off flashing or pop-up content.

Level A:

  • Three Flashes or Below Threshold: there is no flashing element on the page that flashes more than three times in one second, or the flash is below the general flash and red flash thresholds.

Level AAA:

  • Three Flashes: There are no items on the web page that flash more than three times in one second;
  • Animation from Interactions: the user can switch off an element that is moving at any time.

4.     Navigable

Help users navigate and find content. It is about, for example, providing a hover state, links adapted to the content, appropriate HTML tagging of elements on the page, and appropriate navigation on the page.

Level A:

  • Bypass Blocks: enabling quick and easy skipping of a section on a page. This is related to the semantically correct tagging of groups of elements in HTML;
  • Page Titled: proper titling of pages and subpages and providing them with description;
  • Focus Order: if the user uses the keyboard while navigating on the page, the focus state activates the interface elements in a logical order so that the meaning of the content is preserved;
  • Link Purpose (In Context): if there are links or buttons on the website, they are bound to a specific link and do not confuse. The links inform where the user will go after clicking.

Level AA:

  • Multiple Ways: there are several ways to reach the pages of a website. This could be the main navigation, bottom or side navigation, sitemap, or search engine;
  • Headings and Labels: correct use and description of labels and headings in HTML;
  • Focus Visible: each interface that the user activates has the focus status.

Level AAA:

  • Location: ensuring that the user knows perfectly well where the page is;
  • Link Purpose (Link Only): each link informs the user accurately about its purpose;
  • Section Headings: the page is organized using headings (also in HTML).

5.     Input Modalities

With the introduction of smartphones and touch panels, gestures have become a fairly common type of interaction with applications or pages, so it is important to replace the difficult, for some users, multi-gesture gestures with single-point gestures. One-point gestures, such as taps, are more accessible.

Level A:

  • Pointer Gestures: action on the page can be performed with single-point gestures, e.g., tap, double tap, press, and hold;
  • Pointer Cancellation: you can easily avoid clicking on a button. This could be the case e.g., the drop-down button.
  • Label in Name: next to the button there is the name of the component, i.e., the one that will be heard by the person using the screen reader;
  • Motion Actuation: if there is an activation of a page element or the application itself using movement (e.g., by shaking the device), then there is also another way, e.g., with a button.

Level AAA:

Target Size: clickable element should be at least 44 pixels in the CSS (Cascading Style Sheet) document.

The website content, interfaces, and whole navigation logic are understandable to the user. This principle may sound quite simple, but it's not just about writing in plain language.

Guidelines:

1.     Readable

Make text readable and understandable. Provide a translation of abbreviations (also using HTML), avoid jargon and idioms, and inform (if the context requires it) how to pronounce the word.

Level A:

  • Language of Page: the content of the website should be understandable by both people and technology. However, this is about using the <lang> attribute in the HTML code and setting the page's language accordingly.

Level AA:

  • Language of Parts: if there are elements on the page that are in a foreign language, mark them appropriately in HTML so that the assisting technology reads the text in a specific language.

Level AAA:

  • Unusual Words: on this page, any unusual words or phrases, and jargon are explained;
  • Abbreviations: abbreviations are explained (also in HTML);
  • Reading Level: if the text on the website requires reading skills higher than lower secondary school level, there is also supplementary content or a version that does not require reading skills higher than lower secondary school level;
  • Pronunciation:  words whose meaning is ambiguous without pronunciation should be defined;

2.     Predictable

Make content appear and operate in predictable ways. This assurance that no component changes the meaning of the context (unless the user wants otherwise), provides logical and repetitive navigation, and the occurring elements are similar to those appearing on other web pages (i.e., not meant to be identical).

Level A:

  • On Focus: if the user uses an element, it does not mean that the content has changed. Only clicking or using the keyboard causes the content to change;
  • On Input: while filling in the forms with data, there should be no automatic data transmission or content change.

Level AA:

  • Consistent Navigation: navigation should be created consistently using visual effects and transitional effects;
  • Consistent Identification: there should be consistent identification on the website, i.e., all components that have the same functionality are the same or are similar to each other.

Level AAA:

  • Change on Request: elements on the page change only at the user's request.

3.     Input Assistance

Help users avoid and correct mistakes. Providing messages about errors and hints on how to fix such an error.

Level A:

  • Error Identification: if there is an error in the form, the user is informed of the place where the error occurred;
  • Labels or Instructions: there are instructions on how to complete the form next to the forms. Moreover, the forms are properly tagged and described in HTML.

Level AA:

  • Error Suggestion: if the user makes a mistake, there is also feedback explaining the essence of the error and the method of its correction;
  • Error Prevention (Legal, Financial, Data): pages on which the user performs financial transactions or concludes legal contracts and introduces and modifies data should be provided with mechanisms for checking, confirming, correcting, and withdrawing the data entered by the user.

Level AAA:

  • Help: on the website, you can find detailed help and instructions to help you understand the website;

Error Prevention (All): the website minimizes the risk of making a mistake on the website when filling in forms.

The content should be so solidly designed as to be adapted to modern assistive devices, various web browsers, and operating systems.

This is the principle that binds all the previous ones – without it, we cannot talk about full availability. To implement this principle, which states “maximize compatibility with current and future user tools”, three technical guidelines must be applied. Although there are few of them, it is probably the most technically demanding rule:

Level A:

  • Parsing: content should be well formulated so that it is properly analyzed by browsers and devices assisting the user. At the end of this article, you will find an HTML code validator to help you accomplish this point;
  • Name, Role, Value: correct use of HTML tags with interface elements (using markup of the form input, button, and link type). It’s about the proper semantic use of tags as intended – by implementing correct HTML, assistant programs will interpret the tags appropriately.

Level AA:

  • Status Messages: adding tags that inform about the change of important content on the page. Such a message “provides information to the user on the success or results of an action, the waiting state of an application, the progress of a process, or the existence of errors.” Examples of such messages can be found on w3.org.

All guidelines are linked together. Each rule also requires a good knowledge of HTML, which is extremely important here. However, be careful. HTML may seem like an easy language, but misapplication, such as ARIA (Accessible Rich Internet Applications), which is a set of attributes that make web applications suitable for people with disabilities, can do more harm than good. There is even a saying that “bad ARIA is worse than no ARIA.”

When looking for information on how to adapt the website to the WCAG guidelines, you can see symbols A, AA, and AAA. The easiest way to explain these signs is to give an example from one principle.

Example

Consider the Perceivable principle. One of the guidelines says that we should create a page so that the user can distinguish the background from the content and read the content easily. In the documentation, the first criterion is "Use of Color" - it is about not basing information on the page only on color to mark something, communicate or warn against something. If the user has filled in the form incorrectly, the page should inform about it using text. If we meet this condition, then we have completed one of the many A-level points.

If we want our website or application to be even more adapted to people with disabilities, we have to see what “success criteria” we must meet. So, if we are on the color issue, using the contrast ratio between text and background is at least 4.5: 1. This will cause us to fulfill one of the many AA level conditions.

To enter the last level, i.e., the AAA level, the contrast ratio between text and background is at least 7: 1 should be used.

The example illustrates one case – not basing the information on the website only on the color and choosing such background colors and content that their contrast ratio is in the proper proportions. These guidelines are not very closely related, but they show you how filling in successive guidelines works.

The first level is Level A - the minimum level that a page should have. Level A guidelines relate to barriers that prevent some groups of people with disabilities from having access to digital content. Therefore, it is so important to supplement the content with additional content.

A good example is adding alternative text to an image or map – it allows blind people to hear what is in the photo using a screen reader. If this element was missing, the assistive technology informed users that they had an “img” file in front of them.

The middle level, AA, is acceptable, meaning it is reasonably available to most users. The guidelines at this level address barriers that may be a problem and should be implemented so that access is not more difficult than it should be. This sometimes applies to small decks of work, and it is possible to expand the group of users by a larger number.

It is worth mentioning, for example, a guideline that suggests that it is a good idea to include information about errors when completing the form. This may seem like a small step, but it makes the site more accessible.

The guidelines at this level concern only usability that can be implemented to improve and further enhance the website or application with the issue of accessibility. You can think of them as crème de la crème – the icing on the cake.

A good example is the use of jargon or difficult phrases and words. Not everyone knows what the phrase "crème de la crème" means – for the website to be adapted to the majority of users, the WCAG documentation proposes that the content on the website should be at the level of a junior high school.

The hardest thing to get to the AAA level. You must meet all the guidelines (including Level AA and Level A success criteria). Moreover, some guidelines are extremely strict, and some types of content cannot follow every guideline at this level.

It’s difficult to achieve the AAA level – few companies manage to do so. This is due to several factors: the huge amount of guidelines, the rapid development of technology, and the huge cost of user testing with people with disabilities.

Level A is the minimum that must be met when adapting the website and its content. Instead, this level should be seen as a transitional and temporary level. It has been established that the AA level is the optimal level.

Very few web pages achieve AAA level - sometimes, this goes against the very purpose of the page. You can think of all expert websites that use jargon and complex words. However, it is worth adding that the highest level should be implemented on the websites of state institutions and websites dedicated to a broader audience. There should be no problematic words on such pages, for example, those related to taxes or official matters.

Countries have different directives and laws requiring public institutions and state-funded institutions to implement WCAG guidelines. It all depends on which country the company operates in.

Even if the WCAG documentation guidelines do not have to be implemented in the project we are working on, it is worth considering them. However, it is worth bearing in mind that the project may eventually become an international project. What's more, as it has already been written - if the website is available to a few, it gains more people than assumed.

Implementing the WCAG guidelines is challenging and testing the website’s functionality is very expensive. Not everyone can afford such costs. Fortunately, there are many good tools on the web (most of them even for free) that allow you to check a website for accessibility and improve existing components.

  • Contrast Checker is a handy tool that allows you to save time when choosing the right colors for your components while working on prototype programs. This tool will enable you to check whether the selected colors have a good contrast ratio.
  • Coblis (Color-Blind Simulator) is a website that allows you to check photos or pictures for color blindness. You can also use this tool to fit the entire website for this aspect.
  • One of the best sites on the web, i.e., the Inclusive Components blog. This is a good practice guide for writing functional components with HTML. There is a hefty dose of technical knowledge of HTML and good practices related to this language.
  • Grammarly is an application that shows what tone we use and checks if our content is straightforwardly written. Corrects linguistic mistakes. It improves SEO by checking readability and correcting errors.
  • Using the WebAIM checklist, you can check whether the website is designed for accessibility. Interesting and helpful thing, but completing it requires knowledge of WCAG documentation.
  • Validator od W3C is a very simple tool that checks the website for the correct use of HTML markup - checks the code in any form, which is very useful when writing a new project.

In 2022, the W3C organization began to work on the W3C Accessibility Maturity Model, a guide for organizations to improve the business processes regarding people with disabilities. The document presents a set of guidelines for improving the company's policy and business performance in terms of accessibility.

Importantly, this document aims to be independent of the WCAG documentation - however, it can be seen as a supplement to the WCAG technical guidelines.

This guide informs that the whole production process should be designed regarding accessibility and ICT (Information and Communications) communication.

The Accessibility Maturity Model proposed by the W3C is a tool that:

  • helps to determine how the company or organization complies with the rules of accessibility;
  • lists gaps and points to be improved to obtain a higher degree of accessibility development;
  • encourages the improvement of maturity degree, which is determined by guidelines in the documentation.

Documentation work has only just begun, but it is worth noticing that this will be the next step in improving digital accessibility and better organization of the accessibility policy at the company.

Nowadays, fortunately, it isn't easy to implement selective and discriminated solutions. We think more and more about being linguistically correct - we use appropriate pronouns and pay attention not to hurt anyone.

In a similar, insightful way, one should think about people with disabilities and time limits and their equal access to websites and mobile applications. Accessibility for minorities is accessibility for everyone.

Was it helpful?

What's next?

We work on those topics:

  • Bounce rate
  • Design sprint
  • Competitors analysis
  • Customer experience
  • ...and more!

Stay in the loop.

I'm interested the most in: