Engineering Accessible Experiences from the Ground Up

Our approach to inclusive design is driven by a simple principle: inclusive products deliver a better experience for everyone. We are excited that we now have an opportunity as we build our next-gen entertainment platform, to integrate accessibility as a core component throughout the tech stack. 

For years, we’ve built our entertainment products like X1 and Flex with accessibility in mind. We focused on ways our customers want to and have the ability to interact with our technology – from enabling  closed captioning or audio description with a single button press or voice command to leveraging the cloud to allow customers with physical disabilities to use their preferred assistive technologies such as eye gaze technology, where the customer navigates our interface through the movement of their eyes. 

While our focus on accessibility has been vital to the evolution of our entertainment experiences, we have usually had to retrofit solutions onto our existing platforms after the fact. Today, we’re excited to be able to outfit our global technology platform itself to power new and existing accessible experiences. 

For the past two years, we have been transitioning our entertainment products to a web-based platform running an open-source JavaScript framework called LightningJS. In addition to delivering significant benefits in terms of video experience, innovation, and speed-to-market, it has given us the opportunity to embed accessibility into the platform architecture from the beginning. 

Similar to our approach with cybersecurity, our goal is to ensure we are building accessible design into our products from the get-go, not as an afterthought. LightningJS is a key part of that effort. 

Here are just a few of the many examples of how our redesign efforts and adoption of LightningJS have allowed us to incorporate accessibility into our user experiences and our user interface design and development: 

• Typeface and font size are intentional design choices. In fact, the scale of type across all our entertainment products has been increased and can be easily adjusted to improve readability of on-screen menus, program guides, etc.
• We defined a high contrast color theme that can easily be applied to all the components within an application with a single setting change, making our entertainment content easier to read and navigate for everyone. 
• We are designing and developing the experience with motion in mind. Through reduced motion mode, we can more easily scale back the amount of animation on screen, creating better viewing experiences for those with motion sensitivities, while maintaining the default experience.
• Focus state, the ability to highlight interactive components for accessible navigation is important for customers with limited mobility that are using a screen reader or other accessible technology.  We’ve been able to take the focus state to the next level by using a larger scale, increasing the color contrast between the background color and art, and adding subtle animation to draw attention to the focus state. We plan to enhance this even further in future releases.

With this new design thinking and the new Lightning development framework – we took the opportunity to build out a shared component library of Lightning UI components. Accessible design and features are baked in and help us ensure that detail and dedication to accessibility are standardized across all applications these components are used on. That means that wherever they are in our company, NBCUniversal, Sky, or Xfinity, developers will be able to adopt and use all the innovative accessibility features created by their colleagues across the globe.

Some of these accessibility improvements in our shared component library include:

• An announcer capability that, when enabled, allows for relevant information to be voiced along the focus path of the application. For example, when connected to a speech engine, it will read out the Page Title (e.g., Movies), Row Title (e.g., Scary Movies), and Entity Metadata (e.g., Movie Title) that is currently focused on, as well as provide contextual information, like which arrows to press on the remote to navigate the experience, or how many items are in the current row. 
• A text magnifier which, when enabled, will display all relevant information about the currently focused item in a black and white text box with larger font.

And to promote inclusive development, we are working towards open sourcing our components and created example apps for our partners to take advantage of these inclusive features, so app developers can more easily design in an accessible way for our platform. This helps to ensure we are not just making our own experiences accessible but helping to ensure that the apps and third-party experiences we support are accessible as well. Collaboration has always been central to our technology innovation and development, especially when it comes to inclusive product design. This is yet another example of how our teams are working together and with the larger development community to create better experiences for everyone.  

This is part of our continued commitment to making our products, technology, and experiences accessible to the widest possible audience. It really is true when they say, “when you make a product more inclusive, you make a better product,” and I feel lucky to be part of bringing that to life.

Tom Wlodkowski is Vice President of Accessibility at Comcast Cable