As part of their ongoing efforts to pursue and promote accessibility, the Web Accessibility Initiative ([WAI]) helped the W3C CSS & FP Working Group in the design of Cascading Style Sheets, level 2 (see [CSS2]), which became a W3C Recommendation on May 12, 1998. CSS Style Sheets (levels 1 and 2) give authors a rich palette for designing pages at the same time as they improve accessibility.
As they are implemented in more browsers and authoring tools, style sheets will make life much easier for Web users with disabilities, but also for:
CSS may be used with HTML 4.0 (see [HTML40]) as well as applications of XML 1.0 (see [XML10]). In fact, even more than for HTML, XML authors will need style sheets to describe presentation since XML applications have no generally accepted rendering.
Style sheets eliminate the need for many of the cumbersome font and layout "tricks" that page designers have devised to overcome HTML's limitations. However clever these tricks may be, they often have the unfortunate side effect of making pages inaccessible. Prior to style sheets, authors wishing to display text with a fancy font had to capture the effect in an image. Images not only require more bits than text, they are not searchable and cannot be rendered by speech synthesizers. CSS2's powerful font capabilities (called WebFonts) let browsers download or even synthesize fonts, so that authors can keep text as text and still achieve the desired effect.
Resourceful authors have also relied on images to lay out their pages. Scattering invisible images around a document makes it very difficult for non-visual browsers to identify actual content reliably. Similar obstacles to non-visual browsers include tables used for alignment, and PRE or BLOCKQUOTE elements for indenting and positioning. CSS2 offers several positioning and alignment mechanisms so that content is not littered with spaces or images that challenge non-visual users:
All of these mechanisms emphasize the separation of a document's content from its presentation. When authors design with this principle in mind, everyone benefits since documents become smaller (no redundant presentation tags, fewer images), easier to maintain (external style sheets may be shared, altered without changing the main document, and cached), searchable, faster to download, and usable by speech synthesizers, braille readers, tty devices, cell phones, etc.
CSS2 surpasses CSS1 (see [CSS1]) in user control of styles, audio rendering of documents, positioning, downloadable fonts, table formatting, numbering, and generated text, thanks to contribution from and coordination with WAI.
The "C" in CSS means that style sheets from a variety of sources - the browser, the author, and the user - are interwoven and sorted through a mechanism called "the cascade". In CSS1, the cascade gave authors final say over the rendering of an element. In CSS2, this has been reversed, specifically so that users with accessibility needs can be sure that their requirements will be met. Any rule in a user style sheet that has "!important" overrides any competing author or user agent rule, so that the user always "wins". People requiring large print, or certain backgrounds or color combinations, will be able to control the appearance of the document when browsing.
The new 'inherit' value that every CSS property may take, when combined with "!important", gives users even tighter control of appearance should it be required. For instance, the following style rules force all backgrounds to white and all foreground colors to black:
BODY {
color: black ! important;
background-color: white ! important
}
* {
color: inherit ! important ;
background-color: inherit ! important
}
The cascade allows users, but not authors, to override these rules for special cases if necessary.
Users who are blind, or engaged in eyes-busy activities such as driving, or using a device with limited or no display screen, can find it difficult to stay oriented in the midst of unstructured textual information, or to navigate links and forms on a page.
One way to facilitate orientation is to number lists, paragraphs, sections, etc. CSS2's lists, markers, generated text, and automatic numbering mechanisms allow numbers to be generated for almost any sequence of elements in a document, in a variety of international numbering styles, and with flexible style control. Here's one way to create paragraphs (for legal documents, for example) that are preceded by numbers:
P:before {
display: marker; /* Create a marker */
content: counter(parnumber) ". "; /* for a counter */
counter-increment: parnumber /* and increment it */
}
CSS2's aural properties provide information to non-sighted users much in the same way fonts provide visual information. The following example show how various sound qualities (including 'voice-family', which is something like an audio font) can let a user know that spoken content is a header:
H1 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}
The 'cue-before' property is just one of CSS2's "generated content" properties. In the example above, it is used to signal that an important header (H1) is about to be spoken.
When an author employs header elements correctly -- using them to introduce sections, and not to change font size -- the headers can provide significant information about a document's structure. CSS2's powerful font mechanism will let authors use header elements as intended, allowing browsers to exploit this structural information to generate navigation tools automatically, such as tables of contents and outline views of a document.
While CSS2 eliminates the need for some bit-mapped images, it is not meant to eliminate graphical or pictorial representation of content. Such content, however, also needs to be represented textually (through attributes). CSS2 gives users direct access to alternate text and other attribute values thanks to attribute selectors, the 'attr()' function, and the 'content' property. Attribute selectors match elements that have a certain attribute (such as "name") or value for that attribute (such as "name=submit"). For instance, the following rule only applies when an IMG element has a value for the "longdesc" attribute:
IMG[longdesc] { border: solid green }
Attribute values may also be inserted into a document with the 'content' property. The following rule retrieves the value of the "alt" attribute for an IMG element, and renders it after the image:
IMG:after { content: attr(alt) }
Note that the value of the attribute is displayed even though the image may not be (e.g., the user has turned off images through the user interface).
The W3C Web Accessibility Initiative (WAI) has released a working draft of "WAI Accessibility Guidelines: Page Authoring", which explains good authoring practice in detail as it relates to accessibility. This document also includes a checklist for accessibility, and recommendations for testing accessibility of Web pages."
The W3C Web Accessibility Initiative is pursuing accessibility of the Web through five primary areas of work: addressing accessibility issues in the technology of the Web; creating guidelines for browsers, authoring tools, and content creation; developing evaluation and validation tools for accessibility; conducting education and outreach; and tracking research and development. Depending on an individual's disability (or the circumstances in which one is browsing the Web, for instance on a device with no graphics display capability, or in a noisy environment), graphics, audio content, navigation options, or other aspects of Web design can present barriers.
The WAI International Program Office (IPO) enables partnering and coordination among the many stake-holders in Web accessibility: industry, disability organizations, government, and research organizations. The IPO is sponsored by the US National Science Foundation and the Department of Education's National Institute on Disability and Rehabilitation Research; the European Commission's TIDE Program, and W3C industry Members including IBM/Lotus Development Corporation, Microsoft Corporation, NCR, and Riverland Holding. Disability and research organizations on several continents also actively participate in the WAI.
For more information about the World Wide Web Consortium, see http://www.w3.org/
A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR.
The authors welcome comments: