Web Posted on: February 16, 1998

STYLISH INFORMATION ACCESS: CASCADING STYLESHEETS ON THE WORLD WIDE WEB

Kevin Nguyen
Adaptive Technology Resource Centre
University of Toronto
k.nguyen@utoronto.ca

and

James Allan
Texas School for the Blind
allan_jm@tsb1.tsbvi.edu

An Overview of CSS

Cascading StyleSheets (CSS) is a rules-based language that specifies how HTML documents are presented in a web browser. CSS works in conjunction with preexisting web pages. It allows style and format (specified in CSS) to be separated from content and structure (contained within the HTML document). This has application for increasing access to people with disabilities who may be accessing web pages through adaptive technology systems or alternative browsers.

Cascading stylesheets declare how HTML elements in a document are to be rendered. The language uses common desktop publishing terminology and has a complexity comparable to HTML. It is simple enough to construct a stylesheet in a text editor, although there are also many utilities and web authoring tools that support cascading stylesheets. A CSS consists of a set of one or more "rules" where a rule has the syntax of: SELECTOR { PROPERTY : VALUE(S); }. Consider the following example:

H1 { font-family: Arial; color: yellow; text-decoration: underline; }
P { font-size: 15pt; }

This very simple stylesheet has two rules, each controlling the format of HTML elements, H1 (header level 1) and P (paragraph). Each rule contains a selector plus its declarations in braces. The 3 declarations for H1 are separated by semicolons and specify typeface, font color, and text attribute, respectively. The P selector rule only has one declaration for font size. This has a declaration property of "font-size" with its associated value of "15pt". If an element is not specified in the stylesheet then that element will be displayed based on

default HTML guidelines and browser settings. Full CSS recommendations are available at the World Wide Web Consortium web site at http://www.w3.org.

Web page authors can now focus on using HTML to exclusively define the structure of a document with headers, paragraphs, lists, and bolding, while using CSS to control the format of presentation, including margin widths, white space, font weight, etc. This eliminates the need to resort to complex web design "tricks" such as such as one-pixel gifs, invisible table borders, and invisible text for spacing. These "tricks" muddle document structure and impede web access.

Through CSS an author can specify a certain class of hyperlinks to be, for instance, uppercase, Arial font with a red underline. Likewise, a reader can also ask hyperlinks to be yellow, 36 point Courier with a thick orange border. There are several ways to link stylesheets into an HTML document:

1. CSS rules can be embedded into the HEAD of an HTML document. The rules are placed between a <STYLE> tags. Fortunately, syntax allows the author to "hide" the stylesheet from older browsers by placing the rules within a standard HTML comment:

2. Authors can link the HTML document to an external stylesheet file using the <LINK> element with the syntax: <LINK REL="stylesheet" TYPE="text/css" HREF="url of stylesheet file" TITLE="title">
3. Authors can import rules into their embedded stylesheet using the @import CSS inclusion mechanism. That will potentially allow external stylesheets rules to be merged with existing stylesheet rules. The syntax is: @import url(url);
4. Some HTML elements can use the inline STYLE attribute to manipulate its presentation. For example: <P STYLE="color: blue">Only this paragraph is blue.</P>
5. Some web browsers support reader-stylesheets that let users specify a local CSS file to use for formatting all web pages viewed. Some browsers also give users the option to turn stylesheets off.

The fact that both author and viewer can impose stylesheets in the same web page raises the question of who has control of the presentation. An author may insist that their page design is to be maintained at all instances while the reader asserts that they have the right to alter presentation to meet his or her needs, which can include increasing accessibility, legibility or usability. Where does the balance rest?

The Cascade: Who Has Control? (Author Versus User)

With the multiple ways to incorporate CSS rules into a web page there is a question of how much control is with the author and how much control is with the viewer. Both the author and the reader have the ability to apply stylesheets to web pages, however user-specified CSS rules should always have precedence over author-specified rules. This is oddly and unfortunately is not the case with the current implementation of reader-stylesheets and Microsoft Internet Explorer 4.0. If the viewed web page has CSS rules then these are given precedence over the reader stylesheet. This flaw can be overcome if all reader-stylesheet declarations use an "!important" modifier. The !important declaration can raise the priority of a CSS rule with respect to multiple, conflicting rules and thus can resolve which properties should be applied to a particular element. Again, a reader's !important rule SHOULD always override an author's !important rule but with the first implementation of reader-stylesheets the author is given more control. Internet Explorer is the first browser to provide user definable stylesheets but others should follow. Both the browser companies and the CSS specifications working groups should determine cascade control between user and author and give ultimate precedence to the end-user. There should at minimum be a way for users to turn off author stylesheets before applying a reader-stylesheet. This has pertinent implications for optimizing access.

The "cascading" component of cascading stylesheets specifically means that there is property inheritance, rule nesting and graceful degradation / aggregation of CSS properties. A relatively complex set of selection criteria exists for determining which rules in the cascade get precedence. These are based upon the specificity of the rule, the order in which they occur in the document, the proximity of the stylesheet and whether or not it is declared important. As reader-stylesheets gain popularity, their position in the hierarchy of the cascade should be addressed and placed at the top most level. This is absolutely necessary before CSS becomes a feasible access tool.

