Testing for Accessibility Before You Hit Publish (WordCamp US)

NC State University Office of Information Technology

And so do a lot of other schools! Check out wpcampus.org for more on WordPress in higher ed!

At NC State,
anyone could be using WordPress!

Department of Baked Goods, a fictitious academic department at NC State University

At NC State,
anyone could be using WordPress!

Departmental websites
Content by admin assistants

At NC State,
anyone could be using WordPress!

Departmental websites
Content by admin assistants

Course websites

Content by faculty and TAs

At NC State,
anyone could be using WordPress!

Departmental websites
Content by admin assistants

Course websites

Content by faculty and TAs

Research group websites

Content by grad students

At NC State,
anyone could be using WordPress!

Departmental websites
Content by admin assistants

Course websites

Content by faculty and TAs

Research group websites

Content by grad students

Student group websites

Content by undergrads

At NC State,
anyone could be using WordPress!

Departmental websites
Content by admin assistants

Course websites

Content by faculty and TAs

Research group websites

Content by grad students

Personal blogs at wordpress.ncsu.edu

Content by... anyone!

Student group websites

Content by undergrads

The WordPress community likes to talk about
democratizing publishing...

The phrase 'democratize publishing' highlighted in the WordPress codex

The phrase 'democratise publishing' highlighted in an article from the Guardian

The phrase 'democratize publishing' highlighted on WordPress.com

All Students + All Faculty + All Staff
means we have

52,000+ potential
content creators

and that's really cool!

This is AWESOME
because...

We have lots of websites
Minimal training required for new users
Anyone can create new web pages!

This is TERRIBLE
because...

We have lots of websites
Minimal training required for new users
Anyone can create new web pages!

This is TERRIBLE
because...

WE CARE ABOUT ACCESSIBILITY!

As a developer, I can do a lot to
make a theme accessible...

A page in the fictitious Department of Baked Goods website, with user-created content obscured and theme-coded portions of the page visible

But I don't have any control over
what our users put in the page!

A page in the fictitious Department of Baked Goods website, with user-created content visible and theme-coded portions of the page obscured

So I can't prevent things like...

Images with no alt text

A webpage with an image; the image does not have alt text

So I can't prevent things like...

Insufficient
color contrast

A web page in which some text has been changed to a light yellow color against a white background, making it difficult to read

So I can't prevent things like...

Misused
heading tags

A web page in which a paragraph of text is placed in heading one tags

We usually approach accessibility as a compliance challenge

Create inaccessible content

Scanning
& user complaints

Notify
site owner to fix

How do you get
52,000+ potential
content creators
to not make
inaccessible content
in the first place?

gives us the solution!

Democratizing
Government

Democratic norms

+

Everyone participates in civic institutions

Democratizing
Government

Democratic norms

+

Everyone participates in civic institutions

Democratizing
Publishing

Inclusive design principles

+

Everyone participates in accessibility testing

Let's make
accessibility testing
part of the
content creation process

NC State
Accessibility Helper

Homegrown WordPress plugin
Uses aXe accessibility testing engine by Deque Systems
Additional custom tests by us

View my terrible code (and help make it better!)
go.ncsu.edu/a11y-helper-github

Before: The Publish meta box for a WordPress post

After: The Publish meta box, now with an extra 'Run Accessibility Check' button above the 'Publish' button

WordPress preview with an annotation highlighting a detected accessibility issue

Generates an
annotated preview highlighting detected accessibility issues

Modal containing description of a detected accessibility issue and a link to documentation

Modal gives a
description
of the detected issue
and links to
documentation

Page preview containing an image, with an annotation on that image reminding the user to include meaningful alt text

Custom tests give reminders to keep thinking about accessibility

What this isn't

Rigorous compliance testing
A substitute for accessibility training
A substitute for manual testing
A fool-proof solution for everything!

What this is

Accessibility as part of content creation
Democratizing publishing

Accessibility should be something
all of your content creators are thinking about.

Brian DeConinck

@BrianDeConinck

View these slides:
go.ncsu.edu/a11y-helper-wcus

Testing for Accessibility Before You Hit Publish

Testing for Accessibility Before You Hit Publish (WordCamp US)

More from Brian DeConinck

Testing for
Accessibility
Before You Hit
Publish