Article
The Beginner's Guide to Web Accessibility
Web accessibility has been in the news a lot lately. Most recently, a case involving Domino’s Pizza has the potential to go all the way to the Supreme Court in what could be a landmark decision that will shape the future of web accessibility.
Accessible websites are simply those sites that people with disabilities can perceive, operate and understand. They work well with assistive technologies such as screen readers, provide alternative mediums for other impairments and allow for navigation using devices other than a mouse.
An inaccessible site excludes a potential customer base and increases the chances of a lawsuit under Title III of the ADA. And it can hurt search rankings – more on that below.
Roughly one-in-eight people in the United States has a disability. If the definition is expanded to include those who are moderately impaired, that number jumps to nearly one-in-five.
Failure to accommodate such a large audience limits the positive impact a website can have on your business – not to mention your brand's ability to resonate with people and inspire belief. Building an accessible website that is usable in as many browsers and by as many people as possible can help your business – but it's also simply the right thing to do.
The purpose of this guide is to help you understand web accessibility so you can grow your brand and better serve your website guests – because that's exactly what they are. Not visitors; not customers; but guests who are counting on you to help them find the information they seek. In this guide, we'll cover the following:
- What is Web Accessibility?
- Benefits of Accessibility
- Accessibility Regulations
- Accessibility Standards
- Accessibility Testing: Automated vs. Human
- Non-compliance Risks
- Accessibility Self-Assessment
- Helpful Experts and Resources
By the time we're done, you'll have a clear understanding of all things related to web accessibility and access to some relevant resources to help you do your own website assessment. Let's dive in!
What is Web Accessibility?
Let's start by defining accessibility. According to W3C (World Wide Web Consortium), “Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.”
When we build websites at BrandExtract, we test on every browser version that is used by more than 1% of our customers' audiences. It makes sense for a website to be usable in as many browsers as possible so we don't exclude potential customers, partners or employees. Even though it affects the total cost of their websites, we've never had to convince anyone that this is a worthwhile effort.
Human beings deserve the same - if not more - consideration as web browsers.
The first thing we tend to consider when discussing web accessibility is site usability for visually impaired visitors, but visual impairment is only one disability category. Auditory, physical and cognitive impairments are equally important and must be addressed in different ways.
Individuals with these impairments can use a variety of assistive devices to help to navigate the web more easily. Accessible websites are simply those that work well with these assistive devices and strive to deliver a user experience that minimizes the need for assistive devices in the first place.
Benefits of Accessibility
Good planning is key to building high-quality, usable websites. It requires thoughtfulness and good processes. Planning your UX and design work around accessibility raises the bar for detail in your work. Increased diligence ensures your website performs well for humans and robots alike.
The same details that can inform a screen reader or other assistive technologies are also helpful for the search engine robots that crawl and index your site. According to Google Webmaster Central Blog, accessible sites are more easily indexed by the Google search engines which can lead to better matches and higher rankings. Google has emphasized this fact for more than a decade.
Many of the things we do to make a website more accessible for users with impairments also help other users. Larger fonts, better contrast
Accessibility Regulations
Quick disclaimer: I am not a lawyer. Decisions you make to implement anything less than full compliance with all of the regulations described below (and those omitted) come with risk and should involve your legal team. They are appropriately qualified to assess the risk and consequences of failure to comply with these regulations. "You could be sued" is not just a scary sales tactic.
Accessibility regulations vary by country. Here are a few you'll need to know.
United States
In the United States, you should be familiar with the Americans with Disabilities Act of 1990, Amended (ADA), Section 255 of the Telecommunications Act of 1996, the Air Carrier Access Act of 1986 and the 21st Century Communications and Video Accessibility Act of 2010 (CVAA).
United States Government
If you are creating a website for a U.S. government agency or an entity that receives funding from the government, you also need to be aware of Section 504 of the U.S. Rehabilitation Act of 1973 and Section 508 of the same U.S.
European Union
If you are based in or doing significant business in the European Union (EU), you
Canada
And if you do business in Canada, make sure you are aware of the Canadian Human Rights Act and the Policy on Communications and Federal Identity. Many other countries have their own individual regulations as well.
It's completely natural to feel overwhelmed. No individual or small company
Accessibility Standards
Most regulations draw from the WCAG 1.0 and WCAG 2.0 standards as guidelines for building accessible websites. Both of these standards are built and maintained by the Web Content Accessibility Guidelines Working Group, a consortium of web developers and invited experts from a variety of companies and organizations.
The WCAG working group is one of many working groups under the W3C (World Wide Web Consortium). The W3C is the international standards community responsible for HTML, CSS and many other technologies that the web depends on.
WCAG 1.0 and 2.0 will largely guide you to the same place, but WCAG 2.0 has more easily measured heuristics. A website that conforms with WCAG 1.0 will likely conform with WCAG 2.0. All sites that conform with WCAG 2.0 will conform with WCAG 1.0. The difference between the two lies in how they organize the guidelines. Quoting the W3C website:
WCAG 1.0 is organized around guidelines that have checkpoints, which are priority 1, 2, or 3. The basis for determining conformance to the WCAG 1.0 are the checkpoints.
WCAG 2.0 is organized around four design principles of Web accessibility. Each principle has guidelines, and each guideline has testable success criteria at level A, AA, or AAA . The basis for determining conformance to the WCAG 2.0 are the success criteria.
WCAG is an evolving standard. WCAG 2.1 has reached candidate recommendation status and could see adoption in any new legislation as early as the summer of 2018. WCAG 2.1 is additive upon WCAG 2.0. In other words, a 2.1 conformant site will be 2.0 and 1.0 conformant so it makes sense to target WCAG 2.1 in any new initiatives.
Let's do a break down of the WCAG 2.1 hierarchy. The four fundamental design principles put forth are:
- Information and user interface components must be presented in a way that they can perceive.
- User interface components and navigation must be operable.
- Information and the operation of user interface must be understandable.
- Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
Within each of those principles are a series of guidelines. For example, subordinate to the first principle we will find the following guideline:
- Create content that can be presented in different ways (for example simple layout) without losing information or structure.
Subordinate to that guideline we find these success criteria:
- Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
- When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
- Instructions provided for understanding and operation content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
- The meaning of each input field collecting information about the user can be programmatically determined when:
- The input field has a meaning that maps to the HTML 5.2 Autofill field names; and
- The content is implemented using technologies with support for identifying the expected meaning of form input data.
- In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.
Each principle has one or many guidelines and each of those guidelines has one or many success criteria. The current draft of WCAG 2.1 has four principles, fourteen guidelines and seventy-eight success criteria. A website must be audited against all of these criteria to ensure conformance with the standard and most of these criteria involve multiple tests.
But wait, there's more. Each of the success
Level A (minimum)
Addresses the most basic web accessibility features, but does not generally achieve broad accessibility
Level AA (mid-range)
Addresses most common barriers for disabled users and aligns to the Revised 508 Standards
Level AAA (highest)
Addresses the highest level of web accessibility, but is not recommended as a general policy, because it is not possible to satisfy all criteria for some content.
Choose carefully what level of conformance you want to achieve with a website because it will have a significant impact on schedule and budget.
Accessibility Testing: Automated vs. Human
There are free tools and online services that will perform an automated test of a single web page or even entire sites. The tools can be browser plugins, standalone desktop applications, self-hosted services, free online services
Our favorite automated tools are:
- tenon.io - Tenon is SaaS that can perform on demand searches through the browser or an API. Pricing depends on the number of API requests (scans) that you need to perform. It is extremely well documented and can easily be incorporated into SAM, BrandExtract's CMS.
- AATT (Automated Accessibility Testing Tool) by Paypal - AATT is a node.js application that runs as a service. It can scan single pages or entire sites, and can be configured so that it can access non-public (password protected) web pages. Scan requests can be submitted via an API with responses returned in an easily parsed JSON format. AATT is also easily integrated with SAM.
aXe Developer Tools by Dequeue Systems - aXe is available in a browser plugin for both Chrome and Firefox. It extends the browsers' built-in developer tools and creates a nice, easily parsed report with clear recommendations.
These tools are quick and easy to use but are not a panacea. Many of the guidelines put forth in the WCAG documents are worded in ways that require careful parsing and evaluation. How those guidelines apply to unique designs can be subjective. Why are they worded vaguely? These guidelines have to be future-proof.
Because the web and related technologies are an evolving medium, the guidelines needed to be applicable to technologies, devices and interfaces that have yet to be invented.
Furthermore, the automated testing tools simply cannot perceive the user experience in the same way as a human. There are measurables you can work with to do a really good job, such as whether or not fonts meet a minimum size and contrast criteria. But there are many other variables that are more difficult to measure. For example, is the meaning of a diagram adequately conveyed in the text?)
That's where human beings come in. Human testing of a website is a deliberate and rigorous process that can take hundreds of hours. But it's crucial to building empathy between your audience and your brand.
In a perfect scenario, testing should be done with users who have the same impairments you are addressing, and the expertise to know what's right and what's wrong with a website.
The only practical way to find a team of these experts is to outsource to a reputable third party that specializes in accessibility testing. Hiring humans to test a website for accessibility can be very expensive. You might find that having humans test just the more complex, interactive pages is a cost-effective compromise.
Non-Compliance Risks
We all want to believe that we will build inclusive websites simply because it is the right thing to do. But the truth is, sometimes our good intentions will outstrip our pocketbooks. Why should a company spend thousands of dollars making its website accessible?
One reason is to minimize risk. Even if you do not provide direct services to consumers, you might still be at risk of being found in violation of one or more regulations.
Consider users who are looking for employment within your organization but are excluded because your online job database is not accessible. What about investors who don't have access to your company's financials? When these things happen you can be found in violation of regulations.
There are no government entities that spend their time surfing the web, auditing sites and looking for websites that don't meet web accessibility guidelines. There are no inspectors who "sign off" when your website is ready to go live.
It is entirely up to your organization to make sure the job is done well. You are responsible for choosing a partner that takes web accessibility seriously and has the resources, either internal or external, to make sure the job is done right.
It's hard to quantify the likelihood of being sued and subsequent costs, but even unfounded lawsuits that are readily dismissed can cost a company many thousands of dollars in legal fees. And if it's evident that you have made insufficient efforts to make your website accessible, you will probably lose (or be forced to settle).
More than 260 web accessibility lawsuits were filed in 2016 and the numbers were significantly higher in 2017. This does not include those cases that were settled without going to litigation. Talk to your lawyers to get a real sense of the possibilities, but know that the risk is real.
If you are interested in learning more about the risks of non-compliance I highly recommend this blog post by Karl Groves. It is a balanced view, backed by real numbers. Bear in mind that it was written a couple of years ago, and the landscape has changed with the number of lawsuits being filed.
Accessibility Self-Assessment
Hopefully, at this point, you have a good grasp of the topic of usability. But it's completely natural to feel overwhelmed. Making small improvements is a good start to reducing risk and potential damages from lawsuits. Here are a few steps you can take:
Assess your risk
Consult with your legal team and calculate (as best you can) your risks. Have them search public records for ongoing and recent litigation in this area. Are the trends going up? What percentage are successful? Does it seem that your industry is seeing more activity? What could a lawsuit cost your organization, both in dollars and the negative impact on your brand? What about lost revenue?
Research the costs
If you are building a new site, have your development partners create a line item for the cost of ensuring that their work meets WCAG 2.1 standards using automated accessibility testing tools. Also, consider meeting with third-party accessibility consultants who have the resources to perform human testing. Get pricing from them directly so that they can work independently from your developer.
Do the math
It sounds callous, but the truth is you have to make a determination on whether the risks outweigh the costs. At BrandExtract we believe that for most business-to-business (B2B) websites, thorough automated testing for WCAG 2.0 Level A conformance upon launch and any major updates is a cost-effective solution that demonstrates a clear effort to make a website accessible. For consumer-facing websites, or websites with rich, complex interactivity, more thorough testing might be required. Once again, you should consult a legal professional to get a clear and accurate understanding of the risks of non-compliance.
Set a plan for launch
If your website is consumer-facing, it would be reasonable to perform testing with humans at the launch of a new site or anytime it undergoes major changes. For a B2B site without a lot of complexity or rich interactions, automated testing of the site might be sufficient.
Set a maintenance plan
Any plan you put forth must include ongoing testing that happens on demand or automatically on a regular schedule. Human testing is something that is only needed when a website undergoes significant revisions and/or redesign.
Helpful Experts and Resources
When researching how to achieve conformance you will find that the solution is not always clear. Fortunately, we have The A11Y Project. The A11Y Project is a community organization that focuses on making web accessibility guidelines easier to understand and implement. It offers specific suggestions for common design patterns, articles on accessibility, a curated list of events and checklists for making sure you've hit all the important steps.
“A11Y” is a numeronym frequently used in social media and other space-restricted media to refer to Accessibility. You can simply read it as "Accessibility" and use it to help uncover other resources.
- The A11Y Project
- The W3C Web Accessibility Initiative
- W3C
- WCAG 1.0
- WCAG 2.0
- WCAG 2.1 (Candidate Recommendation)
- Section508.gov
- Selecting Web Accessibility Evaluation Tools
aXe Developer Tools- Automated Accessibility Testing Tool
- Tenon.io Online testing tool
- TinyMCE A11yChecker
- Accessibility Lawsuits, Trolls, and Scare Tactics
- Also a special thanks to Kim Testa at The Bureau of Internet Accessibility. Her group offers both automated and human testing and I feel smarter for having talked to her (though any mistakes in this article are my own).
A Few Extra Insights
SAM offers three possible integrations to assist with automated accessibility checking:
- The TinyMCE A11yChecker plug-in is a free add-on to SAM's embedded HTML editor and can be turned on by request for SAM versions 3.2 and later.
- Integration with BrandExtract's hosted instance of AATT can be used on SAM 3.2 or later.
- Integration with tenon.io can be implemented on SAM 3.2 or later.
Having an accessible website isn't just about avoiding the risks of non-compliance. More importantly, it's about doing right by every user and consistently delivering on your brand promise. If you want any additional guidance about building an accessible website, check out our podcast episode on web accessibility or feel free to get in touch with our team.
Join our mailing list
Meet the Authors
