Although nearly 1 in 4 adults in the U.S. face some type of disability, an industry sample has found that in 2020 over 98 percent of home pages had a detectable accessibility error. Accessibility can be forgotten or left until too late in the process when it is difficult to retrofit the site or application. Knowledge, discipline, and tools are all essential to building in accessibility throughout a development process.

As we near Global Accessibility Awareness Day, I am excited to announce a new open source offering and design toolkit that give designers and developers the tools they need to make their websites and applications accessible.

The Equal Access Toolkit and Checker are tools for developers and testers to use to embed accessibility directly into their workflow.

• The IBM Equal Access Toolkit is a public set of guidelines that deliver phase-based guidance about accessibility to all members of a team creating an enterprise offering.
• The Accessibility Checker is part of an open suite of automation tools. It is a browser extension that allows developers or auditors to evaluate a web-based component or solution for accessibility issues.

Specifically our project offers:

• Clear guidance on what’s needed at each stage of development, from initial research through planning, design, development, verification and launch.
• A prioritized breakdown of accessibility requirements at each stage
• Test automation
• Browser-based accessibility checking with powerful navigation and built-in help that supports learning exactly the right information, at exactly the right time

Ensuring all team members are responsible for accessibility

All of the tools are built on the same rules engine that is kept up to date to meet the latest accessibility standards and share guidance elements so that all team members can be responsible for accessibility. Each guideline comes in bite-sized snippets to highlight where team members should focus their attention and get the most value at the most efficient pace.

The toolkit enables product teams to create accessible tools along the way without the need for an accessibility expert or formal education. At the same time, designers and developers can fill in gaps as they go without a loss of continuity.

See the checker in action

There are complex uses for the checker, but let’s look at a simpler demonstration of the tool. After adding the browser extension, I decided to run it on a test page, where it returned the following results:

The test page is displayed at the top of the browser. On the bottom left, in the browser’s developer tools, is where you’ll find the page’s source code. The bottom right half of the developer tools section highlights parts of the website where the checker has identified accessibility issues.

The following image shows the full accessibility evalutions of the web page:

The tool offers a full accessibility evaluation of the web page which you can use to understand any potential violations by either looking at the page element or the accessibility checklist item.

Get started

Access the checker via GitHub or get the browser extension through you’re the Chrome or Firefox stores.

If you want to run the checker in a batch configuration, you can get the checker through the NPM repository. Because the toolkit is technology-agnostic, you can use it in a variety of Node.js-based environments for automated testing.

Conclusion

IBM’s long and storied history with diversity and accessibility has taught us that incorporating those aspects into our work creates better innovation and outcomes. We understand it is not always easy to find the best practices or guidance to fully understand or test accessibility solutions. This is why we wanted to establish an open source platform that empowers offering teams to conceive, design, develop, ship, and report on their accessible offerings regardless of their accessibility expertise.

In honor of Global Accessibility Awareness Day, we encourage you to visit https://ibm.com/able to access the IBM Equal Access Accessibility Toolkit and Checker and make accessibility an inherent part of your development process.