Learning Accessiblity: The Almighty Button

As  a software developer intern one of the aspects of my role concerns web accessibility.  Web accessibility is a pretty vital aspect to web design and development as it makes websites and software products inclusive for all those with disabilities.  According to my web accessibility training, 1:5 people have some sort of disability that prevents them from fully accessing content on the web.  It is insanity that this isn’t taken more seriously by web designers and developers.  Now that I’ve been introduced to the concept, I have to say I’m becoming an evangelist for the efforts to make the web accessible for all!

I’ve decided to train and study to become a Certified Professional in Web Accessibility (Thanks for the guidance Marcy Sutton!).  There are two credentials that can get you this certification.  Here’s the description via the IAAP Certification site:

  • The IAAP Certified Professional in Accessibility Core Competencies (CPACC) credential is IAAP’s foundational certification, representing broad, cross-disciplinary conceptual knowledge about 1) disabilities, 2) accessibility and universal design, and 3) accessibility-related standards, laws, and management strategies.
  • The IAAP Web Accessibility Specialist (WAS) credential is a technical level exam representing an individual’s detailed technical knowledge about the WCAG guidelines and other related web accessibility topics.

 

Today I’m learning about making buttons accessible.  All of this wisdom I gleaned from Marcy Sutton via her accessibility tutorial at Egghead.io.

Use semantic html with text whenever possible for a button.  This makes it easy for screen readers and keyboards to identify.

Example:

Make icon only buttons accessible.  Without text a screen reader can’t access a button’s meaning.

Example (problematic):

What’s a possible solution?  Add a visuallyhidden class – grabbing it from the HTML5 boilerplate.  “The visuallyhidden class can be added to any element that you want to hide visually, while still have its content accessible to screen readers.”  Also, using aria-hidden means that the content is not conveyed to users relying on assistive technology.

Example:

Make non-native buttons with svg icons accessible.

Example (problematic):

Add a role=”button” to tell the screen reader that this div element is actually a button.  Adding the tabindex means that this element is reachable by a screenreader and a keyboard but it will be kept in it’s original tab order.  A best practice for svg is to put a title element in it.  Last add the aria-labelledby to point to the svg title.

Example: