Content Accessibility for WordPress

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.

39c8ef13c693c8d143679be9e3d8cf02?s=128

Emily Lewis

December 17, 2019
Tweet

Transcript

  1. Content Accessibility for WordPress

  2. 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!
  3. Emily Lewis • Accessibility & Universal Design Specialist - Knowbility

    • Author Microformats Made Simple • Co-author HTML5 Cookbook • Formerly with Bright Umbrella, Web Standards Sherpa emily@knowbility.org @emilylewis
  4. Our mission is to create a more inclusive digital world

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

    questions about accessible content? What are your questions about WordPress?
  6. What is
 accessibility ?

  7. None
  8. Can people with disabilities… • Get the same information, •

    Perform the same interactions, and • function as others … With comparable ease ?
  9. Why is a11y important ?

  10. “ Neil Lenane Talent Acquisition/Diversity and Inclusion Leader
 Progressive Insurance

    If you do not intentionally include, you unintentionally exclude.
  11. Increase Revenue Boost Market Share Improve Efficiency Drive Innovation Reduce

    Legal Risks
  12. 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? 
 www.synopsys.com/blogs/software-security/cost-to-fix-bugs-during-each-sdlc-phase/
  13. “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
  14. It's about people

  15. Questions?

  16. Role-Based a11y

  17. 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
  18. 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
  19. Collaboration

  20. 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
  21. 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
  22. 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
  23. Accessible Content & Structurein practice

  24. • 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
  25. Designers • Color (contrast, meaning) • Typography, structure & hierarchy

    • Interactions (states, errors, confirmations) • Proximity (layout, space) • Controls for motion (video, animation) • Responsive *Constraints
  26. Accessible Design
 in practice

  27. • 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
  28. 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
  29. Accessible Dev in practice

  30. • 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
  31. Wordpress / CMS / Back-end Developers • Enforce accessible content

    entry • Work with code from front-end team • Use software, plugins, libraries wisely • Performance, optimization *Constraints
  32. 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
  33. Questions?

  34. Accessible Content*

  35. Reduces cognitive load Helps users focus Conveys content structure, hierarchy

    Reflects organizational policy, standards Informs entire project life cycle
  36. Collaboration

  37. Plain Language • Active voice • Familiar language • Explain

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

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

    messages • Confirmation/success messages
  40. Links • Descriptive of destination • Concise • Meaningful •

    Avoid opening in new window/tab
  41. 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
  42. Audio • Not a replacement for text • Provide transcripts

    • Include summaries of sounds
  43. Video • Not a replacement for text • Captions not

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

    have solutions for everything — yet • Better than complete inaccessibility
  45. Language Translations • Page titles • Form labels • Messages,

    alerts, hints • Alt text
  46. Questions?

  47. WordPress Accessibility &
 Plugins

  48. Using & Choosing Plugins • Be judicious • May be

    accessible, but no way to validate • Staging, sandbox environment
  49. Collaboration

  50. Plugins - for / with a11y • WP Accessibility
 wordpress.org/plugins/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
 wordpress.org/plugins/nextgen-gallery/
  51. Gutenberg Editor • Known a11y issues • Not ready for

    production teams that need a11y • Can still support accessible authoring • Classic Editor plugin
 wordpress.org/plugins/classic-editor/
  52. Questions?

  53. Accessible Content in WordPress Authoring

  54. Collaboration

  55. WordPress Demos • Page titles • Headings • Abbreviations, acronyms

    • Links • Images • Video
  56. Your Own Check Work

  57. 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
  58. Quality Assurance by example

  59. Q A &

  60. Thank You! ❤ emily@knowbility.org @emilylewis