Automatic a11y

past, present and future of automated tooling

CSUN #32 2017, San Diego, CA | Job van Achterberg | @detonite

Hi, I'm Job

Software developer, firefighter

Twitter: @detonite | Ham radio: PD5JOB

Testing

Test how?

  • Compliance
  • Usability
  • Regression
  • Unit testing?

Tooling types

  • Online checkers
  • Browser extensions / plugins
  • APIs
  • Libraries

Older tools

CAST Bobby

Cryptzone Cynthia Says

AChecker

Active tools

Online checkers

W3C Validator

W3C Validator.nu

WebAIM Wave

Tenon

readable.io

JuicyStudio readability checker

Browser extensions and plugins

APIs

Tenon API

Wave API

validator.nu API

Libraries

Deque aXe

Hopes for the future

webdevdata.org

alt usage

Out of 3692336 images, 27% is has no alt text. 16% has empty alt text.

Top 5 after that: 'S', 'M', 'L', 'D', ' '

aria usage

aria-live="rude"

aria-track-click="name"

aria-role="[some role]"

role usage

accessibleItem

accordion

body

'button':
    img (35),      b (5),      i (13)
    samp (1),      h1 (2),     sup (1)
    p (50),        h3 (23),    input (372)
    div (847),     strong (9), form (2)
    button (1354), h2 (9),     a (16202)
    label (178),   li (208),   span (1065)
                        

facebook (17!)

'form': div (319), ul (2), form (2621)

Expectations

Better tests

  • Correct ARIA usage
  • Proper semantics
  • More in-depth, like screen flicker detection
  • Contrast, visibility detection

More heuristics

  • ML Image alts (fb)
  • Semantic suggestions
  • Framework detection

Increased integrations

  • CI systems (Jenkins)
  • Trackers (Github, JIRA)
  • Other APIs (Readability.io)
  • Plugins (Sketch, MS Office)
  • Programming editors and IDEs

Framework-specificity

  • ngAria
  • react-a11y
  • ember-a11y

More configurability

Show me only some errors / warnings when I am developing

Show me everything when a build fails

Don't bug me about this, that's ok because [reason]

Hopes

Component testing

Walled garden testing

What if we can't get out?

What if we need to authenticate?

Deploy locally?

Containerised service?

What about paid services?

Project management integration

Track a11y as part of roadmap

Measure regression (Tracker integration)

Measure impact of features on a11y

Measure a11y impact on velocity

IDE prediction

More CSS heuristics

  • absolute units
  • control font sizes
  • click targets
  • hover style and focus style
  • outline vs custom outline detection
  • [...]

Manual auditing essential

GDS audit

https://alphagov.github.io/accessibility-tool-audit

FIN