Tools and Resources for Web Accessibility

Accessibility Resources

Use the links listed on this page to learn more about accessibility, government regulations concerning it, access checklists to use while creating apps, and find tools and other resources to help you meet compliance.

This list is by no ways exhaustive, and there are plenty of other tools and resources you can use to learn more about this topics and to build your products inclusively to meet accessibility regulations.

Introduction to Accessibility and Inclusive Design

• Designing for accessibility is not that hard, UX Collective
  Seven easy-to-implement guidelines to design a more accessible web

•  What is Accessibility? Penn State
  Some regulatory information is outdated, but overall a good summary on the topic

•  Designing For Accessibility And Inclusion, Smashing Magazine
  A closer look at the different lenses of accessibility through which you can refine your designs

•  Introduction to Web Accessibility, W3C
  Overview of the topic from the group that maintains WCAG and ATAG

• The A11Y Project
  Resources and explanation geared towards developers

• WebAIM Intro to Web Accessibility Standards
  Course to introduce you to the Web Content Accessibility Guidelines

Government Regulation Information

• USA: Section 508

•  USA: ADA

•  UK: GOV.UK Digital Marketplace

• EU: EN 301 549

Accessibility Checklists

• WUHCAG Checklist
  Divided by compliance and includes how to meet criteria, exceptions, and tips in easy-to-understand language

• WebAIM WCAG 2 Checklist
  Contains WebAIM's interpretation of WCAG guidelines and success criteria and our own recommended techniques for satisfying those success criteria

• W3C Checklist
  Lists all of the success criteria from WCAG 2.0 in a checkable list. The level of each success criterion is provided as well as a link to WCAG 2.0 for more information for each success criterion

• W3C: How to Meet WCAG 2 Quick Reference
  A customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements (success criteria) and techniques

Testing Tools

• For Text and Color Ratios: Accessible Colors

•  For Text and Color Ratios: WebAIM Color Contrast Checker
  Shows ratios and acceptance for AA and AAA levels

• Overall Evaluation: WAVE Web Accessibility Tool
  Javascript Required. WAVE 5.0 requires a modern web browser with Javascript enabled. If you are using noscript or other javascript blocking software, please add wave.webaim.org to your script whitelist.

• Overall Evaluation:AATT (Automated Accessibility Testing Tool)
  AATT (Automated Accessibility Testing Tool) is a product offered by PayPal. This platform provides an accessibility API as well as other custom web applications for HTML CodeSniffer. Version 1.0.0 was released in April 2015.

• Overall Evaluation: Axe Chrome Plugin
  Axe Chrome Plugin by Deque Systems is a program that evaluates the web accessibility of sites and applications from within the Chrome developer tools, specifically. The plugin assists by generating reports of web accessibility evaluation results and automatically checks single pages, password protected or restricted pages included.

• Overall Evaluation: Accessibility Viewer
  Accessibility Viewer is provided through The Paciello Group. Also known as aViewer, it is a Windows' inspection tool that displays accessibility API information exposed by web browsers to the operating system. The accessibility information includes IAccessible2, MSAA, UI Automation, HTML DOM, and ARIA. AViewer was released in April 2015, and it covers the guidelines WCAG 2.0 – W3C Web Content Accessibility Guidelines 2.0, Section 508, and U.S. federal procurement standards.

• Overall Evaluation: DYNO Mapper
  DYNO Mapper is a sitemap generator that checks the web accessibility of websites and online applications. DYNO Mapper also includes content inventory and audit, as well as daily keyword tracking. Results are displayed within visual sitemaps to allow for easy and efficient project discovery and planning.

Other Resources

• Intro to Color Accessibility & Best Practices

•  ARIA Screen-Reader Specific Guidelines

•  Microsoft Inclusive Design

What are Accessibility and Inclusive Design?

So why talk about this?

Designing for accessibility is not that hard. At work, we’ve heard many questions from prospects, clients, and team members asking about accessibility. It’s a topic a bit outside their knowledge space and not something they’re used to discussing. Accessibility and the related practices of inclusive design are multi-faceted topics. From working in finance and insurance and having to be mindful of audits focused on this, and from my time teaching people with various levels of physical and cognitive abilities, it’s a topic that matters to me.

