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.

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 ?
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