Website accessibility means a site that anyone can fully use. It involves making sure that all content is available and functional to all users, regardless of browser, device, assistive technology, or physical ability.
The COVID-19 pandemic has forced businesses to rely more and more on their websites and raised awareness on the impact of accessibility. Now, organizations are more motivated than ever to provide a good user experience, which includes responsiveness, accessibility, and usability.
Why is accessibility important?
“Why bother with accessibility? Aren’t most of my users regular Joes without disabilities?”, one might ask.
Studies find that one in four adults in the United States has some kind of disability.
And don't forget that all disabilities count, whether they're immediately apparent (visible) or not (invisible), permanent or temporary. User impairments may include limited vision or color blindness, inability to use a mouse (keyboard-only users), and those with limited memory, seizure disorders, or dyslexia.
It's not just about nondiscrimination against disabilities, it's about effective communication.
Any visitor to your website should be able to access the content they need. Period.
An able-bodied parent who's tired and short on time shouldn't be forced to navigate a challenging site. An iPhone user should have an equally enjoyable experience as an Android user. All of your content should be available to users whether they're using a phone or desktop.
Who wants to revisit a site that didn't work well? An accessible site builds confidence in your brand.
Your business may be liable if your site is not ADA-compliant, a.k.a. accessible.
Title III of the Americans with Disabilities Act (ADA) "prohibits discrimination on the basis of disability in the activities of places of public accommodations." Title III has been interpreted by U.S. courts to apply to websites.
Additionally, Section 508 legislation requires "Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities."
Regardless of your interpretation of the law, we believe that every site should be accessible. Accessibility expert Kris Rivenburgh agrees.
Following web standards raises SEO rankings.
Here's another perk: what's good for your user is rewarded by search engines. Google values well-built sites, plus accessibility and search engine optimization (SEO) go hand-in-hand. If you won't do it for your users, do it for your business.
What are the website accessibility standards?
Without clear compliance guidelines from the government, the web industry--and courts--looks to World Wide Web Consortium (W3C), the governing body for technical web standards. These standards are organized under 4 principles: perceivable, operable, understandable, and robust and include testable success criteria.
W3C's Web Content Accessibility Guidelines (WCAG) have three levels of conformance.
| Level A A success criteria | Level AA A + AA success criteria | Level AAA A + AA + AAA success criteria |
|---|---|---|
| Minimum level of conformance for all organizations | Most organizations and all federal agencies should aim for AA | Organizations can look for opportunities to meet AAA compliance, but shouldn't expect to fully conform |
Accessibility checklists:
- W3C's WCAG Quick Reference Guide [Official]
- WebAIM’s WCAG Checklist
- Kris Rivenburgh's WCAG Checklist | WCAG 2.0 vs 2.1 Overview
What are some of the most common issues?
As a “first aid” of sorts, here are the quickest, easiest fixes to the most common website ADA accessibility problems:
Text
- Include alt text for images, video, and other embedded content so that even if a user can't physically see it, they can have a description of it.
- Write a distinct and meaningful <title> element for each page.
- Order headings properly, without skipping levels, to establish reading order. Don't just pick a style because it looks good in that context.
- Make sure that hyperlink text can standalone and is clear where the users might be directed; avoid generic “click here” text. Link text shouldn't be repeated on a page unless it's going to the same URL (unique links should have unique text). If the link text can't be unique, customize the title attribute.
- Mark up tables appropriately. Simple data tables need headings (th elements) for each column and row. Complex tables (those with row or column spans) also need id and header attributes added. All data tables should be given summary attributes.
- Include <label> elements for form fields.
- Though not an HTML element, all PDF files on your site should also be accessible.
Visuals
- Provide significant color contrast between the foreground text and background color.
- Show the focus. A border outline around active links or images may seem ugly, but it helps those without a mouse to know what they’re currently “pointing at”. Don’t suppress it. In some cases, you will want to add it, or an effect that achieves the same purpose.
Structure
- Create links to skip repetitive content, such as the main navigation. These “skip links” can be invisible to sighted users, but they are very helpful to screen reader users and those who can’t use a mouse.
- Ensure usability. Usability is ease of use. The structure and function of the site should be intuitive for a user to understand. For example, navigation that confuses a user as to where they’ll go upon clicking or where they are within the site structure often fails to provide usability. Another culprit is forms that are difficult to fill out correctly. Ask yourself (or do user testing!), “If I weren’t the one who made this website, would I know how to use it?” Then make it more usable!
So, is my website ADA accessible?
A checklist is fine and dandy, but you might be wondering, "Did I do it right? Does my site comply enough?". That's where the following accessibility testing tools come in:
| Testing Tool | What It Offers | What It Costs |
|---|---|---|
| WAVE | Page-by-page scans Browser extensions | Free, but site-wide monitoring through popetech is offered |
| Level Access | Page-by-page scans Browser toolbars | Free, but premium full-site tests are also offered |
| PowerMapper SortSite | Full-site scans | One-time fee, starting at $149 (Try the free demo) |
| Monsido | Ongoing site-wide monitoring and reporting | Available upon request |
These tools are in no way a substitute for thorough hands-on testing, e.g., testing all functionality on various browsers, devices and screen sizes; with a screen reader; with JavaScript disabled; and without a mouse.
After all, checkers can look for violations in your code. But since they don’t know everything the site is supposed to do, they won’t be able to tell you, for example, if all of your awesome effects still execute under certain conditions.
Accessibility doesn't have to compromise aesthetics.
As a marketing agency, we understand the importance of branding and that good design matters. We're certainly not asking web designers to stifle their creativity. As far as creative design goes, many original designs and techniques can still function.
Just make sure you cover your bases to provide equivalent functionality to those with limitations. For example, you can add features only supported by newer browsers if you wish, if what shows up for the older ones is understandable and functional as well. If you must degrade the experience for some users, degrade gracefully.
Do yourself and your users a favor by providing the best user experience! To learn more about other website best practices, read our web and technology blogs.
Category: Web & Technology
Tags: websites