I’ve been collaborating with some other team members interested in the subject for an internal presentation and resources to serve as an introduction to inclusive design and accessibility, along with some common concepts and terms related to them. We’ve been sharing information on what it means to be accessibility compliant, how we can currently advise clients, and ways we can improve our own offerings. If it’s not something included in the beginning, going back to include a more inclusive approach to increase compliance and accessibility can be a longer process, needing wider involvement, but with this presentation we hope to start the conversation and help inform our community on these topics.

How you define accessibility?

Each picture shows a different kind of accessibility need

Before going too far, there is one point I want to make:

A disability is a physical or mental condition that limits a person's movements, senses, or activities. A disability is any continuing condition that restricts everyday activities. 

They can be episodic. They might not be permanent. When it comes to people, there’s no such thing as “normal.” The interactions we design with technology depend heavily on what we can see, hear, say, and touch. Assuming all those senses and abilities are fully enabled all the time creates the potential to ignore much of the range of humanity. It can include situational impairments, activity limitations, and restrictions on participation. 

Disability isn’t a personal health condition. It’s mismatched human interactions. Image Source: Microsoft Inclusive Design

When it comes to design, every decision we make can raise or lower barriers. 

What is Accessibility?

Accessibility is the practice of making your products and services usable by as many people as possible. Accessibility is a goal. Accessibility is the goal to ensure that products support each individual user’s needs and preferences. There is no perfectly “accessible” final result. Designing for people is an iterative process.

Accessibility involves two key issues:

1. How users with disabilities access electronic information

2. How web content designers and developers enable web pages to function with assistive devices used by individuals with disabilities

What is Inclusive Design?

Inclusive design involves designing products and services to be usable by everyone to the greatest extent possible, without the need for adaptation. It’s design that considers the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference.

Inclusive design recognizes that our needs shift with time and circumstance, so it anticipates different ways an individual might interact with the world as life goes on. Aging, permanent or temporary disability, carrying a load of grocery bags, pushing a stroller, or sitting in a business meeting are some examples of circumstances that impact how you interact with the world around you — circumstances that might change what you do or how you do things.

• Considers as many people’s needs and abilities as possible

• Aims to please a diverse range of individuals and accommodate a variety of experiences and methods of interaction

• Doesn’t specifically target people with disabilities

How are they different?

Including accessibility into products aims to remove a barrier for people with disabilities. Inclusive design strives to fundamentally redesign a product so that the barrier does not exist in the first place

• Building for accessibility is reactive

• Inclusive design is proactive

• Inclusive design goal is to be usable by everyone to the greatest extent possible.

• Accessible design is more specialist and addresses discriminatory aspects in UX for people with disabilities

How are they related?

Accessibility and inclusive design work together to make experiences that are not only compliant with standards. •Accessibility is a goal and outcome of inclusive design

Inclusive design has a strong heritage in accessibility. We define inclusive design as a set of practices that can be applied to any existing design process. Inclusive is how we design. It’s our tools and methods. In comparison, accessibility offer ways to improve access to what is already designed.

A curb cut is still a curb. The cut makes the curb more accessible to wide array of contexts and needs. It helps people in bicycles transition from street to sidewalk, it aids people in wheelchairs and walkers ease onto sidewalks, it also helps anyone with a child in a stroller, moving objects, or riding other modes of transportation. Inclusive design gives us ways to design for ever-changing human motivations and needs. And design systems that can adapt to fit those diverse needs.

Why should I care?  

Individuals and organizations with different functions will find different reasons to adopt accessibility and inclusive practices: 

• Accessibility uses innovative technology

• Accessibility creates market opportunity

• Accessibility is the right thing to do

• Accessibility offers benefits for all users

• Accessibility is the law for many institutions

• Accessibility uses innovative technology

