Read time: 12 minutes
When it comes to web accessibility, following the Web Content Accessibility Guidelines (WCAG) is huge.
It is the most trusted accessibility guideline on the internet, and thousands of web developers reference the WCAG when creating web-accessible sites for their companies or clients.
The guidelines are made up of four principles, with 13 guidelines and 78 pieces of success criteria tied to each guideline and principle to ensure developers understand what it means to produce a successfully accessible website.
Frankly, it can be a lot to navigate when you first look at the guidelines. It’s a dense piece of material, and it can be hard to understand, especially if you’re just getting into web accessibility.
At Unity Web Agency, we like to take a top-down approach when understanding the WCAG and all its nuances.
What are the overarching principles?
From those principles, what are the smaller concepts that make it up?
Through this approach, we’re better able to understand the WCAG, its preferences, and it's recommendations. Plus, it saves us time whenever we are referencing it.
So, are you ready?
Perceivable
The first principle listed within the WCAG is “Perceivable.”
Simply put, “Perceivable” is when information and user interface components are presentable to users in a way they can perceive (seen, heard, and felt).
Not all forms of information, content, and user-facing components are perceivable to all people, so it’s important that all the senses (outside of smell) are accommodated when it comes to your website.
(And if you somehow get to accommodate for smell, you’re really on to something big.)
Now, within the “Perceivable” principle is four concepts you need to think about. When all applied properly, these four concepts work together to create the perceivable principle, and you’ll have completed your first step to creating an accessible website.
Text alternatives
When creating text alternatives, your goal is to change the text into other forms that accommodate sight, hearing, and feeling.
These alternatives can come in various forms and are all based on the three core senses within the “Perceivable” principle.
They can come in the form of braille, large print, symbols, and more. Oftentimes, these methods may be blended together to accommodate multiple senses at once.
But what’s important is that your website has multiple text alternatives available.
The more you have, the more accessible your site is.
The more accessible your site is, the more people will use it.
And isn’t that the overall goal?
Time-based media
Do you have alternatives for your audience to enjoy any video, music, or podcasts that you may have available on your site?
Having alternatives for your time-based media is a key to creating a “Perceivable” website, and the WCAG has multiple things mapped out for you to be successful.
Here are a few of the typical solutions web developers have provided:
- Accurate and live captions being displayed while the video plays
- An audio description of the video
- Information of an entire video — and its content — is available audio-only.
It’s important to note that there are a lot of other methods for incorporating time-based media alternatives into your website, and the options listed are just a handful of the various ways you can make your time-based media more accessible.
Adaptable
When it comes to creating “Adaptable” content, it’s important to ensure that all of the content on your site has different distribution methods without losing its meaning, information, and structure.
Can your blog post be formatted in a simpler layout without it losing its key points?
If you zoom out, will the text of the content adjust? Or will it still stay the same?
When presenting your content, it’s important that the content can be altered to fit the person that’s consuming it. Everyone consumes content a little differently, and having these options readily available will help more people enjoy the content you produce.
Distinguishable
The final component when it comes to the “Perceivable” principle, creating “Distinguishable” content means how you create content and options that make it easier for consumers to see and hear it.
Can you resize the text?
Do your images have short but descriptive alt-text available?
The content you have available should be able to easily stand out and hide away when needed by your website visitors. This allows them to properly prioritize the content that’s applicable for them in that situation, instead of various pieces of content standing out.
The last thing you want your visitor to be is confused, especially if the reason why is because you have great pieces of content that cannot be optimized to their needs.
Operable
“Operable,” which is the next principle when following the WCAG, is the ability for websites to allow users to navigate and interact with their websites in various methods.
Not everyone uses a website the same way. Some people might rely solely on a keyboard. Others might use voice commands. To ensure proper accessibility, it’s on web developers to ensure that their websites are able to properly interact with the various tools people utilize to use a website.
Within this next principle are five concepts — the most of any principle listed — that you need to become comfortable with. Not only will adhering to these concepts make your website accessible, but it can also prevent triggering certain conditions people may experience.
The last thing you want is someone to experience a medical condition because of your website, and it’s critical you know and stay aware of these concepts throughout your development stage.
Keyboard Accessible
The first concept within “Operable” is pretty self-explanatory:
Can website visitors navigate through the entire site just by using their keyboard?
A lot of times, users are able to do so by simply using the tab button and waiting till their selection is highlighted. But for web developers that are looking to go above and beyond, they may try and offer additional options including:
- Remapping shortcut keys to trigger a certain action
- Turning off certain shortcut keys that might disrupt their individual experience
Proper site navigation via keyboard shortcuts has become increasingly important over the years, and a few alterations could make your site experience significantly easier for people who utilize keyboard-only navigation.
Enough Time
This next concept is also pretty easy to understand:
Does your website provide visitors enough time to actually read and use the content?
A lot of sites have certain webpages with a timer attached to it. That means if a certain action isn’t done within a specific amount of time, the webpage will close down and you’ll have to refresh the page or sign back in.
This is pretty common when it comes to banking sites, as staying signed in for too long can be a security risk. It also applies to e-commerce sites, as a certain product or service might be so in-demand that users have to act quickly before their order is released back into “the wild.”
Another great example is if a user is simply inactive for a certain period of time. When this happens, the site might ask if you’re still online or may sign you out completely, forcing you to re-sign in.
An accessible website allows users to toggle this feature on and off or completely remove it altogether. As for sites that perform this feature for security reasons, accessible sites will be able to save any information inputted by the user.
Seizures and Physical Reactions
This next concept is arguably the most important one within the “Operable” principle:
You must make sure that your content is not designed in a way that can trigger seizures or physical reactions.
Not only do you want to avoid this because of the potential harm you can do to someone’s well-being, but failure to adhere to this concept could subject you to legal trouble.
Make sure your content doesn’t have three flashes within a one-second period. If you have motion animation enabled through the website, give users an opportunity to disable it (unless it’s crucial to the site’s performance).
When it comes to this concept, it’s always better to play it safe.
Navigable
One of the things you want to avoid when creating a website is making sure your visitors are not lost.
The “Navigable” concept within the “Operable” principle helps to avoid that exact result, as it has a variety of guidelines that let visitors know where they are, where they’re going, and how to get back.
Some ways to make your site more navigable is by making sure each link provided informs users of where they could go, section headings are properly used, and if the site can be navigated through other forms (like a keyboard).
Although modern website design has, more or less, helped people avoid getting lost within a site, it’s still an important concept to think about. You could potentially turn off customers and guests if your site doesn’t paint a clear picture for the user regarding where they’re at or how to get back.
Input Modalities
Although we’ve made a big deal about proper keyboard navigation throughout this principle, it’s not the only form of navigation when it comes to a website, and that’s what this next concept is all about.
Proper input modalities make site navigation a lot easier through a variety of inputs beyond just a keyboard.
Can a user go through your entire site by simply using a mouse?
Are your users able to utilize voice inputs to trigger certain or any action within your site?
Although keyboard navigation is often looked at as the “go-to” way for alternative site navigation, it isn’t the only way, and thousands of internet users utilize various forms to enjoy a website and consume its content. By offering alternative methods, it’ll go a long way to ensuring your website is fully accessible for anyone that wants to enjoy it.
Understandable
The next principle when discussing web accessibility, “Understandable” is when the information and the operation of a website’s user interface is easy to understand.
People are using various tools and softwares to make the internet easier to use for their situations. When adhering to this principle, it’s on web developers to ensure that their websites are offering options that are easy to learn and adapt to.
If your site makes it clear to users in regards to how to navigate it, you’re in a great place to follow the “Understandable” principle and creating an accessible website.
Readable
This first concept is pretty understandable — is your website and its content easily readable?
When writing and creating content for your website, you want to make sure that the site is filled with sentences free of any grammatical errors or jargon. Although having a clever line or two might bring satisfaction to you, it may hinder a person’s ability to fully comprehend your content, and that’s what you want to avoid.
Make sure your readers are greeted with short paragraphs that get to the point, instead of blocks of text that are too dense.
Avoid jargon whenever possible. And if you have to use it, make sure there’s a definition next to the jargon that you’re using.
Keep in mind the reading level of your content as well. Is your content written at a 7th grade reading level? Or is it only readable for college students? You always want to go for the former.
Predictable
When you use a webpage, you have an expectation for how that page should work. When it comes to the “Predictable” concept, that’s exactly how web developers should operate when working within it:
Make your web pages appear and operate in a manner that most people can predict.
Do your web pages have a consistent mode of navigation? Or are you asking users to switch it up with each web page?
Are users able to maintain proper identification (i.e. are you logged in to a membership site) to access exclusive content? Or are they having to sign-in every time a new webpage loads?
As users go through your site, they should be able to figure out what the consistent pieces are. If your website has people guessing from webpage to webpage, that’s the mark of an inaccessible website.
Input Assistance
The last concept within the “Understandable” principle, “Input Assistance” is when your website provides users with an ability to avoid or correct a mistake they may have made.
Anyone and everyone has made an input on a website that they didn’t mean to make.
Perhaps they typed out the word “moist” instead of “most.’
Or maybe they accidentally put an item in their cart.
A good, accessible website will allow users to quickly amend that error and move forward with little or no delay. A great accessible website will even prevent users from making mistakes in the first place, but that also depends on the site you have, as that option isn’t feasible for certain websites.
Giving people various methods to correct their mistakes is one of the finest ways to create an accessible site, and it’s something that anyone — disabled or not — will greatly use and appreciate.
Robust
Ah, the final principle within web accessibility.
When it comes to “Robust,” what you need to ensure is that your content can be interpreted in a variety of ways. Regardless of what assistive technologies your users are using — screen readers, speech input softwares, text readers, and more — they should be able to consume your content.
And when thinking about the “Robust” principle, there’s only one concept you need to keep in mind:
Compatible
Content that is “Compatible” is able to adapt to current and future assistive technologies.
One of the common ways that web developers and content writers achieve this is by structuring their content through HTML.
Are you using proper H and P tags? Have you ensured that every tag used has a proper opening and closing bracket?
Using HTML tags makes it easier for places like WordPress to easily understand the content you’re writing and its hierarchy. As a result, this helps format the content so that your readers understand your point and where you’re going with it.
Although a lot of places, including WordPress, offer options to avoid HTML tags, your best bet to creating well structured content is to learn and implement these tags properly.
Although we’ve done our best to break down each principle and their subsequent concepts, there’s still a lot we haven’t covered. For a comprehensive look into what it takes to create a truly accessible website, make sure you review the full WCAG 2.1 guide.
And if you have any questions about accessibility, know that you’re always free to reach out to us at [email protected]. We’ve made web accessibility our mission, and we always love to chat with peers, clients, and fans on how we can continue to make the internet a more accessible and inclusive space.