Have you ever wondered if the designs we create are accessible to everyone? Often, we focus on making our products creative and visually appealing but overlook accessibility considerations.
For example, we might choose vibrant, eye-catching colors for a product’s UI, but what about users with color blindness or vision impairments? This is where the W3C platform steps in with its web accessibility guidelines, ensuring that content is inclusive and usable for all. Today, let’s explore the key accessibility guidelines and online tools that can help us create more inclusive designs for web applications, mobile apps, and websites.
One way to evaluate a website’s accessibility is by comparing it to a set of standards, like the Web Content Accessibility Guidelines (WCAG). The latest version is WCAG 2.2, and while it contains a wealth of helpful information, it can be a bit overwhelming to understand. In this article, we’ll break down each guideline with clear examples, making them easier to understand and apply in your work.
To understand WCAG, we first need to know its four basic principles. Think of these as the key ideas your website needs to follow to be accessible. These principles are further broken down into 13 guidelines, which we’ll explore next.
1. Perceivable
2. Operable
3. Understandable
4. Robust
Perceivable means designing content in a way that users can experience it through their senses, like text, images, videos, or media players. The goal is to ensure people can easily access and understand your content.
Perceivable means providing text alternatives for all non-text content. For example, if there's a funny photo of a cat with its face in a slice of pizza, the alternative text should describe exactly that so everyone knows what’s happening in the image.
Another example is CAPTCHA images. Adding alt-text to CAPTCHA defeats its purpose since robots could read it. Instead, we need to provide an alternative for people using assistive technologies like screen readers. For instance, reCAPTCHA includes an audio option that reads the words aloud, allowing users to input them.
The next guideline of perceivable requires that there are alternative options for time based media.
For example, closed captions on videos are great for people who are hearing impaired. Imagine a video of a dad and his 2-year-old daughter searching for cookies in the kitchen. The captions wouldn’t just cover their dialogue. It will also include important sounds like music playing in the background, a door slamming, or cabinets being opened. These details help people with hearing impairments fully understand what’s happening in the scene.
Add audio descriptions to videos to help visually impaired people. They can hear the audio, but it may not explain everything on the screen. Try closing your eyes while watching a video. Can you understand what’s happening just by listening?
Imagine a snowman with a carrot nose sneezing while smelling a rose. His nose falls onto a frozen pool, and a reindeer tries to eat it. Without seeing, you would only hear sounds—grunts, noises, or a dog panting. But if the video includes audio descriptions explaining the visuals, it becomes much easier to understand. Try watching the same video again with audio descriptions and see the difference!
You can add an extra layer of storytelling through audio descriptions, which helps people who can’t see the screen understand what's happening. Another helpful option for time-based media, like podcasts or videos, is providing a transcript. For example, many podcast websites, such as 'This American Life' offer a transcript. When you click the button, it takes you to a page where the entire podcast is written out, like a script. This makes it easier for everyone to follow along.
Transcript Resources:
It means that content should be displayed in different ways without losing its meaning. For example, it should be easy to view on all screen sizes, like laptops, desktops, tablets, and mobile devices.
Just like the example above, we collapse the navigation on mobile into a mobile-friendly menu that can be accessed through a button. This allows users to rotate their devices freely without being locked into a certain screen orientation. It also ensures the website works well with tools like Safari Reader Mode. Using a proper heading structure helps display the right content, removing unnecessary clutter from the page.
The last guideline under perceivable ensures that content is distinguishable from its background. A simple way to achieve this is by having enough contrast between text and its background color. For example, black text on a white background offers high contrast and is easy to read, while light grey text on a white background has low contrast and is harder to see. The minimum contrast ratio should be 4.5, but for larger text, a ratio of 3 is acceptable.
This guideline isn’t just about visuals—it also applies to audio. Background music or audio should be at least 20 decibels quieter than speaking voices to ensure clarity.
Background Color Checker Resources
Audio Checker Resources
Operable means that a digital user interface should be easy to use for everyone, including people with disabilities. It should work with assistive technologies like keyboard navigation and allow users to interact with all content using different input methods, such as a mouse or keyboard.
The first rule for making a website "operable" is that all parts of it should work with just a keyboard. In this example, there is an accordion where some content is hidden, and we click a button to show it. This button must also work with a keyboard. Users should be able to select it using the Tab key and press Enter, Return, or Spacebar to open it. Making sure the button works this way ensures the accordion is keyboard-friendly.
While talking about buttons, we should also talk about links. Buttons and links may seem similar because we can click on them and use the 'tab key' to navigate to them. However, they are different and have different purposes. A link is used to take users to a webpage or content on the internet, while a button is used to perform an action, like submitting a form or opening a menu.
This rule means people should have enough time to use your website’s content. For example, if there is a video, users must be able to pause and play it themselves. This rule applies not just to videos but also to any animation or video that lasts more than five seconds. There should always be a way to start and stop it.
When filling out a form, users should have enough time to enter their information without feeling rushed. Everyone types at a different speed, and some people may have mobility disabilities. If there is a time limit, it should allow enough time for everyone to complete the form comfortably.
Some information, like on banking websites, is time-sensitive. For instance, if a user is inactive, the website may log them out. In this case, the website should show a warning and give the user an option to stay logged in before logging out.
This guideline requires that content should not be designed in a way that can cause seizures. Animations and videos should not flash more than three times per second. For instance, in a Pokemon episode that aired in Japan in 1997, a scene had intense flashing lights, which caused seizures in nearly 700 children, so we definitely want to avoid that.
Users should be able to navigate a website easily and always know where they are. Clear indicators help them stay oriented.
For example, breadcrumbs show the path users took to reach a page, making it easy to backtrack. Buttons, links, and menu items should look different when selected or hovered over, so users can see their current section. These features improve usability and prevent confusion.
This rule says that all parts of a website should be accessible using different input devices, not just a keyboard. It should cater to a mouse, touch screens, and speech-to-text tools.
Some people might use a touch screen because they have limited mobility. Others might use speech-to-text if they have trouble seeing. A website should work with all these tools so everyone can use it easily.
This guideline means that website content should be easy to use and understand for everyone, including people with disabilities, such as those related to learning or vision.
This guideline says that content should be easy to read and understand. One way to do this is by using simple language and avoiding difficult terms. If we need to use technical or industry-specific words, we should explain them clearly in the text.
For example, in case we are making use of an abbreviation like "NASA," we can include its full form, i.e., "National Aeronautics and Space Administration," with a "title" tag. The users will be in a position to understand the terms with ease as, on moving a mouse over the term "NASA," a pop-up will be shown with its meaning.
Another is that each web page is supposed to have a lang attribute on its HTML element. The lang attribute is utilized by assistive technologies in order to determine which language a page is. Sometimes a page is in English with some words or phrases in another language. To facilitate accessibility, we can surround those words or phrases with a span tag that also has the lang attribute in that tag. That makes assistive technologies realize that those words are in another language and can be read correctly.
This rule makes web pages both look and behave in a similar way, making it easy to navigate. For example, on the website article page at Smashing Magazine, varied contents are in each article, though the overall design is similar.
The menu is in a similar position at all times, as is also the order in which links are presented. The author info as well as the search button on subjects is also in a similar position at all times. The article information, i.e., its title as well as date of publication, also is in a similar position. All these work towards users finding what they are seeking with ease.
This ensures that people can easily correct and avoid mistakes. For example, when entering an expiration date, the input field is clearly labeled, so the user knows what to enter. There is also helper text below the input that explains the correct format, making it easier to avoid errors.
If a mistake is made, the user still has the option to correct it. To make errors easy to spot, you can use red color to highlight where the mistake occurred. For example, if the expiration date is entered incorrectly, the input field can turn red, and an error message can appear to guide the user on how to fix it. This helps users quickly understand and correct their mistakes.
Your website must work with different technologies. It means that the website is designed in a way that is accessible across all platforms, browsers, and devices for instance desktop, laptop, mobile, tablets, and smartwatches. It is also supported with assistive technologies such as screen readers, speech recognition software, etc.
The purpose of this article is to write about how important these guidelines are for accessible web content that is vulnerable to any kind of impairment. It is our priority to ensure that what we design and create should be accessible to everyone. This can only happen if we follow these guidelines when designing and developing websites and products. Hopefully, this article will help you make web content more understandable and accessible to everyone.
I've been a Product Designer for the last decade, and my obsession with designing has been growing ever since. It excites me to design new things and I try to execute my best ideas for the end-users. I love to make a good user experience that is easy to use and understandable for each user.
...Loading
We have got the answers to your questions.
Join us to stay connected with the global trends and technologies
