This post was co-authored by Leah Rosing (Principal, User Research & Insights) and Wally Zielinski (Manager, Front End Engineering).
Hero Digital recently launched a site redesign for our client, Spaulding Rehabilitation Network, which was designed and developed to be cutting edge, CMS-driven, and visually striking – plus completely accessible for users of all abilities and conditions. Our client’s goal was to make their brand experience even more patient-first, which meant we focused on accessibility from the start.
Spaulding is a recognized leader in rehabilitative medicine nationally and internationally. They offer inpatient and outpatient care through a network of 4 inpatient facilities and over 25 outpatient centers located throughout Eastern Massachusetts. Their mission is to provide exceptional clinical care, promote medical education, and advance research in rehabilitation medicine.
To carry out the experience design, Hero partnered with Perkins Access, a professional services consulting group that is part of the Perkins School for the Blind. Perkins was an important voice for accessibility throughout the Spaulding project, providing subject matter expert consulting and testing throughout the project. We also partnered with Klish Group on engineering in building the new Spaulding website.
For the full details of the project, check out our Philly Tech Week case study presentation.
Our Approach to Patient-First, Accessibility-First Experiences
The goals of this project were to (1) go “beyond compliance” to be truly patient-first and (2) to prove that an accessible site can be just as beautiful as an inaccessible one. To achieve these, we considered different “levels” of compliance with the Web Content Accessibility Guidelines (WCAG), which cover both design and development requirements.
One myth about web accessibility is designers do the creative, then hand off comps to developers to “do the accessibility.” In reality, designers and developers should collaborate from the beginning on user needs, potential solutions, and the accessibility of different features. This encourages early discovery and feature testing in addition to helping developers bake accessibility into the fundamental requirements of the code.
We implemented some of the following best practices for the new Spaulding site:
Design for Color & Contrast
For users with low vision, color contrast ratios affect whether or not a website can be experienced and understood. This can create a challenge, however, when working within a client’s existing brand color palette. Spaulding’s brand historically used large fields of bright color with type overlaid, which created legibility issues. To resolve these issues and meet patients’ needs, we worked with Spaulding on a brand exploration that expanded their color palette to create a more accessible experience.
Balance UX & Semantics
Although tables are often considered very basic and not exciting components for sighted users, it can be hard for assistive technology (AT) to deliver this information seamlessly for visually impaired users. To make information easy to digest, we included code that explicitly associated table cells with their headers. Without this association at the HTML code level, it would be challenging for someone using AT to understand the relevant data points in our tables – which would’ve been a failure of our main goal to be patient-first.
Account for Significant Mobile Changes
In addition, the design called for a few drastic changes between mobile and desktop. Some of these changes were inconsequential, while others called for us to do some very complex markup changes between device types. The best example of this is how we leveraged aria to dynamically update the markup of a sticky sidebar navigation into an accordion on mobile. The sheer number of page elements to account for, on top of ensuring responsiveness between devices, made mobile development a complex beast.
Properly Identify Landmarks
Finally, we wanted to ensure that each component was accessible, but also that the experience on the whole was as inclusive and informative as possible. To help non-sighted users get the same “bird’s eye view” that lets sighted users efficiently scan a page for information, we again used aria to provide proper roles and names for each type of navigation, search box, and section of each page.
User Testing
The web accessibility marketplace offers automated testing tools that scan a site for WCAG compliance, but these tools don’t check for usability or comprehension. That’s why it’s important to test your website with diverse users. Our partner Perkins Access conducted user testing with six users who had various disabilities and used different devices and assistive technology to access the website. The tests revealed usability issues such as a screen reader keyboard shortcut challenge, color contrast issue for a tabbed interface, and a confusing pause feature for an animation. We addressed each of these issues to resolve these pain points and improve usability for all users.
Key Takeaways on Web Accessibility
Accessibility isn’t a one-and-done activity. When creating an accessible digital experience, it’s important to take care to ensure best practices are upheld as needs and designs evolve and grow over time. We continue to work with Spaulding to improve the experience and make it more meaningful for all users.
Ultimately, accessibility is not a product or a checkpoint; it’s about methods and processes. Make it a priority topic in conversations with clients or customers, and continue to test for it regularly. Ingrain a culture of accessibility in your company or agency, because the journey isn’t over when the site launches.
—
Check out the full case study presentation to learn more about our accessibility considerations in the Spaulding Rehabilitation Network project, and contact us to start your accessibility audit today.
