By Simeon (Si) McAleer, Manager of Accessibility Enablement
Austin Research Laboratory, IBM
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:
IBM Equal Access Accessibility Checker Extension review of a website.
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:
IBM Equal Access Accessibility Checker Extension highlighting the guidance around an issue and how to address it.
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.
