Accessible CSS – Azimuth and Elevation

This morning, I came across this CSS property that I’ve not seen before whilst I was having a look at whats available in CSS for special devices, like screen readers.

CSS 2 introduced the azimuth CSS property which is effectively targetted at users browsing the web with screen readers. I’m not sure that any of the visual browsers (Firefox, Safari, Internet Explorer etc) make use of it at this point in time.

Basically, azimuth allows you to specify what angle audio is coming from, either by specifing a direction, such as center, center-left, left etc, or by specifying an angle between -360 degrees and 360 degrees.

It can be applied to any HTML element and is inherited from the parent element.

So on a device that will read the website text out loud, where the speakers are capable of handling the directional functionality, azimuth means you can have one piece of text coming from the left, another from the right, some from behind, some from in front, as well as any other direction in a full circle.

The syntax is fairly straight-forward:

p.left-source { azimuth: left; }

This will make the audio source for p.left-source to appear to be coming from in front to the left (320 degrees). To have the audio source completely to the left, we would use:

p.left-source {azimuth: left-side; }

All available positions written this way are:

left-side

far-left

left

center-left

center

center-right

right

far-right

right-side

Now, to get the audio behind us, we just add behind before the property, so:

p.behind-left { azimuth: behind left; }

If we want to control the azimuth based off an inherited property, for example where a containing div is set to center, and you want to set a different position based off of that for the p tags within it, you could use:

p.leftwards { azimuth: leftwards; }

This will move the position 20 degrees to the left (counter-clockwise) of the parent element. Similarly, using rightwards will move the position 20 degrees to the right (clockwise) of the parent.

To really get fine grained control of it though, we can specify individual degrees as I mentioned earlier. This is done by:

a.left-nav { azimuth: 300deg; }

or

a.right-nav { azimuth: 60deg; }

Similarly, you can use negative values:

a.left-nav { azimuth: -60deg; }
a.right-nav { azimuth: -300deg; }

Azimuth is complemented by the elevation property which allows the audio position to appear to be anywhere between 90 degrees and -90 degrees, so where azimuth controls the horizontal direction, elevation controls the vertical direction.

Utilising elevation is very similar to azimuth, but with less pre-defined positions since you only have 180 degrees to play with. The pre-defined positions are:

below

level

above

Below will put the position at -90 degrees. Above will put it at 90 degrees, and level will put it at 0 degrees.

Similar to the leftwards and rightwards values for azimuth, elevation has higher and lower which add or subtract 10 degrees to the position based on the position inherited from the parent.

Just like azimuth, you can also use the degrees themselves for more fine grained control over the position.

These two properties allow for some fun and creativity in where the sound seems to come from on audio based devices, which can assist in getting people with disabilities, in particular blind people, more involved in your website. Just don’t be annoying with it!

Keep in mind, that if your audio is constantly changing direction, it’s about as bad as those horrendous flashing, animated backgrounds that were popular for a while many years ago!

Enjoy it, accessibility is both yours and your readers friend.

For some diagrams to illustrate the direction of the audio properties, have a look at XHTML.com’s azimuth and elevation pages.