5 simple extensions to effectively run Accessibility Testing
Everyone knows the importance of Accessibility and the impacts it has on business if not followed. Yet we tend to overlook and ignore which is bad for both the users and the business.
To give you a little bit of context around that Kristina M. Launey says
As we had predicted, the number of website accessibility lawsuits (i.e. lawsuits alleging that plaintiffs with a disability could not use websites because they were not coded to work with assistive technologies like screen readers, or otherwise accessible to them) filed in federal court under Title III of the ADA exploded in 2018 to at least 2258 — increasing by 177% from 814 such lawsuits in 2017.
Putting that aside, let’s focus on making this situation better. Here are a few tools and extensions which you can use to improve and test the accessibility of your digital products.
1. NerdeFocus
NerdeFocus is a quick way to debug focus problems when testing a page for accessibility issues. When activated, it will animate and accentuate the focus ring and display the CSS selector of the currently focused item. NerdeFocus will alert you when there is a focus reset, and when the focus indicator is hidden or off-screen.
2. aXe Chrome Extension
This chrome extension is one of the most lightweight and fast without any need for external resources. The aXe Chrome extension gives us a speedy, light accessibility testing experience which returns 0 false +ves.
This is designed and developed based on the aXe JS library and is the 3rd generation accessibility rules for HTML UI which makes this different for itself from all other applications and approaches. This was achieved as it works on all the latest browsers, supports static fixtures, integration tests, in-memory fixtures.
It is also open source and is evolving regularly and is backed by one of the major accessibility vendors out there. It is also designed in a way such that it can be integrated into any automated tests and this is highly configurable.
3. Color Contrast Analyzer
The simplest and the most powerful extension on chrome says
This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page.
4. WCAG Luminosity Contrast Ratio Analyzer
With this extension, one can pick the colors from Web, generate and evaluate contrast and more importantly get valuable suggestions. They can also preview the design with challenged visions.
In addition to this, it also allows one to pick colors from a web portal and test the contrast based compliance with WCAG 2.0. These are few of the many capabilities which it can do. Highly recommend it.
5. Headings Map
This extension builds a navigable map of an html document which you give it. This is done along with html5 outline algorithm and with the headings structure of that website.
Also, this extension generates an index of any kind of web document structured using headers in addition to showing the structure of sections of the document. Therefore it is not only useful for scanning the document, but mostly very useful for all the UI developers, web specialists, and auditors with enhanced features.
Conclusion
I use all these extensions daily in my design process and they are amazing. Hope this article was helpful. Please 👏 👏👏 if you like this article
More articles on UX and Design.
To learn more about me, Visit www.vamsibatchu.com
Thank you for your time.
