Remaking an Accessible Video Website for People with Disabilities and Their Teachers Case Study

Partnering with the people who wrote the standards for described and captioned media.

Every project is an opportunity for our team to get better, smarter, and humbler. We don’t just teach our clients; we learn from them. So when the chance to work with and learn from Described and Captioned Media Program (DCMP)—the people who wrote the standards for described and captioned educational media—arose, we were excited. Their website, dcmp.org, provides students with disabilities, as well as their educators, with access to high-quality educational video content for free via a U.S. Department of Education grant. This content is fully accessible so they can learn from and enjoy the same media that others access.

Our engagement with DCMP began with a new, highly accessible website design along with a design system to guide the DCMP tech team. It grew into a years-long partnership that so far has included the initial website (complete with accessibility consulting, design, and development) and creating and testing new features as part of continuous improvements.  

DCMP homepage
The homepage introduces new users to this powerful, free service.

Discovery and Design

During our discovery engagement with the DCMP team, it was clear that their top goal was to serve up premium media designed for students with sensory disabilities. The user experience and design centered on making it easy to find and stream videos, and exposed features that instructors could use in their classrooms to make their work more efficient.

During the design phase, we tested our concepts to ensure that they were both visually accessible and aesthetically pleasing for low-vision users. We ensured that we differentiated beyond color, from large elements down to the small details. For example, we visually defined form fields with high-contrast outlines and extra large buttons to make it obvious where users could take action.

DCMP Media Player
The media pages are the heart of the website and offer users several ways to make the most of DCMP resources.

We also supported the DCMP team as they selected a media player, which was critical to the redesign’s success. DCMP vetted each player for its DRM HTML5 content capabilities, accessible controls, and extendability. Picking the player wasn’t the end of the story. In order to make watching videos an enjoyable experience for users of all abilities, our teams paid extra attention to the selected player’s details. DCMP’s developer, Rob, worked closely with our creative director, Jeremy, to customize the player’s text transcript in order to add extra beauty to this critical accessibility feature.

DCMP Media Player Transcript
The searchable transcript is a critical accessibility feature.

Development

Next, our development team translated the designs into components that grew into an extendable design system for DCMP. These components were built with care and sound accessibility principles in mind, testing often for compliance with WCAG 2.0 standards.

Here at Sparkbox, we do not rely on automated tests alone for accessibility testing. Our developers review GitHub pull requests using screen readers to check for qualities that will make the site or product not just accessible but also usable and efficient: descriptive aria-labels/roles, semantic DOM elements, contrast, visual keyboard navigation (including focus states), and logical page flow. Simply using a screen reader to navigate the web is revealing for the team and builds empathy that we carry forward and apply to all of our work.

Accessibility Testing With a Disability Expert

We didn’t want the DCMP site to just comply with WCAG 2.0 standards; we wanted it to provide an excellent user experience for everyone, including people with disabilities. To gain more insight into how non-sighted users would experience the site, we consulted with a screen reader user on key flows. By including him in our review process, we learned how our accessibility efforts worked in practice on the integrated site. And through our disability expert’s help, we found opportunities to make the user experience better for non-sighted users by adjusting some user flows and including more opportunities for navigation shortcuts.

Continuous Improvement

The work of building a website isn’t over on launch day. Since going live with the redesigned site, we’ve partnered with DCMP to add more features to better serve the community of students and educators who rely on this valuable service. And they’ve been extending what we built together within their own team too,

“I can’t tell you how much the design system has helped us in developing learning center content, adding new features, and making minor adjustments to the layout based on both staff and client feedback. As we build new features the design system inevitably grows, giving us even more options for reuse later. It’s become a resource that we use constantly.” - Kyle Sisk, Information Systems Manager, DCMP

We are proud to have been able to contribute to DCMP’s important mission of making a better web for everyone.