Accessibility and usability for interactive television

Lately I’ve had reason to do some research on accessibility and usability for interactive television, ITV. I can’t reveal too many details at this time, but I have been looking at ITV applications that are based on web technologies: HTML, CSS, and JavaScript.

Basically these are web applications displayed on a television set by a set-top-box running a custom browser based on Mozilla. Considering how hard it was to find information on accessibility and usability in the context of interactive TV, I’d like to share some of what I have found to help others that may be looking for this kind of information.

If you have worked on similar projects, please do share some of your knowledge.

Background

The applications are based on web technologies to make it possible to use them with other browsing devices than the set-top-box. Full interoperability will not always be easy or even possible, but that’s what we’re aiming for.

The goal is to provide easy access to services and information to all people, not just those that have a computer with a broadband connection. That includes older people and people with disabilities. So basically we’re talking about websites built with web standards and best practices for accessibility.

What makes these applications different is that they are displayed on a TV screen instead of a computer monitor, and you use a remote control to navigate them instead of a keyboard and a mouse. And those are pretty major differences.

Important differences compared to the web

I’m going to list some of the areas that designers and developers used to creating normal websites need to take into account when working with applications for ITV.

Keep in mind that this list is by no means complete. And since I don’t have a whole lot of experience in this area myself, I will happily accept corrections and additions.

Screen size: Television screens are often larger than computer screens, but the resolution is lower. And scrolling, though possible, is nowhere near as comfortable as in a web browser on a computer.

You need to design content around screenfulls. Small screenfulls. You may think that isn’t so bad. But just wait, there’s more.

The resolution of a PAL TV is 720 by 576 pixels (the NTSC system used in the US has a slightly different resolution, but that is outside the scope of this article). Then there’s the title safe area you need to take into account. Yup, that removes another 20% of the available width and height. What you’re left with is an area of 576 by 460 pixels which you can be confident that the user can see on their TV screen.
Rectangular pixels: TV pixels are rectangular (wider than they are tall), not square like those on a computer screen. So if you use a graphics app like Photoshop to create graphics you need to be aware of this, or circles will become ovals when they are viewed on the TV. Fortunately the latest Photoshop versions have support for non-square pixels and even let you switch view modes between square and rectangular pixels.
Interlacing: Computer screens use progressive scan – each frame is made up of the entire screen area from top to bottom. On a CRT television set, however, each frame is made up of two fields that are interlaced. This makes thin horizontal lines vibrate or flicker.

To avoid that, you need to use thicker or slightly blurred horizontal lines.

TV sets that use plasma or LCD technology convert the interlaced picture to progressive frames before displaying them. But the vast majority of people are still using CRT televisions, so that’s what you’ve got to design for.
Colour and contrast: You are limited to a smaller range of colours on a TV. Fully saturated colours and some colour combinations tend to bleed. The picture is generally much more fuzzy than that of a computer screen.
Fonts and readability: Because of the greater viewing distance you need to use larger text on TV than on a computer screen. That’s right. You get a much smaller area to play with and on top of that you also have to make text larger.

And then there’s the interlacing issue, which tends to make thin horizontal lines vibrate or flicker. So be careful with serif fonts. The best thing is to use a typeface that is specially designed for TV. If that is not an option, go for a sans serif or slab serif font that is designed for on-screen reading. You will also want to increase line height a bit and add a little bit of letter spacing to avoid individual letters bleeding into each other.
Viewing distance: Where are you normally when you’re watching TV? Not in an office chair in front of a desk, right? Of course there are exceptions, but the normal viewing distance is much larger for television than for computers. That makes the image that reaches the eye smaller. So you need to make text and important graphics larger than if the application would have been viewed on a computer screen.
Navigation: The main navigation tool for ITV is the remote control. Other options like wireless keyboards and mice are available, but the remote control is the default. So make sure not do design any fancy fly-out menus and other stuff that relies on precise mouse control to use.
Sound: Websites rarely use sound. Television uses sound a lot. Speech needs to be made available to people who can’t hear. You can do that either by using captioning or by translating the speech to sign language.

Also make sure that any sound that contains speech is clear, with no distracting noises or background music. If that isn’t acceptable, provide an option for the user to choose a “clear” sound channel with no distractions.

Beyond the obvious

Those are some of the most obvious areas where viewing a web-based application on a television is different than viewing it on a computer screen.

Has anyone else out there done any work related to interactive TV? Care to share some good tips? As you probably know, there’s far less information available than for website usability and accessibility, so let’s change that.

Posted on December 1, 2005 in Accessibility, Usability