User:Bartlett/22
./ ADD NAME=CH22.HTML
Hour 22. Accessibility and Print Media
What You'll Learn in This Hour:
The promise inherent in the name "World Wide Web" is an information network that can be used by everyone across the entire world. To a large degree this promise has been fulfilled, although there are still many groups of users whose needs aren't adequately met. To address these needs, the Cascading Style Sheets recommendations included specific support for accessibility by people with disabilities and for internationalization and non-English languages. Related to universal accessibility is the concept of alternate media types. Most style sheets are written for onscreen display in a web browser. However, CSS isn't restricted only to screen display; style sheets can be applied to printed versions of a page as well as to other media types. |
./ ADD NAME=CH22LEV1SEC1.HTML
What Is Accessibility?
[wax ka badal]When we talk about web accessibility, we're talking about the interaction between content and presentation and about ensuring that people who may have disabilities can use the result of that interaction. The content is the information you want to convey to your audience; it's not even necessarily the HTML code, but rather the information embodied by the HTML codeor by a Flash animation, GIF image, or multimedia movie. The presentation is the specific way you choose to express that information to your audience.
A basic principle of accessibility is that these two types of information, the content and the presentation, should be separated from each other. This allows for alternate versions of the presentation to be constructed, conveying the information in a way that the user can perceive it. If the content cannot be extracted from the presentation easily, an alternate version can be provided.
The classic example of this is the alt attribute on the HTML <img> tag (and the <area> tag as well). The content of a visual image is obviously going to be inaccessible to user who is blind; she simply can't see it. However, if a text equivalent of the image is supplied (by the alt attribute), her computer has information about what the image means, and it can provide that to the userfor example, by reading it out loud to her.
Users with disabilities often use assistive technology (AT) to enable access. Assistive technology is a broad category that not only includes Braille terminals and screen readers for blind users, but also includes magnification devices, voice recognition software, specialized input devices for those who can't type or use a mouse, and other hardware and software solutions.
Although assistive technology can solve many problems for users with special needs, it can't solve them all because it can work only with the information that is available. For example, if there is no alt attribute for an image, the assistive technology has no clue what to tell the user about the image's function and purpose. AT alone can't enable access; it requires cooperation from the web developer as well.
How People with Disabilities Use the Web
Most of the time when you hear about web accessibility, the focus is on blind and visually impaired users. The Web is commonly thought of as a visual medium; however, it's more accurate to say that it's an information medium, and the visual representation of information is simply the most common. A mistaken insistence that the Web is meant to be only visual can lead many web developers to inadvertently create websites that are inaccessible to users who can't see well.
A user who is blind commonly uses a screen reader, a software program that uses a synthetic voice to read the output of other programs. Examples of common screen readers include JAWS for Windows (http://www.freedomscientific.com/) and WindowsEyes (http://www.gwmicro.com/). Screen readers depend on a web browser to retrieve and process web pages; for example, JAWS is integrated with Internet Explorer for web display.
Another option is a speaking web browser, which is essentially a browser with a specialized screen reader built into it; examples are IBM's Home Page Reader (http://www.ibm.com/able/) and EmacSpeak for Linux/Unix (http://emacspeak.sourceforge.net/). Also in use are Braille terminals, which display around 40 characters at a time using raised dots in a row.
All these access solutions for blind users dramatically change the experience of using the typical website. Rather than experience the content as a two-dimensional visual display, a user hears (or feels) the content in a sequential, linear order. On most page designs this means having to wade through the navigation options and banner ads before finally reaching the main content of the page.
Users who can see, but not necessarily see well, often employ other solutions to access web content. For some, screen magnification software, which allows sections of the screen to be increased to many times their original size, may be necessary for ease of reading. A user with less severe requirements may simply increase his default font size to allow for comfortable reading.
Color blindness may cause someone to be unable to distinguish content within color graphics or to have difficulty discerning text against the background colors. The use of color as the only means of conveying information can restrict access by users who are color-blind or who can't see at all.
Compared with users with visual disabilities, deaf or hearing-impaired users are relatively fortunate when using the Web because most sites don't make heavy use of sound. However, those users can miss sound cues, audio files, and the sound tracks of multimedia presentations.
Users who are unable to use a keyboard or a mouse often employ creative means to provide equivalent input to their computers. For example, a quadriplegic user who is unable to use his arms or hands may move the mouse pointer by moving a pointer wand worn on his head.
One of the broadest groups of users with disabilities is also the least understood when it comes to web accessibilityusers with cognitive disabilities. This wide category includes everything from relatively simple dyslexia to extreme mental retardation. Many individuals with varying cognitive impairments regularly use the Web as a primary information source, and they should not be discounted as a potential audience for your site simply because of their disabilities.
CSS Enables Access
Because the W3C created the CSS specifications with the needs of disabled users in mind, Cascading Style Sheets, if applied correctly, have great potential to meet the needs of those users. The primary benefit of using CSS is the separation of presentation from content; using CSS with HTML (especially Strict HTML) makes it clear which code is meant for presentational effects and which is the structured information of the page.
The CSS language has many features specifically intended to benefit users with visual disabilities, mainly because style sheet properties primarily define visual appearance. Media-specific alternate style sheets and rules can be created for screen readers, Braille terminals, and Braille printers. Aural CSS properties, described later in this hour, give control over the pitch, frequency, and even apparent location of synthesized speech.
Using relative measurements, such as ems instead of absolute font sizes, allows your style sheets to adapt to user preferences, either in browser settings or in a user style sheet. This lets users with special needs for font or color choices continue to access your site even if the styles you've set are not sufficient for their needs.
Style sheets do little to benefit deaf, hard of hearing, physically restricted, or cognitively impaired users, although a CSS-styled website based on sound usability and design principles will provide benefits for users both with and without these disabilities. Many cognitively disabled users specifically benefit from nontextual information cues, such as color, layout, and graphics.
Accessibility Standards and CSS
To fully test your CSS designs on all possible web browsers and AT devices, you'd have to spend a fortune; you already know how hard it can be to fully test a CSS design on mainstream browsers, and adding assistive technology software and hardware to the mix makes the task nearly impossible. So what is a web developer to do?
The solution is for those with expertise in assistive technologies to gather information on accessibility and create a set of recommendations for web developers to follow. By learning these standards, a web developer won't have to spend time researching every possible access method, but can instead be reasonably sure that a page created according to those principles will be accessible to a broad audience of users.
W3C's Web Content Accessibility Guidelines
The World Wide Web Consortium, in addition to publishing CSS, HTML, XHTML, XML, and other language specifications, also established the Web Accessibility Initiative (WAI). The purpose of the WAI is to create and distribute information on making the Web more accessible to people with disabilities. The WAI has issued guidelines for browser programmers, web editing tool programmers, and web developers that suggest how to improve web accessibility.
Most of us aren't programming browsers or authoring environments, so the WAI recommendation we're concerned with is the Web Content Accessibility Guidelines (WCAG), a list of checkpoints that can be used to measure the accessibility of your website.
Each WCAG checkpoint has a priority rating of one, two, or three, where priority one checkpoints are the most important and priority three the least. The WCAG checkpoints most applicable to CSS design are:
- Provide text alternatives for non-text elements (priority one)
Most images used in style sheets, such as backgrounds or list bullets, are purely decorative, and thus don't require additional alternatives.
- Don't use color as the only way to convey information (priority one)
Make sure that the content can be understood if CSS colors aren't displayed.
- Design pages that function even if style sheets are turned off (priority one)
Test your page in Lynx, or with styles turned off in your browser, to ensure the pages still function properly.
- Style sheets should be used instead of presentational markup (priority two)
After reading this book, this should be an easy one for you to meet! See also [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/app01.html#app01 Appendix A], "Replacing Presentational HTML with CSS."
- Use relative values for styles instead of absolute values (priority two)
For example, use x-large, smaller, or 3em instead of pixels or points for fonts; this is more responsive to users' own preferences.
- Use foreground and background colors that contrast well with each other (priority three)
Colors that don't stand out well cause problems for users with poor vision or color blindness.
This list is far from complete, but these are the checkpoints that are most relevant for CSS developers. If a web page or site conforms to all the priority one checkpoints (not just those listed here), it is said to be Single-A accessible. Meeting the priority one and two checkpoints equates to Double-A accessibility, and Triple-A accessibility means that all checkpoints of any priority level are met.
Many governments, schools, and other public institutions around the world have adopted Double-A accessibility as a standard for their sites; Single-A accessibility is considered the minimum for a public website.
You can use several websites to measure the accessibility of your website. These automatic checkers don't discover every problem, but they can help you get started on solving accessibility hurdles you may have accidentally introduced.
Examples of accessibility evaluators include Access Valet at http://valet.webthing.com/access/, Cynthia Says at http://www.cynthiasays.com/, TAW Online at http://www.tawdis.net/, and WAVE at http://wave.webaim.org/. You can find a full list of accessibility evaluators and other useful online tools on the World Wide Web Consortium's site (http://www.w3.org/WAI/ER/tools).U.S. Government's Section 508
As part of employment and civil rights regulations, the U.S. Federal government requires all agencies to make their public and internal sites accessible to people with disabilities. Known as Section 508 (from the applicable section of the Rehabilitation Act), these regulations affect how agencies can purchase and use information technologyaccessibility is a requirement for hardware, software, and websites employed by the government.
The requirements for web page accessibility are based on the W3C's Web Content Accessibility Guidelines; specifically, most of the priority one checkpoints with a few additions. Those include the following:
- Make online forms compatible with assistive technology.
- Inform users whether a timed response is required, and if so, allow for extra time to be requested.
- Allow users to skip over lists of repetitive links, such as a navigation bar. A common way to do this is to create a link that jumps ahead in the page to the main content.
Many of these requirementsand the WCAG checkpointsdon't deal directly with Cascading Style Sheets and should be handled by the way you create your HTML (and are thus beyond the scope of this book). However, even in those cases, CSS can still be used to enhance the style and accessibility of your page.
| Try it Yourself: Disable Your Web Access
What's it like to be a computer user with disabilities? Most of us who are visually dependentwe are forced to use our eyes to access the Webdon't have a good idea of what it's like to have limitations on our Internet access. Here's a simple exercise you can try that doesn't exactly mimic any specific disabilities, but is useful in raising your awareness:
|
./ ADD NAME=CH22LEV1SEC2.HTML
Aural Cascading Style Sheets
Aural properties for Cascading Style Sheets were first proposed as an extension to CSS level 1 and were incorporated into the CSS level 2 specification. In the CSS 2.1 update, they've been assigned to an optional appendix; they're not widely applicable to, nor supported by, existing browsers. These properties enable you to control the sound properties of spoken text, just as the visual properties control the visual properties of text and other elements.
Browsers That Understand Aural CSS
Unfortunately, this list is quite short. There are no mainstream browsers that support aural CSS properties. The EmacSpeak browser, developed for Linux and Unix by one of the primary authors of the aural properties of the CSS level 2 specification, is the only browser that supports aural CSS.
Currently, screen readers and speaking browsers, such as JAWS for Windows and Home Page Reader, do not support aural CSS either; they use their own rules, which are not fully CSS compliant, to determine how to speak each page. Future versions may support aural CSS, though.
Because of this lack of support, there's little reason today to spend much time with aural style sheets; this is unfortunate because many of the properties are quite useful both for disability access and potentially for general use. Because these properties don't cause any problems in existing browsersthey're all completely ignoredit doesn't hurt anything to include them; there is a very low cost of failure when an aural CSS property is not supported.
Future versions of browsers, screen readers, and other access methods may support aural CSS; one particularly interesting proposal is for multi-modal access methods that would provide both visual and aural renditions simultaneously.
Aural CSS Properties
Rules using aural CSS properties are written just like rules for any other property, with a selector and a declaration of property names and values. You could use the @media selector described later in this hour to limit these rules only to media type aural, although by their very nature these properties apply only to text that is spoken by the computer.
You might think that simply setting rules with the aural media type would allow you to create separate style sheets for blind users with screen readers. For example, this seems a natural way to hide "skip navigation" links:
@media aural { .nav { display: none; } }
Because aural CSS is so poorly supported, I won't give an extensive tutorial on each property; if you want specifics, you can consult the aural properties section of the CSS specification. In this hour I'll just tell you enough to know the general capabilities of aural CSS.
Volume and Voices
The characteristics of the voice speaking the content of the page are determined by several properties relating to volume, pitch, and other qualities. These properties are listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch22table01 Table 22.1] along with the range of values allowed.
| Property Name | Values |
| pitch | frequency, x-low, low, medium, high, x-high, inherit |
| pitch-range | variation-number, inherit |
| richness | richness-number, inherit |
| speech-rate | words-per-minute, x-slow, slow, medium, fast, x-fast, faster, slow, inherit |
| stress | stress-number, inherit |
| voice-family | specific-family, generic-family, inherit |
| volume | volume-number, percentage, silent, x-soft, soft, medium, loud, x-loud, inherit |
The voice-family property is similar to font-family; you can define a specific voice, which may or may not be supported by the aural CSS browser, or you can use one of three generic voice families: male, female, or child. There's no standard list of voice types beyond this, and so the use of specific voices (such as robot, Spock, or "Britney Spears") depends on the browser.
Pausing and Cues
Aural CSS properties enable you either to insert pauses to break up the aural reading, either before or after an element, or to insert specific sound files, called audio cues. These properties are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch22table02 Table 22.2].
| Property Name | Values |
| cue | Shorthand property, setting cue-after and cue-before |
| cue-after | sound-url, none, inherit |
| cue-before | sound-url, none, inherit |
| pause | Shorthand property, setting pause-after and pause-before |
| pause-after | time-measurement, percentage, inherit |
| pause-before | time-measurement, percentage, inherit |
Cues are normal sound files, usually .wav or .au files, and are indicated by url() notation. Pauses are measured in seconds (s) or milliseconds (ms), such as 2s or 30ms.
Three-Dimensional Sounds
Most humans without hearing impairments hear sound in three dimensions. Aural Cascading Style Sheets enable you to designate a specific location, within three dimensions, from which a sound could originate. Consider a transcript of an interview, marked up with voice properties similar to those of the appropriate speakers, where the interviewer's voice is heard on the left side, and the subject of the interview is heard on the right. A question from the audience could come from behind and below while an overhead announcement originates from directly above the listener.
The properties that place each sound in a specific location are shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch22table03 Table 22.3].
| Property Name | Values |
| azimuth | angle, left-side, far-left, left, center-left, center, center-right, right, far-right, right-side, behind, leftwards, rightwards, inherit |
| elevation | angle, below, level, above, higher, lower, inherit |
Angles are measured in degrees (deg), grads (grad), or radians (rad), such as 90deg, 100grad, or 1.571rad, which are all (approximately) a right angle. A 0deg azimuth is directly in front of the listener, and 0deg elevation is level with the listener.
Choosing What to Speak
Just as the display and visibility properties let you hide what is shown visually, aural CSS also lets you control what is vocalized and how that's done. You can even add the equivalent of a background image by specifying a background sound to be played while an element is spoken. These properties are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch22table04 Table 22.4].
| Property Name | Value |
| play-during | background-sound, mix, repeat, auto, none, inherit |
| speak | normal, none, spell-out, inherit |
| speak-header | always, once, inherit (table cells only) |
| speak-numeral | continuous, digits, inherit |
| speak-punctuation | code, none, inherit |
The play-during property enables you to specify whether a background file is mixed in with any other background sounds already playing (from a containing element) or whether it replaces the other sound.
./ ADD NAME=CH22LEV1SEC3.HTML
Media-Specific Style Sheets
[wax ka badal]Using CSS, you can create style sheets that are media specific, meaning that they should be applied to only one particular type of output device. An output device is any physical hardware device that can present web contentvisually or otherwiseas well as the software necessary to allow for that presentation, such as a printer driver or a screen reader.
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch04.html#ch04 Hour 4], "Using CSS with HTML," you learned the basics of the <link> element and its attribute media, which enable you to tie style sheets to categories of output media. In this hour, you'll expand your knowledge of media types and learn how to write rules within one style sheet that apply to different media.
Categories of Media Types
The full list of media types defined in CSS is listed on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch22table05 Table 22.5]. A given browser is required to support only those media types appropriate for that browser. For example, a set-top box doesn't need to support screen, aural, or print media types. The typical visual browser uses two media types: screen and print. Opera also supports the projection media type in full-screen kiosk mode.
| Media Type | Description |
| aural | Pages read out loud by synthesized voice; for example, screen readers for the blind. |
| braille | Content represented by raised dot characters on Braille terminals for blind users. |
| emboss | Pages printed out as raised dots in Braille, on thick paper. |
| handheld | Content displayed on a limited-size handheld screen. |
| Pages printed out on paper. | |
| projection | Content displayed as slides or transparencies projected on a large screen. |
| screen | Pages displayed on a color monitor. |
| tty | Content printed on teletype devices or other media with limited display capabilities, which print only characters of a fixed size and type. |
| tv | Pages displayed on a television screen, possibly taking advantage of sound capabilities but with limited interaction. |
Media type values are used in <link> tags and @import rules for the purpose of specifying which style sheets to use, and they are also used to classify certain rules within a style sheet as applicable.
The media types described here are obviously not enough to fully capture the diversity of access methods available to web users of the 21st century. For example, the handheld media type assumes that a handheld device will be monochrome, but we've already seen a number of color handheld devices become available. Also, there is a large difference between a PDA, a pocket computer, and a cell phone, although these are all grouped under the term "handheld."
The W3C realizes these deficiencies and is developing a better classification system for the CSS level 3 recommendation; you can read the current drafts at http://www.w3.org/Style/CSS/current-work. Also, the W3C's Composite Capabilities/Preferences Profile (CC/PP) work is moving toward a standardized way of describing end-user device characteristics; see http://www.w3.org/Mobile/CCPP/ for more.Linking and Importing Media-Specific Style Sheets
You've already seen in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch04.html#ch04 Hour 4] how to use a media type with the <link> tag in HTML:
<link type="text/css" rel="stylesheet" media="print, emboss" href="paged-output.css">
Such a link would load only the style sheet if the browser were currently printing to a standard or Braille printer.
An @import rule at the beginning of a style sheet can also be set to specify style sheets applicable to certain media types:
@import url("site.css");
@import url("screen.css") screen, tv;
@import url("dots.css") braille;
These rules always load the site.css file, and load screen.css for display on a computer or television screen and dots.css for a Braille display terminal.
Using the @media Rule
Within the same style sheet, you can mix rules for different media types by using an @media rule. This is a special type of rule that surrounds your other CSS rules and applies them only to certain media types. The basic form of this rule is
@media media-type {
selector { declaration; }
selector { declaration; }
...
}
That last curly brace is important because it marks the end of the @media rule. Any rules within the @media rule's braces are applied only to the media type listed. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch22ex01 Listing 22.1] has several examples of the @media rule limiting certain rules to only certain types of output devices.
Listing 22.1. A Style Sheet with @media Rules
/* media-rules-22.1.css */<br /><br />@media print {<br />body { font: 10pt "Times New Roman", serif;<br />color: black; background-color: white; }<br />.footer { border-top: 1px solid black;<br />font-size: 8pt; }<br />}<br /><br />@media screen {<br />body { font-family: Verdana, sans-serif;<br />color: white; background-color: #330000; }<br />.footer { padding: 2em; font-size: smaller;<br />border: 1em solid green; color: #330000;<br />background-color: white; }<br />}<br /> |
./ ADD NAME=CH22LEV1SEC4.HTML
CSS Properties for the print Medium
By far the most common medium you'll be concerned withbesides screenis print. Nearly all computers have printers attached, and it's common for users to print a page as a way of making a permanent copy of the content.
CSS rules can be used to format the appearance of the printed page. You can control the layout, fonts, line spacing, display characteristics, and more, separately from the way a page is displayed on the screen. A specific style sheet for printing is a nice addition to any CSS-based website.
Browsers and Printing
Printing a web page is often a risky proposition. The combination of text, tables, style rules, frames, and low-resolution GIF images often results in a poor-looking printed document. Most of the time, browsers don't print nearly as well as they display onscreen. You can overcome some of these problems with a print style sheet.
To link in a style sheet for printing, simply use the HTML <link> tag as described previously. You can also use an @import rule or an @media rule in the main style sheet with the appropriate media type. Multiple <link> tags let you provide one style sheet for rules common to all media typesone for screen display and one for printing, like the following:
<link type="text/css" rel="stylesheet" media="all" href="all.css"> <link type="text/css" rel="stylesheet" href="screen.css"> <!-- default value for media attribute is screen --> <link type="text/css" rel="stylesheet" media="print" href="print.css">
Measurements for Printing
When you're creating a style sheet for printing, you can use additional units of measurement that would be inappropriate or meaningless on a computer monitor. These units correspond to real-world units of measurement used in printing and are listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch22table06 Table 22.6].
| Unit | Measurement |
| cm | Centimeters |
| in | Inches (1in = 2.54cm) |
| mm | Millimeters (1mm = 0.1cm) |
| pc | Picas (1pc = 12pt) |
| pt | Points (72pt = 1in) |
These units can be used with any CSS property that requires a measurement value. For example, the following rule sets a padding value in centimeters:
@media print { h1 { padding: 1cm 2cm 1cm 1cm; } }
Designing CSS for Print
When creating style rules or style sheets for the print medium, it's important to remember how the medium differs from the computer screen. The point of using a different style sheet for print is to make the resulting hardcopy easier to read and use.
Many printers out there will be black-and-white, although color printers are used often. However, many users avoid printing in full color simply to save ink. Therefore, you want to make sure you're not relying on color entirely.
A printed page is clearly not interactive. When someone is printing a page, they're usually doing it for the content. Therefore, things such as navigation bars and hypertext links are pretty useless. You can't click on a piece of paper.
The display, visibility, and text-decoration properties can help with this. You may want to enclose your navigation bar in a