accessibility: proven, easy integration into design and development workflows
TRANSCRIPT
![Page 1: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/1.jpg)
Accessibility
Proven, easy integration into design and development workflows
@iamjolly
![Page 2: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/2.jpg)
What is accessibility?
Accessibility (a11y), simply put, means that we’re making our sites work well for everyone.
![Page 3: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/3.jpg)
1,000,000,000people with disabilities
on our planet today
Source: WHO/World Bank World Report on Disability, 2011
There are more than
![Page 4: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/4.jpg)
people in the United States have a disability
1 in 5
Source: United States Census Bureau
![Page 5: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/5.jpg)
$175 billionannually in the United States.
People with disabilities spend
Source: U.S. Departments of Justice and Labor
![Page 6: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/6.jpg)
MARKETERS BE LIKE
![Page 7: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/7.jpg)
The disability community is the only group that anyone can join at any time.
![Page 8: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/8.jpg)
![Page 9: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/9.jpg)
![Page 10: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/10.jpg)
Where to start?
![Page 11: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/11.jpg)
HINT: NOT AT THE END
OF THE PROJECT!
![Page 12: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/12.jpg)
Everyone on the project has a role in making a website accessible.
![Page 13: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/13.jpg)
Accessibility in planning
![Page 14: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/14.jpg)
Planning and project admin
Procurement/contracting (client teams):
● Require a11y with current guidelines (WCAG 2.0)
● Consider usability testing with people with disabilities
Project management (implementation team):
● Map a11y guidelines to roles/tasks
● Communicate requirements & expectations
● Establish test plan for a11y
● A11y represented at every stand-up
![Page 15: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/15.jpg)
““When the requirements state...
Site must be built in accordance with the W3C’s Web Content Accessibility Guidelines 2.0
![Page 16: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/16.jpg)
![Page 17: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/17.jpg)
OMG, it’s 34 pages long!
![Page 18: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/18.jpg)
WCAG is more than just a single line item!
The Web Content Accessibility Guidelines (WCAG) 2.0 are:
● 4 Principles, consisting of:
● 12 guidelines, and
● 61 success criteria aligned with Levels A, AA, and AAA ★ Level A: 25
★ Level AA: 13
★ Level AAA: 23
Go ahead, take a look: W3C Web Content Accessibility Guidelines
![Page 19: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/19.jpg)
Quick tips for project managers
● Don’t memorize WCAG—it’s imperfect, at best.
● Do understand a11y project duties
● Do communicate frequently
● Add a11y to all project phases
● Incorporate testing with each sprint/iteration
● Be an advocate for end users/a11y
Hungry for more? W3C Accessibility Responsibility Breakdown
![Page 20: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/20.jpg)
Accessibility in content
![Page 21: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/21.jpg)
Accessibility for content
● Images need appropriate alternate text (alt text)
● Caption your videos
● Provide transcripts for audio (and video)
● Be careful about reading level
● Avoid rapid flashing (no more than 3x per second)
![Page 22: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/22.jpg)
Alt text for images - some guidelines
● Every image needs an alt attribute!
● Decorative images have an empty alt: alt=“”
● Keep alt text descriptive, but brief
● Ensure functional images have appropriate alt text, for example:
alt=“Waffle House home”
![Page 23: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/23.jpg)
Check your content’s reading level
● Text for general audiences: aim fora grade level of around 8.
Online Tool: Readability-Score.com
![Page 24: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/24.jpg)
Accessibility in design
![Page 25: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/25.jpg)
Accessibility for designers (UX and UI)
● Design consistent interfaces
● Check color contrast
● Beware of line length issues
● Keep related items close (proximity)
● Design focus states for links, buttons, etc.
● Design for error states
![Page 26: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/26.jpg)
Starting design with an accessible color palette
Online tool: ColorSafe.co
![Page 27: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/27.jpg)
Checking for color contrast during design
Web Utility: Lea Verou’s Contrast Ratio
![Page 28: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/28.jpg)
Checking for color contrast during design
Application: Colour Contrast Analyser
![Page 29: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/29.jpg)
Design in browser? We got that!
Tool: Chrome Accessibility Developer Tools
What’s the contrast ratio for “Webcam” in light blue?
![Page 30: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/30.jpg)
The Pinhole/Squint Test
Virgin America - Where We Fly
![Page 31: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/31.jpg)
Accessibility in development
![Page 32: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/32.jpg)
Accessibility for developers
● Develop with web standards in mind ★ Set page language
★ Use semantics (headings, buttons, labels) ★ Foreground images, please (with alt text) ★ Hide informative text for screen readers with a
CSS class like: .screen-reader-text
● Mobile-first, responsive design is your friend
![Page 33: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/33.jpg)
Accessibility for developers
● Use your keyboard for quick tests - regularly!
![Page 34: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/34.jpg)
Accessibility for developers
● Help users with great form error handling
Forms Example: Simply Accessible
![Page 35: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/35.jpg)
Accessibility for developers
● Unit test all the things
Test Suite: QuailJS
![Page 36: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/36.jpg)
Accessibility for developers
● Unit test all the things
Test Suite: QuailJS A11y testing plugin: Access Monitor
![Page 37: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/37.jpg)
Keyboard, keyboard,
KEYBOARD!After that, screen readers.
![Page 38: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/38.jpg)
A11y plugins and themes
![Page 39: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/39.jpg)
Accessibility Ready Themes: WordPress.org
![Page 40: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/40.jpg)
Plugin: WP Accessibility
![Page 41: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/41.jpg)
Plugin: Genesis Accessible
![Page 42: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/42.jpg)
Plugin: WCAG 2.0 form fields for Gravity Forms
![Page 43: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/43.jpg)
Plugin: Contact Form 7: Accessible Defaults
![Page 44: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/44.jpg)
But… we really should NOT fix themes and plugins this way!
![Page 45: Accessibility: Proven, easy integration into design and development workflows](https://reader034.vdocuments.site/reader034/viewer/2022050613/58ee6b471a28abfc6c8b4659/html5/thumbnails/45.jpg)
Questions? Thank you!
Please reach out via Twitter or JollyPM.com
@iamjolly