Layer3 TV

Accessible Interface Design

Intro to ADA Compliance

After becoming a part of the T-Mobile brand, the team at Layer3 TV had an enormous task ahead of them: making sure their product could scale for a high volume of users. An important part of this task was making sure that the interface was accessible, including making closed captioning settings available to all users.

As the sole designer on the latter effort, I worked with the product team and engineers to prototype closed captioning settings for streaming devices. After the initial requirements were met, I collaborated with one of the lead product designers to redesign the interface for ADA compliance.

A New Passion Project

Up until this point in my career, my only knowledge of accessible design was color contrast and type size requirements. Add to the fact that my knowledge was only based on the web. Not TV. This required, as many consulting jobs do, quickly becoming an expert—to the best of my abilities—on the subject matter.

This project proved to be one of the more meaningful of my career, as it sparked an interest in accessibility and resulted in my continuing advocacy for inclusive product design. You can read more about my own research on accessibility, including published articles by visiting my portfolio page on accessibility.

Requirements & Research

Project Tasks

Competitive Analysis
High Fidelity Mockups

Starting with Captions

One of my first tasks in understanding how to meet compliance with screen readers was stuyding interfaces from established companies. I studied interfaces from services such as Roku, YouTube Live, Amazon Video, Hulu, and more, listening to how information and actionable items are read, while also noting visual indicators that may assist those with less permanent forms of visual impairment. At the same time, I had also began producing high-fidelity mockups showing a user’s journey to enable and customize closed captions.

Mockup of general closed captioning settings

Mockup of foreground settings for closed captioning

Design for TV

Project Tasks

Analyze current state of design
Offer recommendations for accessibility quick wins for first release
Provide wireframes and high fidelity mockups of future state solutions based on best practices

Recommendations & Revisions

I started by recreating the existing state of the UI in wireframe form to better break down existing components and see how me might alter their design for better compliance. As the project progressed, the layout evolved to include more contextual information for users to understand where they are in the experience. Typography was addressed as labels were often difficult to read. I also explored layouts that stripped away unnecessary features of the product’s home screen for future releases.

Wireframe of Layer3 TV home screen interface in the current state

Current state of UI shown in wireframe-form

Wireframe of Layer3 TV home screen in wireframe state made with minor layout adjustments

Example of wireframe with minimal changes for MVP

Evaluating Current State

How Might Layer3 make their product more accessible in the short term?

Move the ‘Currently Watching’ frame to the top of the screen

This better fits user’s expectations of how to navigate the area and adheres to the Accessibility Tree Model which makes the interface accessible to screen readers and Voice Over. Not to mention, users intuitively scroll down. Rearranging the layout would better match their mental model.

Spelling out more words

Using plain language like ‘season,’ ‘episode,’ and ‘channel,’ are better understood by a wider range of people than just abbreviations

Reworking order of metadata

Users need access to the most important information quickly. Rearranging the metadata based on level of importance will help users with screen readers to more quickly locate what they are looking for.

As wireframes evolved, content was rearranged to improve accessibility

Acceptance criteria included to ensure the correct metadata was being read by screen readers

Future State Recommendations

As the design progressed, more recommendations were made on how to improve accessibility. Most of these iterations involved stripping away components of the original design to decrease cognitive load and improving legibility in the design’s typography.

Must Haves (I may have mentioned...)

Place main metadata content at the top of the screen

This better fits user’s expectations of how to navigate the area and adheres to the Accessibility Tree Model which makes the interface accessible to screen readers and Voice Over.

Nice to haves (Look to the Future...)

Avoid using both left hand and top level navigation

Categorical content should be arranged from the top down. For hardware considerations, Apple TV remote and swiping mechanisms make top horizontal menus difficult to navigate. In addition, the menu may also be difficult/impossible to discover if using a screen reader or Voice Over.

Consider other methods for focus states

Considering visual impairments and colorblindness, color should not be the sole indicator of focus or action. Scaling UI allows the user to see a subtle change in size before selecting an option. Icons can also be used to save screen real estate, help users more easily way-find, and improve accessibility for low-vision, non-English speakers, etc.

Proposal for future state: focus on horizontal navigation

Proposal for future state: iconography in menus

Quick Guide to Accessibility for TV

Layout

Avoid a cluttered interface by adding sufficient margins between layout controls.

Color

Avoid a cluttered interface by adding sufficient margins between layout controls.
Be careful of highly saturated colors (especially reds, greens and blues) when used to fill significant areas of the screen.
Adhere to a minimum contrast ratio of 4.5:1, though, 7:1 is preferred a it meets more stringent accessibility standards
Show focus through more than just color.

Typography

Avoid thin or light typefaces. Some TVs have strong sharpness and contrast settings by default, making thin and light typefaces look jagged and the text difficult to read.
Simple sans-serif fonts and anti-aliasing increase readability.
Light text on a dark background is easier to read for TV.

Text

Use text in TV apps sparingly. Users are typically about 10 feet away from their television screens, making it harder to read text. Users also don't expect to read much in a TV environment.