Category: tools

Accessibility Rendering Tools in Chrome

There are a few great simulation tools in Chrome which invoke rendering of a couple CSS media queries and simulate several types of color blindness. These are great for testing the implementation of your accessible design! The features include:

  • Emulate CSS media feature prefers-color-scheme
  • Emulate CSS media feature prefers-reduced motion
  • Emulate vision deficiencies

Unfortunately, they are quite difficult to discover/locate, so here’s where to find them:

  1. In Chrome browser, open the Developer Tools.
  2. Select the “…” menu button in the toolbar.
  3. Select the “More tools” menu.
  4. Select Rendering; the Rendering panel appears in the sub-panel (next to Console if no others are present).
  5. Scroll to the bottom of the Rendering panel to locate the features.
  6. Select an option from the dropdown for each.

Happy developing!

Bottom on rendering sub-panel Chrome

Addendum

Great point by Chris Heilmann via Twitter.

Related

Force Focus Tools

When testing web accessibility, missing visual focus indicators is a “violation” of 2.4.7 Focus Visible. And when it fails, it also makes other checkpoints difficult to test (for sighted testers) such as focus order.

blue ring around the words "words cognitive concerns" in a block of text

To get around this problem, here are a few tools to help force a visual indication of keyboard focus. Keep in mind that sometimes the tool doesn’t work, usually due to extremely poor markup and lack of keyboard access entirely.

Do you know any others?

Bonus! Enter this in the browser console. Then the console with return the element which is currently focused.

document.addEventListener('focusin', function() {
  console.log(document.activeElement)
}, false)

More on visual focus indication:

Color Contrast Tools

Here are some tools that specifically check for color contrast accessibility issues on websites. And a few related links below. Know any others?

Last updated July 2020.

More:

color wheel

WCAG Cheat Sheets and Checklists

Here are some great checklists and filtering tools for the W3C’s Web Content Accessibility Guidelines—WCAG 2.0. Know any others?

Related

W3C WCAG 2.0

Tools & Code Examples for ARIA Development

Here are some good tools, code examples, and other resources for developing with WAI-ARIA. Know any other good recent ones?

Tools

Code Examples

More