CSS Developments Related to Access

CSS1 is the most recent version of the Cascading Stylesheet language. Many current browsers and authoring tools support a set of CSS1 Core Features. There exists limited support for CSS1 Advanced Features that provide formatting control in applications that support them but are simply ignored by applications that do not. This presents a possibility for creating sets of Advanced CSS Access Features that would be disregarded by standard CSS parsers but would enhance presentation for users with disabilities using adaptive technology. A potential for using access specific fonts (BLISS, etc.) is also there.

The World Wide Web Consortium is currently drafting specifications for CSS2. Many provisions are being proposed that directly addresses accessibility or has applications for indirectly enhancing accessibility. There are currently ten planned media types for CSS2 that allow the linking of stylesheets for different media outputs types: <LINK REL="stylesheet" TYPE="text/css" HREF="url" TITLE="title" MEDIA="media-type">. Four of them are directly related to access:

1. Aural - Specifications for aural (cascading) stylesheets (ACSS) are being proposed and are intended for speech synthesizers.
2. Braille - Intended for Braille tactile feedback devices (i.e. Refreshable Braille displays).
3. Embossed - Intended for paged Braille print output.
4. TTY - Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.

Since there exists a wide range of browsers and web page viewing devices (PDA, assistive devices, WebTV) it makes sense that different sets of presentation rules exist for each one.

Blind / Print Impairments:

Since CSS is used to separate content from format, the resulting HTML source code is much cleaner. Screen readers can then simply ignore the CSS markup and present the underlying structured document without stumbling over HTML "tricks" previously used for managing format. Column layouts and invisible tables may become less of an access problem since its possible to create "panels" of text that have a meaningful order and that will revert to a non stylized version if stylesheets are turned off.

A user can easily use a reader-stylesheet to change all bulleted lists (unordered and definition lists) to become numbered lists, this may help an individual with a visual impairment identify their position in any lists. There are many features planned for CSS2 that have the potential to benefit screen reader accessibility. For example, the ability to specify Z-order, or the layering of information through stylesheets can increase accessibility. Some web page authors currently layer pertinent information using the limited BACKGROUND element. The use of a CSS2 Z-order function will ensure that a screen reader can gain access to layered information.

If a person is using a screen-reader that is able to take advantage of the aural stylesheets (a CSS2 specification proposal) then the pages can be presented in a far more accessible, information-rich manner than usual. Aural stylesheets will widen the existing bottleneck that current screen readers have. Today's mono-voice speech synthesizers have difficulty fully translating the graphically rich environment of software applications, GUIs and web pages. Aural stylesheets will be able to encode meaning in the audio delivery of the document elements through alterations in voice, pitch, stress, spatiality and use of auditory icons (sound effects). However, we revert back to the question of whether control lies with the user or the author. Many of these audio enhancements are subtle and do not map directly to a predefined meaning. A call for standards is needed or else hyperlinks could sound different for every page. Perhaps a universal audio "look-and-feel" for Web pages should be set and standardized.

Braille stylesheets specifications are being proposed for refreshable Braille displays. Emboss is a proposed media type for defining Braille printer output. Both media formats have differences in optimally presenting information. Having CSS specification for various media types ensures that full control over output is available for optimization. For example, page breaks need to be defined for Embossed Braille output.

TTY is another proposed media type. Since Teletype can only display monospace, text characters web authors should ensure that all pertinent information of a web page is presented as text. If a web site properly adopts a TTY media type this is essentially equivalent to a text-only version of the page. However, a reader that applies a TTY media-type CSS will not necessarily be successful at converting all the information in a graphics intense web page to a text-only page.

Low-vision:

Persons with low vision can choose to use a reader-side CSS to increase the size of information on the screen. This can have advantages over some screen magnification systems. Some screen magnifiers simply perform "dumb magnification" of the screen pixels which causes jagged lettering which is difficult to read. With CSS you can choose scalable system fonts that will render smooth characters. Also, as the font size in the browser window increases text will usually wrap appropriately and the user can easily move through the text with only the vertical scroll bar or up / down arrow key. This is unlike some screen magnification modes that simply zoom a lensed portion of the screen causing the user to deal with both horizontal and vertical tracking of the document.

Other aspects of presentation can be enhanced for visibility through CSS. The text and background color can be easily manipulated to increase contrast. Some users may prefer a dark background and light-colored text. Also web graphics and tiled background images can be removed. Hyperlink color can be customized to better distinguish between visited, active and unvisited links. The borders of anchored images can also be thickened to better distinguish hyperlinked images from unanchored images. Other features such as line spacing, margins, table formatting can be altered to user preference. CSS2 may have provisions for magnifications that will enlarge images in relation to text so that layout is maintained. CSS is not a substitute for a screen magnification system though. CSS will only enhance the visual presentation of the document area. If the application itself needs to be enlarged then dedicated screen magnifier is still required.

