Media to provide access for special users

Media Types

Media types aren't restricted to screen and print. In the future, we might also be able to use:

• handheld — for handheld devices like PalmPilots
• projection — for projectors or printing to transparencies
• tv — for television
• tty — for teletypes or terminals that use fixed-pitch character grids
• aural — for speech synthesizers
• braille — for braille tactile feedback devices
• embossed — for paged braille printers
• all — for all devices

Print it

Remember the first time you printed out a Web page? It was disappointing. What's optimized for the screen can look odd on paper. With CSS2, you can actually have a different set of stylesheet rules depending on the media. That is, you could have one style for your page on-screen and a different style for your page when printed. This is done with @media.

@media screen {
  BODY { background: black; color: white }
  P { font-family: verdana, sans-serif }
  }
 
@media print {
  BODY { background: white; color: black }
  P { font-family: times, serif }
  }

The above code tells the browser to display white Verdana text on a black background on-screen. But if the page is printed, it will be in black Times text on a white background. Each page is easily optimized for its output method.

The sample style sheet provided by W3C concentrates on page margin,
and { page-break-after: avoid; page-break-inside: avoid } for selected elements.

Colour wisely

DO use blue, yellow, white and black if you really must use colours to distinguish items. These combinations are less likely to be confused than others.
DON'T use [red, green, brown, grey, purple] [next to, on top of, or changing to] [red, green, brown, grey, purple].

DO have a strong, bright contrast between foreground and background colours- not only for your page text but also in your images. Even totally colour blind readers can differentiate similar colours which contrast bright with dark.
DON'T use colours in images to denote special areas, such as bar charts, maps and navigation bars. Consider using textures or line shading instead (try the "paper" or "pattern" function in your graph or painting program). Alternatively, provide additional written labels.

DO provide labels next to any coloured indicators. For instance, if you have a red warning light and a green OK light, write "WARNING" and "OK" next to each one, or use numbers or symbols (avoid crosses and ticks as their interpretation varies internationally). Consider some kind of sonic, flashing or animated indication.
DON'T use single light bulbs that change colour from red to green, red to yellow or green to yellow under any circumstances. They are the work of Satan and you will burn in hell for all eternity. Blue-changing lights are marginally more acceptable.

Good programers remember to provide access for special users

7.3 Recognized media types

A CSS media type names a set of CSS properties. A user agent that claims to support a media type by name must implement all of the properties that apply to that media type.

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. In the following list of CSS media types, the parenthetical descriptions are not normative. They only give a sense of what device the media type is meant to refer to.

all

Suitable for all devices.

aural

Intended for speech synthesizers. See the W3C section on aural style sheets for details.

braille

Intended for braille tactile feedback devices.

embossed

Intended for paged braille printers.

handheld

Intended for handheld devices (typically small screen, monochrome, limited bandwidth).

print

Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the W3C section on paged media for information about formatting issues that are specific to paged media.

projection

Intended for projected presentations, for example projectors or print to transparencies. Please consult the W3C section on paged media for information about formatting issues that are specific to paged media.

screen

Intended primarily for color computer screens.

tty

Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.

tv

Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Media type names are case-insensitive.

Due to rapidly changing technologies, CSS2 does not specify a definitive list of media types that may be values for @media.