Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Content Accessibility for WordPress

Emily Lewis
December 17, 2019

Content Accessibility for WordPress

What is accessible content? Why is it important? And how can you create accessible content in Wordpress?

An exploration of various roles related to maintaining web content, principles of accessible content and Wordpress techniques for authoring.

Emily Lewis

December 17, 2019

More Decks by Emily Lewis

Other Decks in Technology


  1. Agenda Introductions & Overview Role-based Accessibility 1:00 pm - break

    Accessible Content 2:00 pm - break WordPress Accessibility & Plugins 3:00 pm - break Authoring Accessible Content in Wordpress 4:00 pm - break Problem-Solving Q&A 4:45 pm - go forth and prosper!
  2. Emily Lewis • Accessibility & Universal Design Specialist - Knowbility

    • Author Microformats Made Simple • Co-author HTML5 Cookbook • Formerly with Bright Umbrella, Web Standards Sherpa [email protected] @emilylewis
  3. Our mission is to create a more inclusive digital world

    for all. • Austin-based non-profit • Formed in 1999
  4. Who are you? Why are you here? What are your

    questions about accessible content? What are your questions about WordPress?
  5. Can people with disabilities… • Get the same information, •

    Perform the same interactions, and • function as others … With comparable ease ?
  6. “ Neil Lenane Talent Acquisition/Diversity and Inclusion Leader
 Progressive Insurance

    If you do not intentionally include, you unintentionally exclude.
  7. The Business Case for Accessibility • Return on Disability Group

    Annual Report (PDF)
 www.rod-group.com/sites/default/files/2016 Annual Report - The Global Economics of Disability.pdf • The Financial Brand
 thefinancialbrand.com/68136/pwd-banking-disabled-customer-ada/ • How to Attract and Maintain Customer Loyalty
 odenetwork.com/news/how-to-attract-maintain-customer-loyalty • How much do bugs cost to fix during each phase of the SDLC? 
  8. “It doesn't mean you're designing one thing for all people.

    It means you're designing a diversity of ways for people to participate in an experience, so that everyone has a sense of belonging. Susan Goltsman
 Founding Principal of MIG, Inc.
 Co-author of Play for All Guidelines and The Inclusive City
  9. Project / Product Managers Executives / C Suite Content Strategists

    / Information Architecture Copywriters / SMEs / Content Authors Designers Front-end Developers WordPress/ Back-end / CMS Developers Quality Assurance
  10. Product / Project Managers • Understand accessibility and how it

    applies to your project • Communicate with and support all team members • Think about a11y throughout process • Engage with and represent users • Hold team accountable, escalate when needed • Stay firm
  11. Executive / C Suite • Understand accessibility and how it

    applies to your organization, departments and staff • Understand risks and benefits • Build accessibility into the budget • Be an advocate
  12. Content Strategists / Information Architecture • Know the audience and

    organizational goals • Clear, consistent content structure across varying viewports • Multiple paths to information, resources • Content pyramid • Simplify, simplify, simplify
  13. Copywriters / SMEs / Content Authors • Alternative text, formats

    • Clear language, defined acronyms and uncommon terms • Instructions don't rely on color or sensory characteristics • Simplify, simplify, simplify *Constraints
  14. • Devise consistent navigation • “Chunk” content, embrace lists •

    Use headings, sub-headings • Transcribe audio • Caption video • Craft appropriate alt text • Document instructions for forms and uncommon workflows • Document form error handling and status messages • No images of text
  15. Designers • Color (contrast, meaning) • Typography, structure & hierarchy

    • Interactions (states, errors, confirmations) • Proximity (layout, space) • Controls for motion (video, animation) • Responsive *Constraints
  16. • Use good color contrast • Don’t use color alone

    for meaning • Provide visible focus (“outlines”) • Design bypass blocks (“skip navigation”) • Ensure labels are on all form fields • Design error and status messages • Use proximity for related elements.Ensure text spacing • Designs scale/adjust for varying viewports • Use images, icons thoughtfully
  17. Front-end Developers • Use code libraries wisely • Operability (mouse,

    touch, keyboard, voice) • Meaningful structure • Parsing • Interaction support (element states, errors, confirmations, focus management) • Performance, optimization *Constraints
  18. • Implement keyboard support & skip link(s) • Make visual

    focus order match source code order • Use semantic HTML • Include page landmarks • Properly code headings • Properly associate labels with form fields • Use ARIA wisely • Test with a screen reader • Test with a keyboard • Test with high contrast • Validate code
  19. Wordpress / CMS / Back-end Developers • Enforce accessible content

    entry • Work with code from front-end team • Use software, plugins, libraries wisely • Performance, optimization *Constraints
  20. Quality Assurance • Develop test plans with accessibility built-in •

    Use automated tools where practical • Use manual testing for full coverage • Reduce false positives • Act as accessibility safety net
  21. Reduces cognitive load Helps users focus Conveys content structure, hierarchy

    Reflects organizational policy, standards Informs entire project life cycle
  22. Plain Language • Active voice • Familiar language • Explain

    technical terms • Expand acronyms, abbreviations • Hemingway Editor
  23. Structure & Scanning • Logical order • Front-load important information

    • Chunking • Casing • Page titles • Headings • Lists • Tables
  24. Forms • Instructions • Descriptive labels • Hints • Error

    messages • Confirmation/success messages
  25. Images • Alternative text • alt Decision Tree
 www.w3.org/WAI/tutorials/images/decision-tree/ •

    Optimized • ImageOptim (Mac)
 imageoptim.com • FileOptimizer (PC download)
 nikkhokkho.sourceforge.io/static.php? page=FileOptimizer
  26. Video • Not a replacement for text • Captions not

    “craptions" • Include summaries of sounds, settings, actions and facial expressions
  27. Complex Information • Compromises • Alternative content • We don't

    have solutions for everything — yet • Better than complete inaccessibility
  28. Using & Choosing Plugins • Be judicious • May be

    accessible, but no way to validate • Staging, sandbox environment
  29. Plugins - for / with a11y • WP Accessibility

    • WCAG 2.0 Form Fields for Gravity Forms
 wordpress.org/plugins/gravity-forms-wcag-20-form-fields/ • Genesis Accessible
 wordpress.org/plugins/genesis-accessible/ • Contact Form 7: Accessible Defaults
 wordpress.org/plugins/contact-form-7-accessible-defaults/ • Divi Accessibility
 wordpress.org/plugins/accessible-divi/ • MyCalendar
 wordpress.org/plugins/my-calendar/ • Soliloquy Slider
 wordpress.org/plugins/soliloquy-lite/ • NextGen Gallery
  30. Gutenberg Editor • Known a11y issues • Not ready for

    production teams that need a11y • Can still support accessible authoring • Classic Editor plugin
  31. QA Tools • axe Browser Extension
 www.deque.com/axe/ • Web Accessibility

    Evaluation Tool (WAVE)
 wave.webaim.org • Web Developer Toolbar
 chrispederick.com/work/web-developer/ • Dynamic Accessibility Plugin
 www.ibm.com/able/dynamic-assessment-plug-in.html • Siteimprove Accessibility Checker 
 chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc *Your keyboard