LPCSS Editor is a small freeware utility that automates the creation of large print cascading stylesheets. The LPCSS Editor can be downloaded for Windows from the Adaptive Technology Resource Centre at: http://www.utoronto.ca/atrc/css/CSSedit.zip (19K)

Physical Disability:

Persons with physical disabilities who have limited motor control or are using an alternative mouse system can benefit from custom CSS. The hyperlink targets can be increased in size either by increasing the font or by activating large areas around the targets. Many CSS enhancements that benefit the low vision population can also benefit this population as well.

Learning Disability:

CSS can be used to add information cues and reinforcement to web page functions to help individuals with learning disabilities. It is possible to apply color coding or even icon/symbol coding to reinforce the presentation of an HTML page. For example, a user can define all H1 headers to be red with an exaggerated font weight. All hyperlinks could have a huge Sea Anchor icon beside them, or there can be a forced display of all anchored image borders to clearly indicate which images are functional and which images are decorative. If a user is in the early stages of reading development he or she can specify that the entire page be rendered in capital letters.

Contextual selectors can be used to specify declarations of specific elements (i.e. LI UL LI will select a list item in a UL that is in another list item). This can be used to highlight or separate out nested lists. Pseudo-class based simple selectors allows adjustment of formatting based on information from the browser itself and not the HTML markup. Thus the status of hyperlinks (visited, unvisited, active) can be differentiated by font color and size. CSS2 also proposes to have dynamic cursors that change size and form depending on which elements you move over. Using aural cascading stylesheets, a combination of visual and aural presentation can help enhance comprehension. Many of these features have the potential to enhance pages for persons with disabilities as well as increase page usability for users in general.

Discussion

For CSS to format properly it is important that web pages contain 'grammatically correct' markup since the CSS is intimately linked to the underlying HTML document structure. This enforcement of correct and simple HTML and the reduction of webmaster formatting "tricks" will help ensure that pages are rendered more accessible for adaptive technologies such as such screen readers. As long that the original HTML markup preserves the structure of the document, then that document will still be clearly presented if viewed by a browser that does not support CSS. Furthermore, authors will no longer need to design their sites to the "lowest" common denominator and can easily accommodate multiple views. Because multiple stylesheet can link to and re-render the same set of web document it is very quick and convenient to offer alternative streams of a web site. Any designer can almost instantly create a large-print, high contrast version of their web site without modifying the corpus of underlying HTML documents.

Aside from CSS2, Document Style Semantics and Specification Language (DSSSL) is another upcoming mechanism that can provide interactive functionality to the presentation of stylesheets. It is a complex and powerful procedural language opposed to the relatively simple CSS rules-based language. With it users can create a dynamic table of contents, a dynamic index of hyperlinks, a method to report number of links, lines, or words in the page, the ratio of alt-text instances to images, and the potential to generate other access-related queries.

Authors can now keep HTML structure simple, focus on content, and use CSS to embellish design. But use of CSS does not necessarily equate accessibility. It is still important to ensure that authored pages make sense if viewed with a non-CSS compliant browser. For a web author to put too much formatting control into the stylesheet is dangerous since a reader may opt to use their own CSS or disable them completely. Web pages should be coherent with or without the CSS rules. Likewise, a reader must be aware that there will be some pages that will remain inaccessible no matter what their reader-stylesheet declares.

Stylesheets have been around before HTML, but are starting to gain web popularity. The integration of access provisions in CSS2 will hopefully lead to interest in increasing the accessibility of other structured document languages such as the document object model (DOM), Standardized Generalized Markup Language (SGML) and Extensible Markup Language (XML). To ensure that users have optimal access to documents, a means of customizing presentation along with establishing standards is required. Usability studies should be conducted to determine the best aural representation of stylistic information, the most effective colors and fonts under magnification systems, and the preferability of defining absolute units or relative values? Access experts should create a public domain library of accessibility stylesheets that web authors can link to and learn from. Only after these things are done can the public fully exploit stylesheets to increase access to the web and other structured documents.

Select References

Graham, Ian. HTML Stylesheet Sourcebook, Wiley Computer Publishing,

Toronto, 1997

Lie, Håkon W. and Bos, Bert. Cascading Stylesheets Level 1 W3C Recommendation, Dec 17, 1996, World Wide Web Consortium, http://www.w3.org/TR/1998/WD-css2-19980128/

Multiple authors. Cascading Stylesheets Level 2 Working Draft, Jan 28, 1998, World Wide Web Consortium, http://www.w3.org/TR/1998/WD-css2-19980128/

Pozadzides, John and Quinn, Liam. Style Sheet Dependence, Web Design Group, 1997, http://www.htmlhelp.com/reference/css/dependence.html

Full References

For full references, presentation slides and illustrative examples of access cascading stylesheets please go to http://www.utoronto.ca/atrc/cssaccess/

Go to the top of this page. | Go to the upper category.