#a11y: Accessibility in WordPress

Accessibility presentation given to the Chattanooga WordPress meetup group, July 2016.

Transcript

1. #a11y Accessibility in WordPress
2. WHAT IS ACCESSIBILITY? making things work for everyone, regardless of their abilities --Robert Jolly, WordCamp Tampa 2015
3. REASONS FOR ACCESSIBILITY: VISUAL Color blindness (Monochromic, red-green, blue- yellow) Partially sighted (Can be corrected with contact lenses or glasses) Low vision (Cannot be corrected. Cataracts, glaucoma, macular degeneration, etc…) Total blindness
4. REASONS FOR ACCESSIBILITY : PHYSICAL Limited mobility (Those who rely on a keyboard, other hardware, or have trouble using a mouse)
5. REASONS FOR ACCESSIBILITY : HEARING Partial impairment (low hearing, or deaf in one ear) Total deafness
6. REASONS FOR ACCESSIBILITY : COGNITIVE Learning disabilities / Dyslexia Autism ADHD Acquired brain injuries Neurodegenerative diseases Age-related dementia
7. REASONS FOR ACCESSIBILITY : SITUATIONAL Noisy children Crowded coffee shop Sleeping babies Wrist brace/cast due to injury Using a mobile device/small screen Sun glare Tiredness
8. THE STATE OF A11Y: the current state of web accessibility isn’t great… --Robert Jolly, WordCamp Tampa 2015
10. A11Y FOR CONTENT CREATORS Organization Images Headings Understandable link text (“click here” and “read more” are never okay)
11. ALLY FOR CONTENT CREATORS: ORGANIZATION
12. A11Y FOR CONTENT CREATORS: IMAGES
13. AN IMAGE IS LIKE AN ICEBERG.
14. WHAT’S BEHIND THE IMAGE IS IMPORTANT. Describing an image in an alt tag helps both accessibility and SEO.
15. A11Y FOR CONTENT CREATORS: HEADINGS Use headings sequentially and sensibly. Google likes this, too.
16. A11Y FOR CONTENT CREATORS: CAPTIONS Captions can help explain both images (for users with visual disabilities—or limited bandwidth) and videos (for users with hearing disabilities—or sleeping children, or talkative neighbors in a coffee shop).
17. A11Y FOR DESIGNERS: THEMES Things to look for/includes in an accessibility-ready theme: Color contrast (4.5:1 ratio) Decent font size Links should stand out visually Screen-reader-text (never use display: none; if your hidden content needs to be accessible)
18. A11Y FOR DEVELOPERS: THEMES Things to build in an accessibility-ready theme: Skip links Accessible drop down menus Screen-reader-text “read more” links which include post titles Search/404 sitemaps
21. ACCESSIBILITY FOR DEVELOPERS: ARIA WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies… With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities. – W3C
22. ACCESSIBILITY FOR DEVELOPERS: TRY IT YOURSELF
23. ACCESSIBILITY FOR DEVELOPERS: TOOLS
24. ACCESSIBILITY FOR DEVELOPERS: TOOLS
25. ACCESSIBILITY FOR WORDPRESS Areas to consider which might not be part of your theme, but a plugin instead: Forms Mobile menus Search engine optimization
27. RESOURCES https:/ /www.w3.org/TR/WCAG20/ https:/ /iamjolly.com/2015/09/26/wordcamp-tampa-2015-accessibility-talk/ https:/ /blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ https:/ /webdevstudios.com/2015/03/03/the-basics-of-developing-accessible- websites/ http:/ /alistapart.com/article/reframing-accessibility-for-the-web https:/ /the-pastry-box-project.net/anne-gibson/2014-july-31 https:/ /wordpress.org/plugins/screen-reader-text-theme-support/ http:/ /wordpress.tv/2016/06/30/rian-rietveld-wordpress-state-of-the-accessibility/ https:/ /www.nngroup.com/articles/low-contrast/
28. THANK YOU robincornett.com @robincornett