How to Make Website WCAG Compliant?
The WCAG is looking to make websites accessible in four different ways:
- Perceivable: Making text and media perceivable for everyone
- Operable: Helping users navigate content easily
- Understandable: Making and media text understandable
- Robust: Maximizing compatibility
While I encourage you to give the guidelines a thorough read, I want to point out a few things on how to make your website accessible. This is not an encompassing guide, but will give you a few significant insights how to make your website accessible.
I also want to share some tools with you that will help you do an accessibility audit, check for color contrast, or ARIA guidelines. Finally, I want to outline how our clients use User snap as an overall project management tool for their WCAG 2.0 implementation.
1. Making text and media perceivable for everyone
This is probably the most obvious thing: everything you can perceive on a website (text, audio, video) needs to be available for another perception as well.
What does that mean?
Blind or visually-impaired users are using screen readers to browse on websites. Therefore, all non-text content needs a written description, alt tags, what this element is about.
If you are in charge of a WCAG 2.0 implementation, your first step might be an accessibility audit in order to see, for example, which alt tags need to be fixed.
The Chrome extension is a helpful tool for that, which adds an accessibility sidebar pane in the elements tab.
You can see which rules exist and which elements need to be fixed. The “Audit function” will appear as a list of rules which are violated (if any). They are separated by page. In a first step, you can also select, which audit rules you want to apply.
2. Operable: Helping users navigate content easily
In order to make website content accessible for people with movement limitations, all content needs to be operable through a keyboard without requiring specific timings for individual keystrokes. All buttons and links need to be accessible by the keyboard interface. Many users with visual or motor impairments rely on a keyboard.
When checking your website for accessibility you need to check for keyboard navigation functionality. Here are some examples what to test for.
3. Understandable: Making and media text understandable
Any website should use clear and easy language. This includes limiting unusual words and abbreviations. To make your writing clear and easy to understand, you might want to use the Hemingway Editor. It highlights complicated sentence structure, adverbs, use of passive voice, and unnecessary clauses.
Making website copy easy to understand benefits everyone.
Most of us are mainly browsing, not reading, when scrolling through website copy. Having an easy to understand text, illustrating your product and its advantages, is extremely helpful for everyone.
4. Robust: Maximizing compatibility
An important step of making a website accessibility is to ensure that its content is so robust that it can be interpreted by a variety of user agents.
User agents are defined as different browsers, assistive technologies, or search engine crawlers according to the Web Content Accessibility Guidelines.
any software that retrieves and presents Web content for users
Example: Web browsers, media players, plug-ins, and other programs — including assistive technologies — that help in retrieving, rendering, and interacting with Web content.”
So what does it mean to make a website robust and readable by different user agents?
All interface components (links and form elements, for example) need to be able to present information to users in different modalities. A headline should not only look like one, but needs appropriate tags to be correctly interpreted by assistive technology, such as screen readers or crawlers, as such. In other words: the content on a given website needs to be semantically identified.