Accessible design is based on the premise that web pages must work with a broader range of browsers than only Mozilla Firefox or Internet Explorer. A page must be accessible whether using a screen reader, a refreshable braille display, or a head pointer. Making pages work in nonstandard browsers often makes them available to other consumer Internet devices, such as mobile phones or handheld personal digital assistants (PDAs). The techniques of accessibility are based on recent technologies and design strategies. Older, static HTML designs often intermix content with formatting on web pages. Accessibility guidelines encourage the separation of formatting from content through the use of cascading style sheets (CSS) to allow more flexible use of content and easier implementation of more powerful dynamic models.

Accessibility is the right thing to do

Accessibility is the right thing to do

First and foremost: Accessibility represents an important step toward independence for individuals with disabilities. Accessible web pages provide access to fundamental government services and information such as tax forms, social programs, and legislative representatives. Accessible web pages also make possible a broader range of employment and educational opportunities by providing added means of communication. In addition, accessibility allows users with disabilities to participate in day-to-day activities many of us take for granted, such as reading a newspaper or buying a gift for a loved one.

Accessibility creates market opportunity

Accessibility creates market opportunity

Accessibility offers the potential for organizations and businesses to reach new customers and new markets. As additional accessibility policies are adopted, the need among government and educational institutions for goods and services that support accessibility policy is growing. In the United States, businesses providing goods and services to the government via the web or other information technology should understand Section 508. Businesses that understand accessibility and comply with Section 508 have a strong market advantage, which is multiplied as local governments implement new policies.

Accessibility offers innovation and benefits for all users

Accessibility offers benefits for all users

As with many improvements intended for individuals with disabilities, the enhancements of accessible design offer benefits for all users of the web. Anyone who has pushed a shopping cart out of a grocery store can attest to the value of automatic doors and ramps cut into curbs. Similarly, accessible web pages are often easier to read, easier to navigate, and faster to download.

Accessibility is the law for many institutions

Accessibility is the law for many institutions

With new national requirements in the United States, Canada, and the European Union, and more to come in the near future, there are numerous legal mandates for accessibility. These policies will likely expand in scope. In the United States, for instance, Section 508 of the U.S. Rehabilitation Act sets standards for web pages designed or maintained by federal agencies. State and local governments as well as educational and nonprofit institutions around the United States are considering their own accessibility policies. For example, the University of Wisconsin at Madison adopted an Accessibility Policy requiring all pages published or hosted by the university to conform to all WCAG level A and AA guidelines.

What are accessibility regulations?

I’ll be following this post with ones focused on accessibility guidelines and regulations, and listing some tools and resources to learn more about these topics and how to include them when working on projects.

Action Design + Ethical Technology Boston

For the next session of our Action Design best practices series, we are collaborating with Ethical Design Boston.

Our next session will be focused on Ethics in UX Research.

Empathy. Deep Empathy. Accessibility. Inclusiveness. Localization. As the tech industry matures, more and more organizations are acknowledging how the users of their products often differ from those creating them. To close this gap and design better experiences, product teams have begun incorporating more user research into their development cycles.

Including users in the design process presents several ethical challenges, however. For example, how do we test important business assumptions while ensuring participant well-being and privacy? How do we balance user feedback with subject matter expertise? Using examples from the speaker’s work, this talk explores the sometimes thin line between “human-centric” and unethical.

About Our Speaker

Alba N. Villamil is an independent UX Researcher who specializes in designing products for vulnerable populations like refugees and low-income families. In addition to working with pre-stage startups, she has worked on projects with Code for America, the Harvard Kennedy School, and the Rochester City School District. She studied sociology at Harvard University and social psychology at Swarthmore College.

Event Schedule

Registration info TBD, but we’re aiming for 10 DEC 2018, otherwise after New Year’s.

• 6:00 – 6:30 pm: Networking

• 6:30 – 7:30 pm: Talk + Q&A

• 7:30 – 8:00 pm: Networking

What is Ethical Technology Boston?

Ethical Technology Boston is a community of technology & design professionals looking to incorporate an aspect of social responsibility into our daily work. We meet locally to discuss and evaluate complex real life ethical issues and potential implications that we face in our industries. Through these discussions we learn from each other, develop new practices and gain a trusted network of likeminded individuals. We’re also part of a global online community for Ethical Technology and Design at ethicsofdesign.org.