Make WordPress Accessible

Heather Migliorisi

Disclaimer: Everything presented here is my own and does not reflect the views of my employer.

We Are Addicted

There's No Hope

#OneDayWithoutInternet

What if...

You go to buy the latest/greatest tech gadget, but a blank page is all that loads.

...the page is freaking out and filled unrecognizable errors

What if...
every website you visited and app you used was like this?

When do you give up?

Giving up is not an option for people with disabilities.

Let's do our part!

WordPress goes WCAG!!!

All new or updated code released into WordPress core and bundled themes must conform with the WCAG 2.0 guidelines at level AA. - Rian Rietveld

WCAG are sets of accessibility guidelines from the W3C's Web Accessibility Initiative and AA is used as a reference for a legal standard in many countries (U.S. included) worldwide.

What does this mean for:

  • WordPress core - new/updated code must be accessible
  • Themes - Twenty-sixteen is WCAG AA compliant and "Accessible Ready" labeled themes must go through an approval process
  • Plugins - do not go through an approval process (there are too many)

Benefits of making things accessible:

  • Money - 1 in 5 people have a disability AND to work with the government
  • Legal - Title III of the ADA, lawsuits cost $$$$ | Business Case and List of Lawsuits
  • Benefits Everyone - environmental conditions, temporarily disabled and getting older
  • Future Technology - conversational interfaces | Amazon Alexa

What is Accessibility?

Accessible - easy to approach, enter, use, or understand. @ dictionary.com

Accessible - easy to approach, enter, use or understand. @ dictionary.com

  • Ability?
  • Age?
  • Device?
  • Bandwidth?

Disability Classifications

  • Vision (approx 8.1 million people) - color blind, low vision and blind | Video
  • Hearing (approx 7.6 million people) - deaf and hard of hearing
  • Motor (approx 19.9 million people) - loss/limitation of function in muscle control | Video
  • Cognitive (approx 9.4 million people) - any limitations in the ability to think or reason that affect a person’s capacity to perform a task

What about you?

Have You Ever:

  • Environmental Conditions - bright and sunny out OR on a loud bus
  • Temporarily Disabled - broken arm OR ear infection
  • Getting Older

Remember "POUR"

The four main guiding principles of accessibility are:

Perceivable - provide content alternatives (images, audio, video)

Operable (without a mouse/trackpad)

Understandable - clear and simple (writing and functionality)

Robust - works across many devices

When Should You Work On Accessibility?

Let's talk about construction...

Accessibility is NOT a feature,
it's part of the foundation.

You say you'll fix it later...

Who's Responsible for Accessibility?

Accessibility is not a specialist position.

One person* cannot make and maintain an accessible product alone.

*Unless this is a tiny, one person product/project.

Accessibility needs to be a product goal.

So it's incorporated into the process:

  1. Content Strategy
  2. UX/Design
  3. Development
  4. Testing

1. Content Strategy
Image from http://www.infrontoftheline.com/blog/content.html

Content Strategy Considerations:

  1. Readability: Comprehension
  2. Alternative Text for Graphics
  3. Closed Captioning
  4. Transcripts

1. Readability: Comprehension Image from: http://uxmastery.com/readability-tests-magic-formula-or-recipe-for-disaster/

Testing

2. Meaningful Alternative Text

3. Closed Captions

Simple. Do it.

But, DON'T do it with YouTube.

Because it's awful!

Unless ... they are edited

4. Transcripts

Do it with style.

2. UX/Design

Not Plain

Not Boring

Design Considerations:

  1. Personas
  2. Contrast
  3. Color
  4. Readability: Fonts and Text
  5. The Focus Outline
  6. Animation

1. Personas

Persona from Book Excerpt: A Web for Everyone

Update personas to include 3 A's:

Persona from Book Excerpt: A Web for Everyone

2. Contrast

The difference in color and light between parts of an image. -wikipedia

How can we check this?

By Lea Verou

How can we check this in sketch?

By getflourish

How can we check this on a live site?

3. Color

Meaningful Without Color

Bad: Error Messaging Relies on Color

Meaningful Without Color

Better: Message Conveyed With Icons

Testing

Good Example: Provide Options

4. Readability: Fonts and Text Image from: http://uxmastery.com/readability-tests-magic-formula-or-recipe-for-disaster/

Readability: Easy To Read and Understand Content

  • Make sure the text is large enough and has proper contrast.
  • Choose easy to read fonts.
  • Left align the text. It's easier to read.
  • Avoid all caps
  • Avoid large chunks of italicized text

