Understanding the Web Content Accessibility Guidelines (WCAG) 2.0: a simple guide

It is very important to ensure web accessibility for people with disabilities, and this is why the World Wide Web Consortium (W3C) developed a comprehensive set of standards for businesses to follow, known as the Web Content Accessibility Guidelines (WCAG) 2.0. They provide a framework to make online content accessible to a broader range of people by ensuring that people with disabilities, including blindness, low vision, deafness, hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity, as well as combinations of these, are not restricted from accessing web content.

What are the basics of the Web Content Accessibility Guidelines (WCAG) 2.0?

Principles & Guidelines:

The Web Content Accessibility Guidelines (WCAG) 2.0 are based on four key principles, which can be abbreviated as POUR. Under each of the principles are guidelines that can be viewed as the basic goals that must be achieved by authors in order to make content accessible to users with different disabilities. Here are the guidelines, organised by which principle they belong to:

Perceivable – users must be able to use at least one of their senses to access the content

• Provide text alternatives for non-text content so it can be converted to other forms, such as large print, braille, speech, symbols or simpler language
• Provide alternatives for time-based media
• Create content that can be presented in different ways without losing information or structure
• Make it easier for users to see and hear content

Operable – users must be able to use interface components and navigate the content

• Make all functionality available from a keyboard
• Provide users enough time to read and use content
• Do not design content in a way that is known to cause seizures
• Provide ways to help users navigate, find content, and determine where they are

Understandable – users must be able to comprehend the content or operation

• Make text content readable and understandable
• Make Web pages appear and operate in predictable ways
• Help users avoid and correct mistakes

Robust – content must be able to be interpreted by a variety of user agents, including assistive technologies

• Maximise compatibility with current and future user agents

Success Criteria:

Each of the guidelines has success criteria that it is testable against, at three levels of conformance. These levels are A, AA and AAA.

Level A satisfies the most basic level of web accessibility. It is accessible to some users but does not address the needs of everyone. It is the easiest to meet and has little impact on the website design and structure. Level AA requires a higher level of commitment. The majority of websites do not meet this standard. It ensures accessibility for more groups of users than level A and deals with the biggest and most common barriers for disabled users. Level AAA ensures that content is accessible to the highest number of users and is used almost exclusively for specialist sites.

What are some common failures stopping sites from meeting the POUR principles?

Listed below are some of the most common reasons that sites fail to meet the principles of being perceivable, operable, understandable and robust. These failures mean that users with disabilities face barriers to access content, be that information, products, services, or anything else they might want to access on the internet.

Perceivable
One thing that would reduce the perceivability of a site would be images or other non-text content not having alternative text, or the alt text not being sufficient. Additionally, PDFs of other non-HTML content being inaccessible and multi-media content lacking captions or transcripts would contribute to this issue. Colour contrast not being sufficient, so text is difficult to read, or content that conveys information solely through sensory characteristics, such as colour or shape, would be difficult to perceive as well.

Operable
Keyboard traps, where the keyboard focus is stuck and cannot be moved, are an example of an operability failure. Another couple are inaccessible forms, such as those that have missing labels or improper grouping, and content that redirects or refreshes automatically, without user control. A fourth factor impacting a site operability would be interfaces that are inaccessible via keyboard navigation alone.

Understandable
Some examples of things that would make a website difficult to understand are instructions or error messages that are unclear or ambiguous, as well as the overuse of jargon or complex language. Changes in context without explanation that can confuse users, and so can a lack of consistency in layout or navigation.

Robust
The robustness of a website would be negatively impacted by the use of non-standard HTML or CSS that may not be universally supported. Dependence on inaccessible plugins or technologies, and content that is not supported in all browsers or devices would also make the website less robust. Both a lack of testing and validation of code against W3C standards, and a lack of support for assistive technologies would reduce a website’s robustness.

What is the best way to ensure WCAG 2.0 compliance?

The failures listed above may appear to be small issues on the website as a whole but can cause a massive disruption to users with disabilities who then cannot access the content on the site. By completing the following steps, you will be allowing your website to be accessible to all users, increasing the number of users able to visit your site, and ensuring that you are not putting up a barrier for those with disabilities.

Performing an accessibility audit:

When auditing accessibility, you can use a range of methods, including automated, manual, assistive technology and user testing.

