NC State University Office of Information Technology

Testing for
Accessibility
Before You Hit
Publish

Brian DeConinck

@BrianDeConinck

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

WordCamp US
Brian DeConinck, smiling for the camera
NC State University Office of Information Technology
NC State University
WordPress

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

Eduwapuu, the wapuu mascot of WPCampus
NC State University Office of Information Technology

At NC State,
anyone could be using WordPress!

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

At NC State,
anyone could be using WordPress!

Departmental websites
Content by admin assistants

NC State University Office of Information Technology

At NC State,
anyone could be using WordPress!

Departmental websites
Content by admin assistants

Course websites

Content by faculty and TAs

NC State University Office of Information Technology

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

NC State University Office of Information Technology

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

NC State University Office of Information Technology

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

NC State University Office of Information Technology

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
NC State University Office of Information Technology

All Students + All Faculty + All Staff
means we have

52,000+ potential
content creators

and that's really cool!

NC State University Office of Information Technology

This is AWESOME  
because...

  • We have lots of websites
     
  • Minimal training required for new users
     
  • Anyone can create new web pages!
NC State University Office of Information Technology

This is TERRIBLE  
because...

  • We have lots of websites
     
  • Minimal training required for new users
     
  • Anyone can create new web pages!
NC State University Office of Information Technology

This is TERRIBLE  
because...

WE CARE ABOUT ACCESSIBILITY!

NC State University Office of Information Technology

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
NC State University Office of Information Technology

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
NC State University Office of Information Technology

So I can't prevent things like...

Images with no alt text

A webpage with an image; the image does not have alt text
NC State University Office of Information Technology

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
NC State University Office of Information Technology

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
NC State University Office of Information Technology

We usually approach accessibility as a compliance challenge

Create inaccessible content

Scanning
& user complaints

Notify
site owner to fix

NC State University Office of Information Technology

How do you get
52,000+ potential
content creators

to not make
inaccessible content
in the first place?

NC State University Office of Information Technology

gives us the solution!

WordPress
NC State University Office of Information Technology
Public Institution

Democratizing
Government

Democratic norms

+

Everyone participates in civic institutions

NC State University Office of Information Technology
Public Institution

Democratizing
Government

Democratic norms

+

Everyone participates in civic institutions

WordPress

Democratizing
Publishing

Inclusive design principles

+

Everyone participates in accessibility testing

NC State University Office of Information Technology

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

NC State University Office of Information Technology
WordPress plugin called 'NC State Accessibility Helper'

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

NC State University Office of Information Technology
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
NC State University Office of Information Technology
WordPress preview with an annotation highlighting a detected accessibility issue

Generates an
annotated preview highlighting detected accessibility issues

NC State University Office of Information Technology
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

NC State University Office of Information Technology
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

NC State University Office of Information Technology

What this isn't

  • Rigorous compliance testing
  • A substitute for accessibility training
  • A substitute for manual testing
  • A fool-proof solution for everything!
NC State University Office of Information Technology

What this is

  • Accessibility as part of content creation
  • Democratizing publishing
NC State University Office of Information Technology

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

Brian DeConinck, smiling for the camera

Brian DeConinck

@BrianDeConinck

WordCamp US

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

Testing for Accessibility Before You Hit Publish (WordCamp US)

By Brian DeConinck

Testing for Accessibility Before You Hit Publish (WordCamp US)

  • 4,784