Development tools

Development Tools

Building a new theme or pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party? Perhaps some of these tools can help you to create a more accessible resource.

Paul J. Adam reviewed: Accessibility Testing Tools for Desktop and Mobile Websites

Top ↑

Color Issues

  • contrastchecker.com (Online) — checks foreground/background contrast levels and also gives information on the accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) levels of the contrast
  • Color Contrast Analyser (Windows and OSX)– checks foreground/background contrast levels and preview designs as they might be seen by color blind users.
  • Sim Daltonism — a color blindness simulator for Mac OS X.
  • Colorblind Web Page Filter — apply a filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to a web page.
  • ContrastA (Flash) — find accessible color combinations.
  • Color Palette Accessibility Evaluator — analyze color combinations for conformance to accessibility guidelines.

Top ↑

Toolbars & ToolKits

  • aXe accessibility testing tool — available as browser extension and npm module (axe-core)
  • Tenon.io — automated testing, can be integrated into WordPress with the plugin Access Monitor
  • WAVE — run the WAVE accessibility evaluation tool within Firefox and Chrome.
  • Accessibility inspector in the FireFox developer tools
  • Firefox Accessibility Extension — check the use of structural markup in a page.
  • Tota11y — An accessibility visualization toolkit that can be dragged into your bookmarks bar or installed from GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/. Will show errors covering multiple topics from headings, to contrast and form labels.
  • Chrome DevTools Audits panel — integrated a slimmed version of aXe coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • Total Validator — an (X)HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. validator, an accessibility validator, a spell checker, and a broken links checker all rolled into one tool. Free & commercial versions available.

Top ↑

Screen reader testing

On the website of WebAIM there are some excellent articles on how to test with and for a screen reader:

Also a good read by Marco Zehe:  How to use NVDA and Firefox to test your web pages for accessibility

Note: Test VoiceOver with Safari, NVDA with FireFox and JAWS with Internet Explorer or Edge.
We don’t include ChromeVox in our tests as it doesn’t perform well enough as a screen reader.

Top ↑

Other Browser Tools

Last updated: