The Gamification of Accessibility Greg Kraus University IT Accessibility Coordinator NC State...

39
The Gamification of Accessibility Greg Kraus University IT Accessibility Coordinator NC State University

Transcript of The Gamification of Accessibility Greg Kraus University IT Accessibility Coordinator NC State...

The Gamification of Accessibility

Greg KrausUniversity IT Accessibility Coordinator

NC State University

@gdkraus go.ncsu.edu/accessibility-scan

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. Start easy2. Gradually build skill over time3. Learn to see patterns and know how to react4. Reactions become intuitive and natural5. 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

10

11

32

1

4

6

9

57

8

@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/accessibility-scan/

@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

Mar Apr May Jun Jul Aug Sep Oct Nov0

50,000

100,000

150,000

200,000

250,000

300,000

350,000

400,000

450,000

500,000

642

190,311

88,029

19,641 3,111 0

431,227

138,294179,441

@gdkraus go.ncsu.edu/accessibility-scan

Weighted Errors Corrected With Contests

Mar Apr May Jun Jul Aug Sep Oct Nov0

50,000

100,000

150,000

200,000

250,000

300,000

350,000

400,000

450,000

500,000

642

190,311

88,029

19,641 3,111 0

431,227

138,294179,441

16,82950,488

97,879

179,441

@gdkraus 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

Feb Mar Apr May Jun Jul Aug Sep Oct Nov300

320

340

360

380

400

420

316

329

382

394 398 400 401408 412 413

@gdkraus 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

SortSite• Runs on old Win 7 box• Scripted through

desktop scripting app• Checks for new

requests every 20 seconds

WAVE• Runs on extra

Macmini with MAMP

Server• cPanel (Apache and

MySQL)• Data storage• Assign site ownership

Google Drive• Spreadsheet lists

all sites to be scanned

User Interface• PHP/MySQL

1

1/23 4

@gdkraus 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

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)."

The ALT text of this image mentions a color, which isn't useful for blind users.

@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