Accessibility - Tips, Tricks & Best Practices for Plugin Developers

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.

(maybe)_Let WordPress Speak

or how an inaccessible datepicker led to a

neat idea.

Don’t be afraid to be wrong.