Designing accessible experiences from scratch

Our inclusive design approach is guided by a simple principle: inclusive products deliver a better experience all. We are thrilled to now have an opportunity as we build our next-generation entertainment platform to integrate accessibility as a core component across the entire technology stack.

For years we have built our entertainment products such as X1 and Flex with accessibility in mind. We have focused on the ways our customers want and have the ability to interact with our technology, from enabling subtitles or audio descriptions at the push of a button or a voice command to leveraging the cloud to enable customers with physical disabilities to use their preferred assistive technologies such as eye gaze technology, in which the client navigates our interface through the movement of his or her eyes.

While our focus on accessibility has been central to the evolution of our entertainment experiences, we have usually had to adapt solutions to our existing platforms in retrospect. Today, we’re thrilled to be able to equip our own global technology platform to power new and existing accessible experiences.

Over the past couple of years, we’ve been moving our entertainment products to a web-based platform running an open source JavaScript framework called LightningJS. In addition to offering significant benefits in terms of video experience, innovation and speed to market, it has given us the opportunity to incorporate accessibility into the platform architecture from the start.

Similar to our approach to cybersecurity, our goal is to ensure that we are integrating accessible design into our products from the start, not as an afterthought. LightningJS is a key part of this effort.

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

  • Font and font size they are intentional design choices. In fact, the font scale in all of our entertainment products has been increased and can be easily adjusted to improve the readability of on-screen menus, program guides, etc.
  • We have defined a high contrast color theme which can be easily applied to all components within an application with a single change of settings, making our entertainment content easier for everyone to read and navigate.
  • We are designing and developing the experience with movement in mind. Through reduced motion modewe can more easily scale the amount of animation on the screen, creating better viewing experiences for those with motion sensitivity, while keeping the default experience.
  • State of focus, the ability to highlight interactive components for accessible navigation is important for customers with reduced mobility using a screen reader or other accessible technology. We were able to take the state of focus to the next level by using a larger scale, increasing the color contrast between the background color and the graphics, and adding subtle animation to draw attention to the state of focus. . We plan to improve this further in future releases.

With this new design thinking and the new Lightning development framework, we took the opportunity to create a shared component library of Lightning UI components. Accessible design and functionality are built in and help us ensure that detail and dedication to accessibility are standardized across all applications where these components are used. This 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 peers around the world.

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

  • A ability to announce which, if enabled, allows you to express relevant information along the application focus path. For example, when connected to a speech engine, it will read the page title (e.g. Movie), row title (e.g. Scary Movies), and metadata of the entity (e.g. Movie Title) it is on. currently focused, as well as providing contextual information, such as which arrows to press on the remote to navigate the experience or how many items there 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 a larger font.

And to drive inclusive development, we are working on open sourcing of our components and have created sample apps for our partners to take advantage of these inclusive features, so that app developers can more easily design in an accessible way for ours. platform. This helps ensure that we are not only making our experiences accessible, but also helping to ensure that the third-party apps and experiences we support are accessible. Collaboration has always been critical to the innovation and development of our technology, especially when it comes to inclusive product design. This is another example of how our teams are working together and with the wider development community to create better experiences for all.

This is part of our ongoing commitment to making our products, technology and experiences accessible to the widest possible audience. It’s really 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 this to life.

Tom Wlodkowski is Vice President of Accessibility at Comcast Cable

1 A component is a single part of the user interface that can be easily applied in an application.

Leave a Comment

Your email address will not be published.