26 Nov

Designing With Accessibility in Mind

As part of our work with the Small Business Administration, Eleven Peppers Studios recently had a great opportunity to partner with the National Federation of the Blind (NFB) to recruit non-sighted users for testing purposes– more specifically, their Blind Users Innovating and Leading Design (BUILD) program. Volunteer testers in the NFB BUILD program assess numerous websites, products and services for usability and accessibility.

Being able to test with non-sighted users gives us a first look as to how they might interact with the design compared to a sighted user. This opens the door for possible behavior patterns and practices that might affect their usability of the product we’re designing that may not have been obvious before testing with sighted users.

As we rely on our sight to design beautiful and complex interfaces, it is important for us to keep accessibility and inclusion in mind in order to maintain diverse perspectives. Wondering what exactly that consists of? Here are a few things we’ve been able to gather from our testing sessions:

1. Keyboard Accessibility

Non-sighted users utilize screen readers in order the assess a webpage. Incorporating keyboard accessibility is among the most important aspect of accessibility design. As non-users scan a webpage, they rely heavily on their keyboards to quickly navigate through each control sequence. This is why it’s very important to incorporate the ability for our users to “Tab” through content and implement “Skip to Content” links.

2. Descriptive Layouts / Structure

A structured layout on your website is primarily what screen readers will focus on as you tab through a layout using a keyboard. Understanding how screen readers interact with HTML elements on a website will assist greatly in creating layouts for easy navigation for non-sighted users. For example, Landmark Elements (like headers, main nav and footer) allows a screen reader to easily jump to important sections of the design.

3. Color Contrast

Deficient contrast between foreground and background colors make it hard to see for users with low vision. It is extremely pertinent for all text, icons and focus indicators to meet a minimum contrast ratio of 4.5:1. We were able to use this neat site to check contrast ratio.

4. Alt-Text Descriptions

One of the things we’ve noticed while testing with non-sighted users is the importance of Alt-Text descriptions for graphics! Not only does every graphic on the page need to be linked with descriptive Alt-Text, but they also need to be described in a certain way that speaks to the information behind the image and not the image itself.

“You almost never describe what the picture looks like, instead you explain the information the picture contains.”

Five Golden Rules for Compliant Alt Text (AbilityNet)

Overall, there are moments in which design and research disregards the experiences of people who require assistive technologies. If we involve users with varying disabilities into our process, we come closer to creating design that everyone can use.


WRITTEN BY
Ashley Philip

Ashley Philip has worked as a Commercial Designer at Eleven Peppers Studios for over three years. She has over six years of experience in graphic design and is currently pursuing a Master’s in User Experience Design at the Maryland Institute College of Art. Ashley has a profound interest in solving user problems with a focus on the development and design of products themselves.