About Us

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) Team shares their expertise to improve the accessibility of WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and resources.

WordPress targets WCAG 2.2 at level AA as the standard for development.

How you can help

Learn More

For Accessibility support, visit the WordPress Accessibility forum.

Ask general questions during the Team Office Hours every Wednesday at 14:00 UTC in the accessibility channel in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

Learn accessibility best practices

Home / Accessibility Handbook / Tools / Development tools

Development tools

Topics

Color Contrast
Browser Toolbars & Toolkits
Screen reader testing
Other Browser Tools

During development, you should consider regular 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) testing as part of your process. Throughout the design, development, and acceptance stages you should regularly conduct tests of your product. Even if you’re not an expert, taking the time to review your own work with a variety of testing tools will help prepare you for a professional assessment or for testing with users with disabilities.

Color Contrast

contrastchecker.com (Online) — checks foreground/background contrast levels and also gives information on the 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 color blindness emulating 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.
Color Palette Accessibility Evaluator — analyze color combinations for conformance to accessibility guidelines.

Browser Toolbars & Toolkits

aXe accessibility testing tool — available as browser extension and npm module (axe-core)
WAVE — run the WAVE accessibility evaluation tool within Firefox and Chrome.
Accessibility inspector in the FireFox developer tools
AInspector for WCAG Accessibility Evaluation — Inspect web pages for potential accessibility issues.
Tota11y — An accessibility visualization toolkit that can be dragged into your bookmarks bar or installed as a plugin.
Total Validator — an 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, accessibility validator, spell checker, and broken link checker all rolled into one tool. Free & commercial versions available.

There are numerous excellent articles on how to test with and for a screen reader. Keep in mind that the best screen reader testing is by users who use a screen reader on a regular basis for their interactions with the web; you can do your own testing, but it is not a substitute for real user tests.

Testing with Screen Readers, Questions and Answers
For Mac (native for iOSiOS The operating system used on iPhones and iPads.): Using VoiceOver to Evaluate Web Accessibility
For Windows (free, open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL.): Using NVDA to Evaluate Web Accessibility
For Windows: Using JAWS to Evaluate Web Accessibility
How to use NVDA and Firefox to test your web pages for accessibility – A guide to testing by Marco Zehe
Five Screen Reader Accessibility Tests Your QA Team Should Do – An introduction to fundamental screen reader tests.

Note: Preferred test combinations are VoiceOver with Safari, NVDA with Firefox or Chrome, and JAWS with Internet Explorer or Edge. Other combinations of screen reader and browser are significantly less common in practical usage.

Other Browser Tools

HeadingsMap — A Chrome or Firefox extension that shows the structure of headings on a webpage.
Visual ARIA Bookmarklet — A bookmarklet to visually display ARIA attributes on a webpage.
Accessibility Testing Tools for Desktop and Mobile Websites – A review of testing tools by Paul J. Adam.
Accessibility Bookmarklets – A collection of bookmarklets useful for accessibility testing.

Last updated: September 2, 2024

s: search
c: compose new post
r: reply
e: edit
t: go to top
j: go to the next post or comment
k: go to the previous post or comment
o: toggle comment visibility
esc: cancel edit post or comment