WCAG Recommendations For Web Accessibility

In a world where most businesses and information is online, users with impaired accessibility are missing out when web accessibility isn’t considered.

Making your website accessible might be overwhelming; however, the WCAG (Web Content Accessibility Guidelines) is available to help. The WCAG are updated frequently, with the most recent update known as WCAG 2.1. 

What Makes An Accessible Website?

An accessible website is any site that allows all user types to have equal access to the website’s content.

One of the simplest ways to make your website accessible is through design choices. For example, by choosing accessible fonts and colours. Font choice is important, especially when content is read on different devices.

Another way to improve accessibility is through plug-ins. Plug-ins are useful as they don’t require an entire website revamp, but rather, they add features to the site to help users with their needs.

Accessibility & Usability

Two terms used to describe website functionality are accessibility and usability, however, it’s important to note they don’t mean the same thing.

Accessibility refers to all users having equal access to the same information. This also considers users with impairments and making changes to accommodate their needs. Whereas, usability refers to the website design and its ease of use. 

Both the accessibility and usability of a website are important considerations. Users with a positive user experience on websites are more likely to continue using the site, and recommend it to others.

Web Content Accessibility Guidelines (WCAG)

The WCAG began in 1999 and consists of global standards surrounding the web, and specifically how to make it more accessible.

WCAG Principles 

The WCAG are broken into four principles. These are:

1. Perceivable:

This is the way information is presented to users; including the user interface (UI) and optimising the website so it’s easy to use. Important aspects of this principle are: 

• All non-text content (photos, videos, etc) have alternative text (alt-text).
• Any videos have the option of closed captions (subtitles). The best way to ensure the subtitles are correct is to manually add them as you edit the video. Programs such as Adobe Premiere Pro can help with this. 
• Sign language options. This is more important when it comes to live content, and having someone live translate into sign language. Plug-ins for sign language do exist, however, due to there being over 300 dialects, it’s harder to implement on embedded videos. 
• Using different colours/signifiers to help users distinguish between the foreground and background of content, and to highlight anything of high importance.

2. Operable:

This is how the user interface of your website has been designed, and how users can navigate on your website. Important aspects here include:

• The ability for users to navigate your website using a keyboard, rather than a mouse. 

3. Understandable:

This relates to all users understanding the website content. Elements to consider here include:

• Functionality to change the website’s language. The plugin “Weglot,” has integration functionality with many website builders including WordPress, Wix and Shopify. 
• Avoid abbreviations or acronyms without explaining their full meaning.
• Limiting technical language, or “jargon”.
• Options for users to learn the pronunciation of words. 

4. Robust:

When accessibility tools (such as text-to-speech software) read the website copy, it needs to be clear and succinct so it makes sense to the user. Consider: 

• Ensuring content is clean, as well as paying attention to any text not visible to the eye, such as image file names, code, or alt-text descriptions.

The full breakdown of each of these WCAG principles can be viewed on their website.  

Web Accessibility Checklist

There are several ways to improve your web accessibility. Elements to consider are: 

Web Accessible Colours

When choosing colours for a webpage, it’s important that text is completely legible on all device types, not just on desktops. Avoid coloured text on contrasting colour backgrounds. 

Contrasting colours are opposite one another on the colour wheel; for example: green and red, yellow and purple, blue and orange. For users who are colour blind, a combination that causes issues is pairing red and green together.

If you’re unsure about your colour choices, website colour accessibility checkers are available. For example, check out the Colour Contrast Checker.

When designing the overall layout and branding on websites, contrasting colours are complementary to one another, and often work well. When using complementary colours, it’s important they balance and don’t overpower the page. 

Web Accessible Fonts & Font Size

There are two types of fonts: san serif and serif fonts.

Fonts used for bodies of text should be serif fonts. These are more readable as they don’t have “feet” or “tails” on them like serif fonts. San serif fonts are cleaner, particularly when there’s a large amount of text.

Examples of san serif fonts are Helvetica, Arial, Proxima Nova, and Calibri.

Serif fonts, such as Times New Roman, are more traditional and should only appear in headings. 

Another text option is for the user to be able to resize the website font. For people with visual impairments, using the page zoom function impacts their navigation. Therefore, a text resizer plug-in can enlarge text without distorting the webpage layout. 

Alternative Text

Alternative text, or “alt text” is a hidden description on images. This allows visually impaired users to understand the context of the image, as text-to-speech tools read them the alt-text description.

Accessibility improvements aren’t the only benefits of alt-text. Alt-text additionally helps with your website’s SEO strategy. Ways alt-text benefits SEO include: 

• It’s a ranking factor for on-page SEO. Google rewards websites that optimise more on-page SEO ranking factors.
• It helps your images rank when people are searching for images on Google.
• It assists image results appearing on organic search results. In 2021, Google’s algorithm update included adding images where relevant to organic search results on Google, instead of images only appearing in the image results pack at the top of the Search Engine Results Page (SERP).
• Google generally rewards sites offering a valuable, useful site to users. Ensuring this encompasses users with different accessibility needs will see your site be more highly ranked.

When Google is analysing, or “crawling” your website, the Google bots can’t understand the image context without the text description. Using alt-text as a part of your overall SEO strategy can then improve your website’s ranking on SERP.

Closed Captioning 

Closed captioning, or “subtitles,” allows hearing impaired users to read what’s being spoken in videos.

While subtitles are an accessibility function, there’s research to suggest it’s not just the hearing impaired who want the option of using them. According to research, 85% of videos on social media are watched with the sound off. 

Keyboard Functioning & Navigation 

For some users, using a mouse, or the repetitive clicking of a mouse, can impact their ability to use websites. For instance, implement navigation control options for your website, where users can use a keyboard. 

Web Accessibility Plug-ins 

A plug-in is an extension on your website integrating new features or functions. Plug-ins are a great way to make changes to your website that give users more flexibility, without you having to change everything about your website which is a potentially lengthy and costly process. 

An all-in-one plug-in compliant with the WCAG is AccessiBe. This plug-in integrates with many popular website builders and is a global tool.

Error Messaging & Prevention 

Errors on websites are a pain point for users, particularly when they don’t understand what they’ve done wrong.

For example, a pain point might be when the user can’t progress to the next page on a form.

A way to minimise pain points is through having clear error messages for users. Error messaging can include incorrect or missing information highlighted with text, to tell the user how they can fix it.

Error prevention, on the other hand, includes having clear guides for the user on what they need to do before an error message pops up. 

Flashing Content

Flashing content is anything with a quick, repetitive flash of light. This content is dangerous to some users, especially if they have medical conditions such as Epilepsy. 

A way of minimising the impact on users is by ensuring flash or strobe content doesn’t have more than three strobes per second. If your content requires this, you can add a warning before the content plays and have auto play disabled.

Do You Need Help Meeting The Web Content Accessibility Guidelines? 

There are many ways to make improvements to your website’s accessibility. Using the checklist above, go through your own website and see if you can make any improvements to assist users on your site.

If you think your website could be improved to meet the standards outlined in the Web Content Accessibility Guidelines, or you need help with web accessibility, contact us to see how we can help you to make those changes to your website.

See why we’re listed as one of the Top WordPress Web Design Companies on DesignRush!