Nudging Accessibility into the Development Process
Published:What does this mean, nudging accessibility into the development process? Accessibility is a challenging task. Standards are murky, supporting technologies vary, and there are far too few experts. Sadly, a large percentage of developers I’ve talked to bypass accessibility for a few reasons, all of which have one thing in common, knowledge gaps coupled with time constraints.
Heydon Pickering recently wrote a wonderful article published by Smashing Magazine about CSS Inheritance. The article thoughtfully discusses how many of the conventions we are using, BEM, Atomic CSS, and others, do not take advantage of CSS inheritance and the cascade. When I was reading Heydon's thoughts on styling attributes, I had an aha moment about the other benefit of using attributes as the selector of your ruleset, that is specific to accessibility.
Let’s Nudge
The same developer that creates the presentational layer, may or may not be the same one implementing the behavioral layer. Let’s look at a simple form validation interaction that would require the aria-invalid attribute. The typical way we handle an error is with a state class (is-invalid) or a data attribute (data-state=”invalid”).
When the developer is building out the validation logic for displaying the error, we have required them to use the error state class or data attribute in order to apply the styles to the DOM element. After that, we ask them to add the aria-invalid attribut, so that users relying on assistive technologies will be made aware that the content entered into the associated input element is invalid.
By using aria-attributes for styling hooks, we make it easy for all developers, especially those that are not well versed in accessibility to build more accessible interfaces. We are nudging their success and providing a much better experience for users with disabilities. Another quick example is hiding an element. We have all used a state class like is-hidden. When we could have easily used the aria-hidden attribute as the selector in our ruleset to hide the element.
This post just starts to scratch the surface of ways to make the internet a more inclusive place. What ideas do you have?