AccessibilityTips, Tricks & Best Practices for Plugin
Developers
Hi, I’m Trisha Salas
@trishacodes
“Accessibility is not a dark art” -@GarethFW, Head of Accessibility @BBC
Accessibility is…
a moving target.
Accessibility is…
good design.
Accessibility is…
good, standards compliant website design.
Accessibility is…
about giving equal access to everyone.
Accessibility is…
easy to appreciate or understand.
YOU HAVE THE POWER TO AFFECT
CHANGE!
Why should I care?
Where do I Start?Good HTML is the foundation of accessibility.
Learn HTMLDeeply
•Choose the tag that best describes the content•Avoid tricky hacks, and workarounds•Use HTML, CSS and javascript appropriately•Don’t skip alt attributes on images.
Best Practices
What about testing?Check Keyboard Accessibility
WAVE Chrome extension
Access Monitor WordPress Plugin
Are Plugins Different?
Some Examples
Nav Focus: tabindex
tabindex=“1" defines an explicit tab order. This is almost always a bad idea.
tabindex="0" allows elements besides links and form elements to receive keyboard focus. It does not change the tab order.
tabindex="-1" allows things besides links and form elements to receive "programmatic" focus.
ARIA LabelsWe needed to give screen readers a little
more context for our footer navigation
Focus Styles
The addition of focus styles to search fields adds a visual cue that removes ambiguity and allows the user to follow along with the keyboard focus.