Automated and manual testing
Some examples of automated testing tools are WAVE, Axe and Lighthouse. These tools scan your web pages and flag potential issues to be sorted out, from missing alt text to colour contrast problems. When manually testing, it can be useful to utilise a checklist approach as this allows you to methodically review all of the WCAG 2.0 guidelines. Some users rely on keyboard navigation due to motor disabilities, so it is key that all interactive elements are fully operable via keyboard commands alone, and this can be checked manually.

Assistive technology testing
Assistive technology testing is the utilisation of screen readers and other tools used by users with disabilities, in order to ensure that they operate effectively on your website. Testing with screen readers like NVDA (NonVisual Desktop Access), JAWS (Job Access With Speech), and VoiceOver (macOS) allows you to better understand how visually impaired users perceive and navigate web content. The same is true for the benefits of checking your website’s capability to handle other assistive technologies such as magnifiers or voice recognition software.

User testing
Testing completed automatically, or by people who do not have disabilities, is important and helpful, but it is also of great importance to complete user testing. By involving users with disabilities, you get a more realistic insight into how those users would navigate your website, and the challenges that they could face, which is key because user experience is incredibly important in website design. It is necessary to consider testing with users who have a range of disabilities, in order to ensure functionality across all aspects of your website for all people. For more information on the benefits of user testing over using an automated process, feel free to explore our article on why humans are better than robots when it comes to web accessibility testing.

Implementing best practices:

In order to avoid the common mistakes outlined earlier in the article, it is important not only to audit your website, but to act upon the information that you find out. Once you have completed an accessibility audit, you can begin to implement changes to improve the accessibility of your site.

These changes could be ensuring that all non-text content has text alternatives that are appropriate to the content type (e.g. alt text for images or captions for videos). Another change could be adapting the colour contrast to make sure that it is great enough to have all text readable for users with visual impairments. It would also be a good idea to make sure that forms and input fields are easy to understand, providing clear instructions and error messages that incorporate suggestions for corrections.

Monitoring and updating continuously:

As great as performing an audit and implementing changes is, it doesn’t ensure that your website will stay accessible. You need to schedule regular accessibility audits to make sure that you stay compliant with WCAG 2.0, especially after the addition of new features or content.

The guidelines for accessibility are updated periodically, so it important to keep checking against them when you audit. It is also a good idea to keep your team updated on the latest best practices, as well as updates to the WCAG. Regular training of your design, development, and content teams on how to stay up to date with accessibility are essential for remaining compliant.

How can I make WordPress compliant with the Web Content Accessibility Guidelines (WCAG) 2.0?

By properly configuring your site, selecting an appropriate theme and choosing the right plugins, you can make WordPress compliant with the WCAG 2.0. The key points to consider are as follows:

• Accessible Theme & Plugins – It is recommended that you begin with a WordPress theme that is designed with accessibility in mind. It is preferable to select a theme that follows best practices in HTML structure, as well as providing sufficient colour contrast and keyboard navigation compatibility. Any plugins used should also be accessible or provide accessibility options.
• Proper Heading Structure – Make sure to use heading tags (H1, H2, etc.) in order to structure content in a logical order. Screen readers and other assistive technologies can then be better informed of the hierarchy of information on the page.
• Alt Text, Captions & Transcripts – As mentioned in the advice for implementing best practices, ensuring that any non-text content is supported by a relevant description is very important. Images should have suitable alt text, and multimedia content such as audio and video must be accompanied by captions and/or transcripts.
• Colour Contrast & Keyboard Navigation – Another point mentioned earlier, but worth revisiting in the context of WordPress, is that ensuring sufficient colour contrast and keyboard navigation are key. There must be a suitable contrast between the text and background to make sure that the content is readable for users with low vision or colour blindness, and all content must be accessible using only a keyboard, including links, forms, buttons and other interactive elements.
• Avoid Flashing Content – It is critical that content does not flash more than three times per second, if it is to flash, in order to ensure that it does not trigger a seizure in susceptible users.
• Alternative Access Methods – Make sure that you offer alternative formats or versions of content wherever it is possible to do so. These include downloadable PDFs with accessible structures or plain text versions.

How can This is Fever help?

Fever can conduct thorough evaluations to identify accessibility issues on your website and implement best practices in design and development to ensure that your content is perceivable, operable, understandable, and robust. We can also provide ongoing monitoring and support, regularly testing the site to maintain compliance. In fact, our Stagetext case study outlines how the Fever team implemented their knowledge of accessibility on Stagetext’s new website.

For information on other relevant accessibility rules, check out our article on the European Accessibility Act. If you have further questions, or any of This is Fever’s website design or development services, then feel free to contact us.

By Stanley, Marketing Assistant