In many ways, the web is a great equalizer, granting access to a treasure trove of information and connections to all who log on. But imagine for a moment that you can’t use your keyboard due to a severe tremor or paralysis and that operating your mouse is impossible. How will you navigate a website? Now turn off your screen and pretend you’re visually impaired for a moment. The World Wide Web isn’t so freeing all of a sudden. That’s why web accessibility should be at the forefront of any choices we make about design or development on our own sites.
Go from idea to online in minutes with GoDaddy Airo™
Get started now.
What is web accessibility?
While it can be disheartening that not everyone reaps the benefits of the web, there’s a lot you can do to make your sites accessible to more people, including:
- People who are visually impaired.
- People who are deaf.
- People who cannot use a mouse.
- People who use special assistive tools to access the web.
- People who are color-blind or prone to seizures brought on by flashing images.
- People with limited bandwidth who can’t view images.
Besides the moral imperative of helping our fellow humans, there are legal reasons to build accessibility into your site. The Americans with Disabilities Act (ADA) provides that public venues must be accessible to people with disabilities. In 2017, more than 7,600 lawsuits regarding ADA compliance were filed against website operators. Most relate to websites that aren’t accessible to the legally blind or visually impaired.
Other applicable legislation includes Section 508, an amendment to the Workforce Rehabilitation Act of 1973. Passed in 1998, this requires that electronic and information technology developed by or purchased by federal agencies must be accessible to people with disabilities. This only applies to a subset of webmasters, but it’s important because it provides actual guidelines. Section 508 incorporates WCAG 2.0 (more on this in a moment).
So there are legal reasons to whip your website into accessible shape, too.
Web accessibility is all about breaking down barriers that prevent visitors from interacting with your content.
You can accomplish this by following defined guidelines when coding your site. That’s it — in many cases, a few characters or words of code in the right places will do the trick. In some situations, the work can get more involved, but it’s still worthwhile.
Whether your reasons are moral, ethical or legal, learning about web accessibility should definitely be on your agenda.
The accessibility community is active on social media and there are always worthwhile conversations happening. Search for the “a11y” (shorthand for “accessibility”) hashtag on Twitter and other social media. “A11y” originated from the letter “A” + 11 letters + y in the word “accessibility.”
Related: The basics of accessible web design
Web accessibility guidelines
To figure out how to make a website accessible, webmasters (and judges) turn to the Web Accessibility Initiative (WAI) group of the World Wide Web Consortium (W3C) for Web Content Accessibility Guidelines (WCAG). These aren’t laws or regulations, they are simply voluntary guidelines for making your website welcoming to all, without turning aside people with disabilities.
A lot of the WCAG guidelines overlap with Section 508 requirements. If you’re curious, this article does a side-by-side comparison of WCAG and Section 508. If you’re not a federal contractor, WCAG should be your go-to. Many webmasters aim for both WCAG and Section 508 compliance since they overlap quite a bit.
The WCAG guidelines (currently version 2.1) are organized into a checklist. Don’t be overwhelmed by all the information at that link. The document is a comprehensive effort to define accessibility standards, and you don’t have to meet every one of them to make your site accessible to most people. In fact, checklist items are categorized as A, AA or AAA. Companies can aim for compliance at level A (lowest), AA (mid level), or AAA (highest).
AA is the target level for many businesses.
AAA is typically reserved for special dedicated software.
The guidelines are organized around four principles:
Perceivable
Information and user interface components must be presentable to users in ways they can perceive. This includes standards such as providing text alternatives for non-text content.
Operable
User interface components and navigation must be operable. For example, all functionality must be available from the keyboard.
Understandable
Information and the operation of user interface must be understandable. This includes, for example, a requirement to identify the primary language of the page.
Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means being certain to use valid markup, for example.
Related: Structured data — The who, what and why of using schema
Conforming with level A brings basic compliance to your site. With each level you step up, the more accessible your site becomes.
7 tips for hitting the basics of web accessibility
Hitting the basics of web accessibility is pretty easy to do, although when you dive deeper the issues and solutions can get a bit more complex. If you can’t get into full WCAG 2.1 compliance right away, there’s still plenty you can do to make your site more accessible. Here are seven easy starting points:
-
Identify the language of the document.
-
Use meaningful page titles.
-
Use alt tags on images.
-
Don’t require a mouse.
-
Provide transcripts for audio.
-
Make link text meaningful.
-
Proof your page for proper tag closure.
Let’s explore what each of these principles mean.
1. Identify the language of the document
Help screen readers identify the primary language used in the document. You can easily do this in html: <html lang="en">.
2. Use meaningful page titles
Every page title should adequately and briefly describe the content of the page. Every page should have a unique title that distinguishes it from other pages.
3. Use alt tags on images
Make sure all images include equivalent alternative text (alt text). So the pic of your company headquarters, for example, would be defined as <img alt= "company headquarters photo" src="hq.jpg">. Without the alt, the image essentially doesn’t exist for a visually impaired visitor, search engines, or people who have turned off images.
4. Don’t require a mouse
Everything should be workable from a keyboard, as many people cannot use a mouse, including many older users and people lacking fine motor control. If your site is workable from a keyboard, it will also be workable from an assistive technology that mimics a keyboard, such as speech input.
5. Provide transcripts for audio
Without a transcript, your audio file is likely inaccessible to people who are deaf or hard of hearing. As an added plus, your transcript will be searchable and add to your SEO. If you don’t want to do it yourself, use a transcription service.
6. Make link text meaningful
Users should be able to determine the purpose of the link from the link alone and/or its context.
7. Proof your page for proper tag closure
Missing open or close brackets can really mess up a screen reader so be sure your pages are properly formatted. Use this markup validation checker to find potential errors.
You’ll notice that a lot of these items are also good for SEO, so you’ll get double bang for your buck on any accessibility work you do. The above steps are starter moves, but they’ll greatly improve your site’s accessibility with minimum work. See the WCAG guidelines for even more you can do. Learn more about WordPress accessibility.
Web accessibility resources
The tough thing about boosting accessibility is that there are a lot of rules to follow to lift your site up to a high accessibility level, especially if you’re working with legacy code. However, even if you’re never planning make it all the way to WCAG AA compliance, you owe it to your users to take as many steps as feasible to make your content accessible. Start by assessing your site with one of these accessibility assessment tools (for some of these you’ll have to trade your contact info for the report):
Chrome Dev tools: Dev tools has a built-in assessment tool you can access under the Audits tab. This basically checks if a page is properly marked up for screen readers and looks at other accessibility issues.
AChecker: Check individual HTML pages for conformance to accessibility standards.
PowerMapper: Checks up to 10 pages for accessibility plus other problems such as broken links and SEO issues.
If you’re a WordPress dev, you’ll be happy to hear that as of March 2016, all new or updated code released into the WordPress core and bundled themes conforms to WCAG 2.0 Guidelines at level AA. In the WordPress theme repository, you can search for themes with the “accessibility-ready” tag. Plugins are another story, as they are not audited by anyone for accessibility.
Web accessibility and your workflow
Ensuring web accessibility is an ongoing process. Make it automatic by following these three steps:
- Become familiar with WCAG guidelines and practices.
- Build a checklist into your workflow to make sure new content meets accessibility needs.
- Scan and update existing content.
Web accessibility checkers will give you an idea of your starting point. From there, you can organize a plan of attack that will make your site open to all users, or at least as many as possible. Any step you take in the right direction is a good step.
