The Gamification of Accessibility
Greg Kraus
University IT Accessibility Coordinator
NC State University
Gamification
• Gamification [n]: the use of game design
elements in non-game contexts
@gdkraus
go.ncsu.edu/accessibility-scan
Accessibility is Not a Game
• It’s a human right
• It’s should just be part of their job
• People might get addicted to the game
@gdkraus
go.ncsu.edu/accessibility-scan
We’re Not Talking About Wheelchairs
with Lasers
@gdkraus
go.ncsu.edu/accessibility-scan
I Never Set Out To Make A Game
• Guiding Principles
– It takes practice to become an accessible Web
developer
– I am competing in a marketplace for people's
attention
@gdkraus
go.ncsu.edu/accessibility-scan
Aristotle
• “If you want to become a major league
baseball player, you cannot simply wake up
one day and declare your self a baseball
player, capable of hitting a curve ball. You
must become habituated in the ways of being
a baseball player through a lifetime of
practice.”
@gdkraus
go.ncsu.edu/accessibility-scan
How to Learn To Be a Major League
Baseball Player
1.
2.
3.
4.
5.
Start easy
Gradually build skill over time
Learn to see patterns and know how to react
Reactions become intuitive and natural
Practice
@gdkraus
go.ncsu.edu/accessibility-scan
Competing in a Marketplace of
Demands
• Prioritizations
– “Keeping the lights on”
• Production services to run and maintain
– Security and Compliance
• This impacts everyone, not just “those people”
• As important as you think you are, you’re not
seen that way by campus
@gdkraus
go.ncsu.edu/accessibility-scan
Gaming Principles
• A good game…
– Lets everyone play, regardless of skill level
– Lets you improve skills over time
– Gives you instant feedback
@gdkraus
go.ncsu.edu/accessibility-scan
Make a Game Everyone Can Play
4
5
7
11
6
1
8
10
9
2
3
@gdkraus
go.ncsu.edu/accessibility-scan
@gdkraus
go.ncsu.edu/accessibility-scan
@gdkraus
go.ncsu.edu/accessibility-scan
@gdkraus
go.ncsu.edu/accessibility-scan
Accessibility is Not Fun
• But…
– Solving a problem is fun
– Seeing how you have improved and grown is fun
– Admit it … winning is fun
@gdkraus
go.ncsu.edu/accessibility-scan
This is What WCAG 2 Looks Like
@gdkraus
go.ncsu.edu/accessibility-scan
This is What They Want
@gdkraus
go.ncsu.edu/accessibility-scan
Make a Game Everyone Can Play
@gdkraus
go.ncsu.edu/accessibility-scan
Mario Didn’t Save the Princess in
World 1-1
@gdkraus
go.ncsu.edu/accessibility-scan
Prioritization
• 4 = fatal error, user cannot interact at all with
the element
• 3 = significant error, user can only partially
recover or it causes a significant hardship
• 2 = significant error, but user can usually
mostly, if not fully recover
• 1 = minor annoyance
• 0 = usually can ignore
@gdkraus
go.ncsu.edu/accessibility-scan
Level 4
• Missing alternative text
• Unlabeled form element
• No keyboard event for an equivalent mouse
event
@gdkraus
go.ncsu.edu/accessibility-scan
Level 3
• A form control has more than one label
• Page auto refreshes
• No skip to main content link
@gdkraus
go.ncsu.edu/accessibility-scan
Level 2
• Spacer image does not have an alt attribute
• Pages have unique titles and don’t say
“Untitled Document”
@gdkraus
go.ncsu.edu/accessibility-scan
Level 1
• Invalid code
• Heading levels are skipped
• No titles for frames
@gdkraus
go.ncsu.edu/accessibility-scan
Level 0
• Using absolute font sizes
• No alternative content for iframes
@gdkraus
go.ncsu.edu/accessibility-scan
Demonstrate System
• http://accessibility.oit.ncsu.edu/accessibilityscan/
@gdkraus
go.ncsu.edu/accessibility-scan
When Do People Use The System?
• Available 24/7 year round
• Contests
– NC State 2013 World Usability Day Website
Challenge (October-November)
– NC State Global Accessibility Awareness Day
Website Challenge (April-May)
@gdkraus
go.ncsu.edu/accessibility-scan
The Sales Pitch
“You have 28,000 accessibility errors across
8000 pages. Your site ranks 371 out of 385. You
are in the bottom 10% of all categories. Can you
fix these in the next 2 weeks? Oh, and you’ve
had these problems for the past 2 years.”
@gdkraus
go.ncsu.edu/accessibility-scan
The Results
• Corrected 27,500 errors
• 40 out of 385
• Top 5% in all categories
“I’m co-opting your employees for my own
agenda”
@gdkraus
go.ncsu.edu/accessibility-scan
Weighted Errors Corrected
500,000
431,227
450,000
400,000
350,000
300,000
250,000
190,311
200,000
179,441
138,294
150,000
88,029
100,000
50,000
0
Mar
@gdkraus
19,641
642
Apr
May
Jun
3,111
0
Jul
Aug
Sep
Oct
Nov
go.ncsu.edu/accessibility-scan
Weighted Errors Corrected With
Contests
500,000
431,227
450,000
400,000
350,000
300,000
250,000
179,441
179,441
190,311
200,000
138,294
97,879
150,000
100,000
50,000
0
642
Mar
@gdkraus
88,029
50,488
19,641
16,829
Apr
May
Jun
3,111
Jul
0
Aug
Sep
Oct
Nov
go.ncsu.edu/accessibility-scan
What We’ve Done So Far
• 413 Sites
• 110,000 Pages
• 1,050,000 Weighted Accessibility Errors
Corrected
@gdkraus
go.ncsu.edu/accessibility-scan
Number of Sites
420
400
394
398
400
401
Jun
Jul
Aug
408
412
413
Oct
Nov
382
380
360
340
320
329
316
300
Feb
@gdkraus
Mar
Apr
May
Sep
go.ncsu.edu/accessibility-scan
Being a Good Gamemaster
• You can always make your game better
– More frequent scanning
– Historical rankings
– Graphical and contextual view (WAVE)
@gdkraus
go.ncsu.edu/accessibility-scan
Tools and Resources Developed
• Web Accessibility Handbook
– go.ncsu.edu/accessibility-handbook
• Readability Bookmarklet
– go.ncsu.edu/readability
• Color Contrast Analyzer for Chrome
– go.ncsu.edu/color-contrast-chrome
@gdkraus
go.ncsu.edu/accessibility-scan
Behind the Scenes
Server
Google Drive
• Spreadsheet lists
all sites to be
scanned
• cPanel (Apache and
MySQL)
• Data storage
• Assign site ownership
1/2
4
3
1
SortSite
• Runs on old Win 7 box
• Scripted through
desktop scripting app
• Checks for new
requests every 20
seconds
@gdkraus
WAVE
• Runs on extra
Macmini with
MAMP
User Interface
• PHP/MySQL
go.ncsu.edu/accessibility-scan
Key Elements That Make This Work
• Anonymity, to a degree
• Doing part of the work for them
– Setting up the scanner?
– Doing the scan for them?
• Giving guidance on what is important
• Giving immediate feedback on how to fix it
@gdkraus
go.ncsu.edu/accessibility-scan
The Limits of Gaming
• Automated scans only get you so far
– Cannot test for everything
@gdkraus
go.ncsu.edu/accessibility-scan
Automated Tests are Only So Good
The ALT text of this
image mentions a color,
which isn't useful for
blind users.
alt="N.C. Sen. Daniel Blue Jr. (left) and N.C. Speaker of the House
Thom Tillis were among those paying tribute to former N.C.
Speaker of the House Harold Brubaker (center)."
@gdkraus
go.ncsu.edu/accessibility-scan
Future Developments
• Receive bonus points for performing manual
checks
• Get points for both
– Testing if the onscreen focus is always visible
– Fixing the onscreen focus problem if it exists
• Artificial intelligence techniques
– Determine if you have an appropriate number of
headings
@gdkraus
go.ncsu.edu/accessibility-scan