To provide visually impaired users access to your pages CSS has provided some formatting declarations that will control how your pages are converted to synthesized speech. To date there are no browsers or addon products that
will take advantage of these features. One similar application would be the Hawaii Education Literacy Project’s
Freeware application Read To Me.
Although their program uses proprietary scripting to define how web pages are converted to speech it seems to be a good partial simulation of what will be provided by Aural style sheet declarations in future versions of web browsers.
There are three main groups of Aural declarations that will be available to Authors.
The first group will allow the author to control the volume and flow of the content through pauses. It will also provide a way to combine audio files that will be played in the background at defines times as the text is generated.
The possible declarations include:
volume, speak, pause-before, pause-after, pause, cue-before, cue-after, cue, play-during
The second set of declarations will control the 3D spatial value of the direction of the speech. This is similar to the properties that are found in VRML and Multimedia Games.
Spatial Property Declarations include: Azimuth which positions the sound in a 360 degree plane can be
used to position the direction of the speaker and if more than
one speaker is active then relative positions will be used to
offset their position to reduce confusion.
By using these two declarations if you wanted the sound to come from the lower right you would set Azimuth to right and Elevation to lower.
Voice characteristic properties
The final group of declarations will control the quality of the voice used to generate the synthesized speech. Choice of characters the rate of speech and the ability to control how words are emphasized to provide sentences structure will allow authors to tweak their presentation.
The possible declarations include:
speech-rate, voice-family, pitch, pitch-range, stress, richness, speak-punctuation, speak-date, speak-numeral, speak-time
The first thing we need to do to the form is make it line up nicely. In the old days this could only be achieved with tables – not anymore, courtesy of our old friend, CSS. First, we’ll assign a class to each form item:
Right, let’s go through that CSS bit-by-bit. We gave the label a fixed width of 4em, although this should obviously be increased if the prompt text in the form is anything longer than what we’ve got now (‘name’ and ‘e-mail’). We also specified the width in terms of em and not px so that if users increase the text size the width will increase with the larger letters.
The margin: 0 1em 10px 0 CSS command means the labels will have a margin above them of 0, to the right of 1em (so that the text isn’t up against the input box), a bottom margin of 10px (to create some space between each line) and a left margin of zero. The clear:both CSS command is necessary to ensure the text (‘name’ and ‘e-mail’) starts on a new line.
The submit button has a left margin of 5em so that it aligns with the input boxes, which are 5em from the left. This includes the 4em width and the 1em right margin of the prompt text.
So, putting that altogether gives us this form:
Looks much better, but it’s still rather plain. Let’s use some more CSS to jazz up the form so it’s more inline with the colour scheme on the page.
Applying colours to the form
The three CSS commands we’ll use to make those forms look good are border, background and color (you can also use any other CSS command, such as font, text size, bold etc.).
So, let’s say we want the input boxes in this form to have a dark blue text colour and border and a pale orange background, and the submit button to have black text, an orange background and a dark blue border. In addition to the above CSS, we would add in the following commands:
(#26a is an abbreviation of #2266aa – you can apply this shorthand version with any colour value with repetitive numbers like this.)
We use ‘outset’ for the button’s border so that it looks like a button. If we used ‘solid’ it would look flat. Here’s how the form comes together:
One word of warning, be careful about using a light text colour for text with input boxes. More and more Internet users are using the Google Toolbar which fills in online forms for you. Whenever a form appears it automatically turns the background colour of input boxes to yellow – if you’ve specified white text it would be virtually impossible for your site visitors with this toolbar installed to see what they’re writing when completing the form.
Formatting the whole form
We may want to give this form its own title and border. To do this we add the <fieldset> and <legend> commands to the HTML code:
This article only touches on what you can achieve with CSS and forms. You can pretty much apply any CSS command to a form item, so the only limit is your imagination. Play around with a form and see what you can come up with!
HREF specifies the location and file name and REL indicates the file is a Style Sheet.
Additional Declarations include:
Media is used to define the application of the CSS to its end use. If more than one external style sheet is defined with the link element the Media type would set the proper file to be used for the proper use of the page. The Media definition is not implemented in IE4 or NS4.
You can also define more than one profile with comas between the values.
PRINT – For documents viewed on screen in print preview mode.
SCREEN – a continuous presentation for computer screens.
PROJECTION – paged presentation for projected presentations.
BRAILLE – for Braille tactile feedback devices.
AURAL – aural presentation, e.g. for a speech synthesizer.
ALL – the default value, the style sheet applies to all output devices.
The Title Attribute can be used to define the type of style sheet. Not using the TITLE tag makes your file persistent. This means the Selectors in a file without a title will always be applied to the document.
If you define more than one Style Sheet to be applied to your document you can use the title attribute to group them.
If the Enduser would like to construct their own style sheet they would follow the same method as an author that is constructing an external style sheet. However because the enduser will not be able to prepare style selectors that will override all the possible ID and Class Element Declarations the enduser’s User Agent should be able to ignore server side Style Sheets.
Internet Explorer agents define the client side Style Sheet in the Internet Options – General Tab Under the Accessibility area.