Cover image for accessibility project. Shows a picture of a tag and some examples of a plugin's contrast results.

Cover image for the accessibility project

The design and engineering teams at Fubo needed help understanding accessibility rules and application. I began creating an internal guide geared toward designers, but available to anyone.
Example slides showing some of the information available in the guide

A brief overview of the information contained in the guidelines

I began by using my public accessibility overview document as a base and catered the information and imagery to align with FuboTV to aid in comprehension. Links to WCAG source material and rules were included as well as design best practices.
Information regarding hierarchy. Includes a picture of the Header structure, examples of scalable hierarchy, and tips on ordering elements.

Documentation describing how to utilize hierarchy

Lots of visual examples were included to help with comprehension and digestion of all the complex WCAG information.
Documentation outlining options on how to fix color contrast

Documentation and example solutions for text contrast

The documentation also included supplemental pages outlining solutions a designer could take to achieve the outcome they needed while still maintaining WCAG standards.

Thorough examples showing the issues that can arise by the placement of progress bars

Much of the information, including my public accessibility overview deck, was referenced by engineering and design during an audit that was conducted over a few months.
Back to Top