Step Up with Stepwell: Accessible and On the Go

“Well, most people probably–”

Aaaand, stop.

Assumptions are the enemy of usability.

Assumptions are the reason your colorblind co-worker can’t read a table that uses red to indicate “bad” and green for “good.” They’re why it’s so difficult to click that link on your tablet, and why that one website looks just awful on your phone.

These usability cases are why accessibility and responsive design have become so increasingly important in the past few years. We believe that just because most work is completed on a desktop computer by someone without a disability, that doesn’t mean software should be designed exclusively for that scenario.

Responsive Design

We know many state and local education employees travel between schools, state offices, and special education centers. All through the day, records are updated, emails are sent, and data is recorded. Tablets and smartphones are the name of the game for such occasions. Stepwell is built to be on the go, not stuck on a desktop computer 50 miles away. We use responsive design principles to make sure navigation is collapsable, text is readable, and buttons are clickable on a wide variety of devices and screen sizes.

Accessibility

Roughly 2 million people in the United States are blind, and a full 8 percent of men and 0.5 percent of women have red-green colorblindness. Nearly 20 million people have difficulty lifting or grasping, a disability that can make it difficult to navigate a web page with a mouse. And there are countless other types of disabilities that can impact the way users interact with websites, from hearing and visual impairments to a wide variety of mobility impairments and more. To ensure that any of these potential users have equal access to Stepwell, we follow the W3C Accessibility Standards.

For those with colorblindness, data visualizations that aren’t colorblind safe make certain data elements indistinguishable from each other. Take a look at the difference below:

Four bar graphs. Upper left is not colorblind safe, upper right is what that looks like with Deuteranopia. Lower left has colors that are colorblind safe, and lower right shows what it looks like with Deuteranopia

Choosing colorblind safe colors allows those with the disability to have equal access to the information.

Usually, we avoid using color as a primary data indicator at all. (Our design team lead, Meg, has all but declared war on pie charts.) However, since color can be a useful visual aid, we still use it. To make sure that people with the three most common types of colorblindness can still see the differences, we are careful to use colorblind-safe colors and contrasts (while also trying to make the colors visually appealing, which, we’ve discovered, isn’t easy).

For those who can’t see at all, all of our instructional text is written on the web page, which allows screen readers to read the content for those with visual impairments. Visual elements such as graphs are not generated as images, but as dynamic visualizations that can also be vocalized with screen readers.

Finally, people who can’t use a mouse can navigate and select throughout the site with just the keyboard.

Ultimately, Stepwell works as a tool that, though indirectly, helps students with disabilities. In order to provide this service to the best of our ability, we consider it our responsibility to make sure our software can be used by anyone, anywhere.