In the last hundred years, dozens of legislative acts have been passed to make our environment more accessible for people with disabilities. These include laws such as making public transportation wheelchair accessible (Urban Mass Transportation Act of 1970) or protecting disabled people from housing, education or job discrimination. Accessibility also applies to websites and creating accessible web experiences.
Accessible online experiences are no longer a nice-to-have, but are legally binding for governmental institutions (and their suppliers) as well as for big corporations such as airlines.
If you are thinking about making your website accessible or are in charge of a WCAG 2.0 implementation, this article will illustrate a process on how to get started. It will show you what accessibility for a website means and how you can make your website inclusive for people with a disability.
[otw_is sidebar=otw-sidebar-1]
How accessible is your website?
As of 2013, Airline carrier websites are required to be accessible for people with disabilities.
In 1986, the Air Carrier Access Act (ACAA) was established to ensure that United States and foreign air carriers do not discriminate against people on the basis of disability. In 2013, the ACAA was updated and also included a requirement to make all air carrier websites accessible. As airline and flight information involved into an online format, this update was a necessary means to include people and travelers with disability from booking to boarding.
Accessibility is not just a legal requirement for airline carriers and their suppliers, but for governmental institutions (and their suppliers) as well. Laws differ from country to country, but the direction where they are going is the same: the goal is to make every website and product accessible. The European Parliament, for example, endorsed a law in 2014 stating that all websites managed by the public sector have to be made accessible.
Why is accessibility so important?
According to the US Census Bureau, nearly 1 in 5 Americans has a disability and with the average life expectancy increasing, these numbers are increasing as well.
Making websites accessible means to include people like:
- 8.1 million people with significant vision impairments, including 2.0 million people who are blind
- people with hearing impairments,
- people with learning disabilities or cognitive limitations, including ADD, Asperger, dyslexia etc.
- people who have trouble lifting their hand and have limited movement
- people, who have trouble speaking
In order to make websites accessible, the Web Content Accessibility Guidelines (WCAG) published a standardized guide for anyone who is making their websites more inclusive. Here is what these requirements entail.
What does accessible website mean?
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 Usersnap as an overall project management tool for their WCAG 2.0 implementation.
[otw_is sidebar=otw-sidebar-2]
1. Making text and media perceivable for everyone
a. Making text and media available for another perception
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 Accessibility Developer Tools 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.
With the Chrome extension, you can also inspect individual elements and see their properties relevant to accessibility
b. Color Contrast Evaluation
Making content more perceivable also means including alternatives for time-based media such as audio and video. Furthermore, it extends to the presentation of content, including contrast, color, size of text, layout, and formal structure.
The Chrome Extension Color Contrast Analyzer can help you evaluate color and contrast on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser. You can also analyze PDF files or other local files you provide on your site.
As a result you will get an image analysis showing you where the edges between the colors are sufficiently contrasting and where not.
This is what it looks like when the contrast requirements are met:
The tool also allows you the analyze pixels. You can select the pixel radius in order to look for a border with high enough contrast.
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.
Source: https://webaim.org/techniques/keyboard/
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.
When I recently interviewed Kristen Liu, a disability advocate and Director of Accessibility and Advocacy for Doppler Labs (a SF tech company making wireless earbuds that let you control how you hear the world) she said:
“If you are designing for disability, you are designing for everyone.”
Making a website accessible for people with disabilities means making it more accessible, easier to comprehend for everyone.
Making a website understandable means more than editing website copy. “Understandable” also means having a simple navigation and a consistent terminology. Furthermore, it also means having a functioning error assistance in place, helping users avoid errors or make them reversible.
[otw_is sidebar=otw-sidebar-3]
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.
User agents are “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.
How to make your website accessible with Usersnap
There are a lot of tools out there to help you make your website accessible, from Accessibility Audit tools to color contrast analyzers, and ARIA validators.
Usersnap helps you throughout your entire implementation project, by allowing you to set up a workflow, to collaborate with your team, and to make comments and annotations directly in the browser. Our customers have been working on accessibility implementations with their team, and we are thrilled that they chose to use Usersnap as their project management tool of choice.
So, how does Usersnap help you in the process?
Usersnap is your solution for your entire project management when it comes to implementing WCAG 2.0 standards.
Let’s look at it in detail.
1. Making text and media perceivable for everyone
So let’s say you want to make sure alt tags are added correctly. Usersnap allows you to track your progress and collaborate with team members on missing alt tags.
2. Operable: Helping users navigate content easily
Let’s say, you are checking for keyboard functionality and want to collaborate with your team with you. Usersnap helps you easily communicate which buttons might lack keyboard navigation functionalities. You can register the missing links directly by annotating your screen.
3. Understandable: Making and media text understandable
Making a website accessible is to take a look at the copy and check if abbreviations are understandable. Usersnap can help you here as well.
[otw_is sidebar=otw-sidebar-4]
Capture user feedback easily. Get more insights and make confident product decisions.
Getting feedback has never been easier and we hope you’ve realized that after reading this article. Let us know what you think, your feedback is important.
And if you’re ready to try out a customer feedback software, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.
