WordPress accessibility resources august-20171. Everything you never dreamed to
ask about accessibility of your
WordPress Site
THE GOOD, THE BAD AND THE MYSTERIOUS
ELIANNA JAMES, I BREAK WEBSITES LLC
2. What’s the issue, really?
Web designed for people who can see, hear, move a mouse, perform hand gestures and who
think in fairly standard ways
What about the millions (estimated 20% of world population) that have some physical or mental
limitations?
Assistive Technology can fill the gaps ( examples: screen readers/ magnifiers for blind/ visually
impaired, keyboards and sip/puff technology for people with physical limitations)
All these techs have to “talk” to each other to work properly.
It’s a constant process as technology improves/ changes and new technologies are invented.
Use of internet and
© I BREAK WEBSITES LLC ELIANNA JAMES
3. Wordpress.org has an opinion
WordPress Accessibility Coding Standards These are standards that WordPress features should
meet for accessibility in order to be merged into core. All new or updated code released in
WordPress must conform with the WCAG 2.0 guidelines at level AA. These basic guidelines are
intended for easy reference during development, but do not cover all possible accessibility
issues.
WordPress Accessibility Forum https://wordpress.org/support/forum/accessibility/
WordPress accessibility plugin https://wordpress.org/plugins/wp-accessibility/
© I BREAK WEBSITES LLC ELIANNA JAMES
4. The Good News re WordPress
Themes designed for accessibility
Simple = Better
https://en.support.wordpress.com/accessibility/
A lot of choices
https://wordpress.com/themes/filter/accessibility-ready
Twenty Fourteen
2014 magazine theme
https://wordpress.com/theme/twentyfourteen
© I BREAK WEBSITES LLC ELIANNA JAMES
5. The Bad News (how well are we doing?)
Web (and devices) are everywhere
Much of web development has paid little attention to the needs of people who use assistive
technology; this is especially true with the more media heavy sites.
How do you see a photo if you are blind?
How do you hear a video if you are deaf?
How do you click a button to buy something if you can’t move a mouse?
© I BREAK WEBSITES LLC ELIANNA JAMES
6. Grey Areas
Accessibility is a moving target as browsers, OS and assistive technology changes frequently
What is accessible to one person may completely be inaccessible to another
Cognitive issues - ADHD, Traumatic Brain Injury (bottom line - care, but not too much. One
person’s solution is another person’s failure to comprehend)
Unofficial disabilities - ESL, chronic illnesses (96% of those people show no outward signs of
their illnesses)
Conclusion: do the best you can. Take feedback very seriously. Get a friend or associate who
uses assistive technology to test and evaluate.
© I BREAK WEBSITES LLC ELIANNA JAMES
7. How to check your site
WAVE Toolbar
Free
Super Easy to Use with Chrome
https://chrome.google.com/webstore/detail/wave-evaluation-
tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US
Super Easy to Use with Firefox
https://addons.mozilla.org/en-us/firefox/addon/wave-accessibility-tool/
DEMO
© I BREAK WEBSITES LLC ELIANNA JAMES
8. WordPress Plugins for Accessibility
Joe Dolson’s WordPress accessibility Plugin
https://wordpress.org/plugins/wp-accessibility/
Customizable.
Works with many, not all, themes
Add skip links. You can define the target location.
Add an outline to keyboard focus
Add a toolbar (high contrast, large print, grayscale views)
Long description to images
Enforce use of alt text
© I BREAK WEBSITES LLC ELIANNA JAMES
9. WordPress themes developed for a11y
Up to date: 7/6/17:
https://www.kasareviews.com/accessibility-ready-wordpress-themes/
© I BREAK WEBSITES LLC ELIANNA JAMES
11. Adding accessibility bugs
Using your WordPress login go here: https://core.trac.wordpress.org/newticket
https://codex.wordpress.org/Accessibility
Search for an issue similar to the one you detected by testing.
If you have additional comments add them.
If the issue hasn’t been reported yet then create a new one.
DEMO
© I BREAK WEBSITES LLC ELIANNA JAMES
12. Accessibility tips for non-coders
Melissa Jean Clark, WordPress website developer
https://melissajclark.ca/website-accessibility-tips/
If you want to dig deeper use WAVE by WebAim or aXe by deque
aXe - a FREE, automated accessibility test tool. (Recommended by the SelectWoo test team on
github: https://github.com/woocommerce/woocommerce/issues/16003
Download the tool:
https://www.deque.com/products/axe/
© I BREAK WEBSITES LLC ELIANNA JAMES
13. Join the team
Join the Make WordPress Accessible team
On Make WordPress Accessible you can find information about the team and the work they do.
How you can help:
write documentation on WordPress and accessibility;
test WordPress themes;
report accessibility issues in core and core themes;
fix accessibility issues by writing patches
If you want to know more, ask your questions in Slack or fill out the form at the teams contact page.
© I BREAK WEBSITES LLC ELIANNA JAMES
14. Resources
Make WordPress Accessible: https://make.wordpress.org/accessibility/useful-tools/
Joe Dolson: https://www.joedolson.com/
Contact me for additional resources. I prefer LinkedIn invites and communicate via LinkedIn
most of the time.
Any feedback is most appreciated and will make future presentations more useful.
elianna james - LinkedIn Profile
720-425-1001
© I BREAK WEBSITES LLC ELIANNA JAMES