Accessibility is Usability

The power of the web is in its universality.
Access by everyone regardless of disability is an essential aspect.

-Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Good design isn’t good enough

Great user experiences don’t just happen; they’re designed, tested and refined with the user in mind. Designers aim to build products that are easy to use and understand. But when our designs neglect accessibility, we’ll always fall short.

Millions of people live with disabilities that affect their use of technology. The goal of software accessibility is to remove barriers and create inclusive product experiences that work for everyone, regardless of physical ability. So, how can we build accessibility into the foundation of our design practice?

Becoming inclusive by design

PatternFly provides Red Hat designers and developers with a set of consistent patterns and visual design elements that can be applied across products. With its guidelines, standards, and code, PatternFly makes it possible to scale usable and consistent design across the entire company.

While PatternFly does offer some accessible components today, the team is doubling down on efforts this year to help make Red Hat products more universally accessible. The first step? Understanding the needs and experiences of users.

Meeting Governor Morehead School

Governor Morehead School (GMS) in Raleigh, North Carolina serves the special needs of visually impaired students. In November of 2017, Red Hatters Jenn Giardino and Sara Chizari from PatternFly and Mark Caron from the customer portal team collaborated along with other Red Hat associates to host a workshop at Red Hat’s Raleigh site, where GMS students used assistive technologies like screen readers to interact with Red Hat products and PatternFly components. The results were illuminating.

“When we put our designs in front of people and observe them, … we learn what we can do to make the designs more usable,” said Jenn. ”Being able to put our UIs in front of these students and watch them interact, we figure out what information they’re trying to get out of the application, and what they’re using to navigate the page.”

It’s information we would never get without the help of the Governor Morehead School. And information that changes the way we think about building truly accessible products.

Challenging our assumptions

“I came in with this assumption that screen reader users would use the tab key on their keyboards to navigate a page.” said Jenn. “And so, if it’s keyboard accessible and everything has a text label, it’s going to be accessible to a screen reader user.”

While keyboard accessibility is still important, and having adequate text for purely visual elements is also crucial, this assumption about how a screen reader user accesses a web page didn’t match what the team observed.

“The screen reader is a layer on top of the application—it provides its own set of keys for interacting with page contents, and its own methods for navigating a page. A screen reader user might start by scanning a list of page headings to get an idea of the overall content of the page. If the user knows they need a link, they’ll pull up the list of page links,” she said. “So it puts huge emphasis on writing semantic HTML and having a solid information architecture. If the HTML elements we choose don’t align with the users’ expectations, we could be hiding huge sections of content from them. We’d never know that if we hadn’t had the opportunity to test it.”

What’s next

Over 10 weeks, Jenn, Mark, and Sara will continue to work with the GMS students to test products and components for accessibility, gaining new and valuable insights from this student community. And the team is committed to expanding their research moving forward.

One Response to “Accessibility is Usability”

Keyboards are definitely useful, to be sure, and not just for those who are blind (I avoid mice where possible due to tendonitis).
However, organization is _huge_ for those who are using an alternate method of browsing a page: real headers, and clearly labelled links and images (where needed). Also important – and I think pretty common – is the ability to speed up the rate of speech on audio sources. The first time I was nearby when a blind person was navigating a page, I was amazed at how _fast_ they have their screen reader talking.

Transcripts and/or captioning is also important, although more for deaf and hard of hearing folks. I will rarely listen to things which are largely audio because I have more trouble focusing on audio-only input than I do reading things, even though my hearing is fine.

I’m not sure if you have the opportunity to test with folks who are prone to being overwhelmed by input – people on the spectrum are often in this category – but it can be illuminating to see how much of a useful effect addons that reduce the clutter have on this population, as well as on folks who are simply fatigued from too much input. Things like Chrome’s ReadMode or Easy Reader are pretty nice.

You probably already know about it, but in case you don’t, there is an addon called “Funkify” that lets you experience a little of what the web is like with different abilities: http://www.funkify.org/