5. The :focus Outline

6. Animation

Things to avoid:

  • Large areas of motion and the parallax-like effects of background and foreground moving at different speeds
  • Autoplaying carousels without controls to pause or stop it
  • Scrolljacking - background animates at a different speed than your scrolling effort
Check out: Designing Safer Web Animation For Motion Sensitivity by Val Head

3. Development

Development Considerations:

  1. Aria
  2. Valid HTML
  3. Semantic HTML
  4. Focus Management (aka - Keyboard Accessibility)
  5. Canvas
  6. SVG
  7. Forms

1. ARIA

ARIA: provides a set of attributes that you can add to HTML elements.

  • role
  • state
  • property

First rule of ARIA use

First rule of ARIA use: Don't use it!

"ARIA roles add nothing to default semantics of most elements" - Steve Faulkner (source)

Don't add default implicit roles to elements

❮button role="button"❯ button text ❮/button❯


Don't add ARIA state or property attributes in addition to their native HTML counterparts

❮input type="text" required aria-required="true"

❮div hidden aria-hidden="true"


Don't add ARIA roles and states or properties to long-implemented structural elements

❮h1 role="heading" aria-level="1"❯heading text❮/h1❯

2. W3C Validation


Note - conformance checking

W3C Validation


Notes on conformance checking

3. Semantic HTML

  • Headings
    • are meant to help users understand content hierarchy
    • levels should not be skipped (BAD - h1, h2, h4)
  • Links, Buttons, Divs and Spans
    • Links - are being styled like buttons, which is fine. Just don't mark them up as buttons.
    • a, div and span ARE NOT buttons
      Products
    • if it acts like a button, make it a

4. Focus Management
(aka - Keyboard Accessibility)

Tabbing. Does it: Highlight what it's on?

Does it: Jump somewhere unexpected?

Do you have to go through the main nav?

Provide a skip nav

Provide skip to page sections

5. Accessible SVGs


Accessible SVGs - https://css-tricks.com/accessible-svgs

6. Accessible Canvas

text inside of a canvas element

text inside of a canvas element with paragraph tag

    
        text inside of a canvas element
        

text inside of a canvas element with paragraph tag

Off Screen Text

    
//hiding text elements from the view, but keeping them available to the screen reader
.sr-only {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); //for clip being deprecated
}
    

7. Functional and Logical Forms

Forms

  • DO NOT use positive tabindex="1"
  • Label everything and link the label to the input
  • 
        
        
    
    
    
  • Don't forget to label things that have hidden labels (search box). Use .sr-only class that is used for the icon fonts.
  • 
        
        
    
    
    
  • Put the label/input group in a li tag and put all of these groupings in a list.
  • Check out: Falling in Love With Forms by Aaron Gustafson

Add Automated Testing:

  • NPM: https://www.npmjs.com/browse/keyword/a11y
    • Gulp-a11y
    • Grunt-a11y
    • Tenon
    • Ember
    • React
  • pa11y (dashboard): http://pa11y.org/

4. Testing

Testing

  1. Tools
  2. Assistive Technology
  3. People

Online Testing Tools

  • http://wave.webaim.org/
  • http://tenon.io/
  • http://leaverou.github.io/contrast-ratio/
  • http://www.hemingwayapp.com/

Chrome Testing Tools

  • Tenon
  • Wave
  • Chrome Developer Tools
  • aXe
  • NoCoffee

wA11y - The Web Accessibility Toolbox


https://wordpress.org/plugins/wa11y/

Assistive Technology

Screen Reader

& Test Using Other AT

Test With Real Users

Don’t think of screen-reader testing as a form of browser testing; think of it as a form of usability testing.

Think of it this way: you wouldn’t want a designer or developer to do usability testing by testing the design or code on themselves. ... They’re already familiar with what problems the design is supposed to be solving, and how the interface works. - Jeremy Keith

Get Involved With WordPress Accessibility

Take Aways

Remember "POUR"

The four main guiding principles of accessibility are:

Perceivable - provide content alternatives (images, audio, video)

Operable (without a mouse/trackpad)

Understandable - clear and simple (writing and functionality)

Robust - works across many devices

Please Don't Feel Overwhelmed?

Progress is Better than Perfection

Don't Let Perfect Be the Enemy of Good

When You Need Help
A11y Slackers: http://web-a11y.herokuapp.com/ or #a11y on twitter

Resources
hmig.me/a11y-resources

Thank you.

Questions?