Accessibility Testing Tools for Developers

Gerard K. Cohen Lead Accessibility Strategist, Wells Fargo Digital Solutions for Business (DS4B)

• gerardkcohen@gmail.com
• @gerardkcohen

Basic Test #1

HTML Validation

Basic Test #2

What if I told you...

Tab Key

Best one line of CSS ever...

                    /* Helps locate focus */
                    :focus {
                      border: 2px solid red
                                !important;
                    }
                  

JavaScript Version

                    /* Helps locate focus */
                    document.activeElement;
                  

Proper Tabindex Usage

tabindex="-1" ✔

tabindex="0" ✔

tabindex="1" ✘

Bonus

Zoom with CTRL (CMD) +

Basic Tests

• HTML Validation
• Keyboard Focus with TAB

CSS Bookmarklets

Custom Rules

Ex: CSS Toolbar "Widget"

1. role="group"
2. aria-label="some unique label"

.toolbar:not([role="group"]) {
  position: relative;
}

.toolbar:not([role="group"]):before {
  background-color: #dc143c;
  color: #fff;
  content: "A11y: Role of 'group' is missing.";
  font-size: 1rem;
  left: 0;
  padding: 0.625rem;
  position: absolute;
  top: -2.875rem;
}

.toolbar:not([aria-label]),
.toolbar:not([aria-label=""]) {
  position: relative;
}

.toolbar:not([aria-label]):before,
.toolbar:not([aria-label=""]):before {
  background-color: #dc143c;
  color: #fff;
  content: "A11y: Unique aria-label is missing.";
  font-size: 1rem;
  left: 0;
  padding: 0.625rem;
  position: absolute;
  top: -2.875rem;
}

JS Bookmarklets

Browser Plugins

Color Contrast

Advanced Testing

Nightwatch Code Example part 1

Nightwatch Code Example part 2