WordPress & Accessibility

Who Am I?

Curtiss[1]

Director of Web Technology

University of Mary Washington

@cgrymala

Curtiss[1]

  • In charge of all development on the UMW website
  • Manage multi-network instance and multisite instances of WordPress for UMW
  • Freelance for various small businesses, colleges & universities, and non-profits
  • Evangelize WordPress

UMW Website:

  • Top-level sites: 36 sites in multisite network; ~90 active plugins
  • Other sites: ~50 separate networks in multi-network install; ~350 total sites; 125 separate active plugins
  • >35,000 published pieces of content
  • ~15,000 published posts & ~13,000 published pages
  • ~50,000 total attachments

UMWBlogs*

Domain of One’s Own*

* – Managed by the TLT office

What Is A11y?

  • Usable by people of differing abilities
  • Available to all
  • Universal Design
Photo credit:
Signing-day-in-Marrakech-1 by Jim Fruchterman

Why Is A11y Important?

  • All on a spectrum of ability
  • Types of impairments:
    • Vision
    • Hearing
    • Motor
    • Cognitive
Types of Impairments from Gov.uk A11y Blog

What Are The Rules?

Web Content Accessibility Guidelines (WCAG 2.0)

Perceivable

  • Non-text content
  • Time-based media
  • Separate content from presentation
  • Appropriate context and contrast

Operable

  • Keyboard-navigable
  • Provide enough time
  • Avoid seizures
  • Wayfinding

Understandable

  • Readable and understandable
  • Predictability/consistency
  • Allow avoiding/correcting mistakes

Robust

  • Proper/valid markup structure
  • Name, role and value for all interactive elements

WordPress & Accessiblity

What Does WordPress Do Well?

Potential Gotchas

  • Heading levels
  • Link titles
  • Link descriptors
  • Alt attributes

Where Things Go Bad

  • Images
  • Videos
  • Plugins
Photo credit: #plugins
by Karolina van Schrojenstein
Lantman – Orlinska

Images

WordPress will give all images an alt attribute, but it can’t determine what the proper alt attribute should be.

  • Does it contain text?
  • Does it convey meaning (button/link symbology, etc.)?
  • Does it contribute meaning/context?
  • Is it purely decorative?

Alt Decision Tree

Videos

Find a video script or provider that supports subtitles and captions

Make sure transcripts/captions are accurate

Plugins

Any plugin that outputs HTML can be potentially problematic

  • Forms
  • Tables
  • Widgets
  • Shortcodes

GravityForms

GravityForms is pretty good

WCAG 2.0 Form Fields for GravityForms makes it better

TablePress

  • Not bad; not great
    • Caption is mis-used
    • No table headers for rows (columns only)
  • Make sure it’s tabular data
  • No layout!

Themes

  • Wildly varied a11y compliance
  • StudioPress is committed to a11y
  • WordPress/Automattic do well

Branding Guidelines

  • Ensure 4.5:1 (ideally 7:1) color contrast ratio
  • Make text readable
  • Avoid spelling/grammar errors
  • Avoid small target areas

Appropriate Contrast

Always use appropriate color contrast in your designs

Check color contrast

What Can We Do To Make This Easier?

Plan

  • Start with a good foundation
  • Choose a good theme
  • Evaluate plugins before using them
  • Build a11y into all processes

Training

  • Train yourself; stay on top of trends and guidelines
  • Develop your own training
  • Point users toward established a11y training

Plugins

Services

None of these are perfect; use multiple services for better results.

Automated checking only identifies small percentage of a11y issues

Questions?

Funny-meme-Sometimes-I-question[1]

A11y Resources

More Resources

This presentation: http://j.mp/wcbalt16biz

Photo credit:
Mum? When are you getting your new glasses?
by 2-Dog-Farm