Every user who visits your website should have the right to a comprehensible user experience, no matter their abilities or the lack of it. This isn’t just our opinion, but in some countries it’s the law. But that isn’t the only reason to make sure your website meets accessibility standards. According to a report on disabilities, 1 billion people live with a disability, which is equivalent to 15% of the world's population. People with physical, visual, cognitive, neurological, motor and hearing disabilities will be using your website. While it feels off-putting to use the numbers as a reason, that’s a significant amount of potential visitors. Making your website usable for everyone is worth the effort.
The gap between accessible websites and those that aren’t usually happens in the budget. Making your website inclusive simply takes more effort during development and more effort means more money. But, when done strategically and with a CMS like Drupal, it doesn’t have to be a significant bump in effort. Drupal core supports design and development of websites that comply with WCAG 2.0 and ATAG 2.0 standards. In fact, there is a whole community (the Drupal Accessibility community) dedicated to improving and keeping up-to-date with the accessibility standards. You could even say accessibility is a core strength of Drupal.
That’s all great if you’re about to rebuild your website, but what if you’re working with your existing one? Let’s dig into web accessibility and how to know if your website is accessible or not.
What is Web Accessibility?
Web accessibility is a very important aspect in web development. In layman’s terms, web accessibility is ensuring your website can be accessed by everyone regardless of their disabilities. Although it’s often assumed, accessibility isn’t just about people with disabilities. As an able-bodied person, there are circumstances that you may find yourself in – situational or temporary - which can affect how you access the website.
Why is Web Accessibility Important
Another misconception is that web accessibility is mostly used to create a positive brand image. But there are a lot more tangible benefits to having an accessible website than many think.
- Increase your audience reach
- Avoid legal issues (remember the lawsuit against Beyoncé back in 2019 when her website wasn’t compliant with ADA (Americans with Disabilities Act))
- Improving user experience for accessibility also means you are improving your overall UX score
- Improve your website rank on search engines
That said, the recent growth and popularity of purpose-led brands does indicate that being inclusive can be a key brand differentiator.
Conformance and the Levels
The World Wide Web Consortium (W3C) developed and released a set of guidelines - the WCAG (Web Content Accessibility Guidelines) that govern the standards of web accessibility. The success criteria of these standards (WCAG 2.0, WCAG 2.1 and WCAG 2.2) have three levels of conformance:
- Level A
- Level AA
- Level AAA
Level A - This is the minimum level of accessibility which covers the most basic requirements of accessibility features.
Level AA - This level requires everything in Level A plus a few additional requirements. When a website conforms to this level, it is a big deal because many of the biggest accessibility barriers are cleared.
Level AAA - The AAA level requires everything in Levels A and AA plus a few additional requirements. This level is hard to be achieved by most websites and it is the highest level of accessibility under the WCAG standards.
How do you know if your website is accessible?
WCAG has set 4 principles and 13 Guidelines for Web Accessibility. Failing to comply with any one of these four principles will make your website inaccessible to users with disabilities. These principles are known as POUR principles
- Perceivable
- Operable
- Understandable
- Robust
Perceivable - All of the guidelines grouped under perceivable revolve around making sure that people are able to find your content.
Operable - You need to make sure your website is operable. People must be able to use your website.
Understandable - People must be able to understand your website.
Robust - Your website should be compatible with all browsers, operating systems and devices.
Accessibility Guidelines
Now each principle has its own set of guidelines that we are going to discuss about here:
Perceivable Guidelines
1.1) Text Alternatives - The first Perceivable guideline, perceivable 1.1 requires that all non-text content has a text alternative. This means images need to have meaningful alternative text. Alternative text should describe what is going on in the image.
1.2) Time Based Media - Perceivable 1.2 requires that there are alternative options for time-based media. Add closed captions on video for the people who are hearing impaired. Close captions can help give them context.
1.3) Adaptable - Perceivable 1.3 requires that content can be presented in different ways without losing the context.
1.4) Distinguishable - The last guideline for perceivable, is Perceivable 1.4, and it requires that the content can be separated from its background visually. This means there should be sufficient contrast between text and background color. The text needs to have a minimum contrast ratio of 4.5.
Check out this tool by Toptal that enables anyone to render a website of their choosing through filters accounting for common color blindness conditions.
Operable Guidelines
2.1) Keyboard Accessible - The first Operable guideline 2.1 requires that all parts of the website can be accessed using only the keyboard.
2.2) Enough Time - Operable 2.2 requires that people are given enough time to use the content on your website. You have to give the user time to finish the task without feeling rushed. You also need to consider that different people have different abilities, and some may be a little slower in getting things done.
2.3) Seizures and Physical Reactions - Operable 2.3 requires that the content is not designed in a way that will cause seizures. Animations and videos should not flash more than 3 times per second.
2.4) Navigable - Operable 2.4 requires that people can navigate the website and understand where they are in the website. All links, inputs and buttons on the page should have a focused state to indicate where a person is on the screen when users are navigating using tabs.
2.5) Input Modalities - The last guideline for Operable, is Operable 2.5 and it requires that all parts of the website can be accessed using other input devices besides a keyboard. Basically, you’ll want to make sure that your website works with a mouse, touch screen devices and speech-to-text.
Understandable Guidelines
3.1) Readable - Understandable 3.1 requires that content is readable and easy to understand. Use simple language and try to avoid jargon.
3.2) Predictable - Understandable 3.2 requires that web pages are predictable in how they appear and operate. The content is going to be different on each page, but the main structure of the page should remain the same. Navigation, order of links and search should always be in the same place on the page.
3.3) Input Assistance - Understandable 3.3 requires that it is easy for people to correct and avoid mistakes.
Robust Guidelines
4.1) Compatible - There is only one guideline under robust , and that is 4.1. This requires that the website should be compatible with all browsers, operating systems and devices. This is achievable by writing valid, semantic HTML. If for some reason the website still needs some accessibility help, add some ARIA attributes.
How to Test Accessibility?
Lastly, you want to incorporate accessibility testing into your website management process. For example, you can tab through the pages to test for keyboard accessibility. Luckily, there are many tools available on internet for automating your testing:
- Wave
- Lighthouse
Reference Sites
Refer to the below W3C sites for the standards and guidelines.
