Resources
(home : resources : cascading style sheets)
Layout with Cascading Style Sheets
Examples
Cascading Style Sheets (CSS) enhance accessibility by separating document structure and presentation from content. The information specifying how the page is to be rendered is located in a separate CSS file that may be linked to any number of Web pages. Each time a page is loaded, the style sheet is called to format the presentation of the page.
However, visitors to a Web site can choose to override any formatting the Web author specifies in the CSS, turning CSS in the browser's options or preference settings. This allows them to access the basic HTML code, without any formatting that may create barriers. Alternatively, visitors may choose to view pages using their own user-defined style sheet, customized to meet their individual needs. Internet Explorer 4.+ allows a user to access a CSS file locally to override styles authored by a site's creator. To try this feature, copy the following following CSS code and save it to a file called mystyles.css (any name will do as long as it ends in css).
P {margin-left: 30px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 30pt;}
H1 {margin-left: 10px; font-size: 40pt; font-family: Verdana, Arial, Helvetica, sans-serif; color: rgb(4,4,156);}
H2 {margin-left: 30px; font-size: 35pt; font-family: Verdana, Arial, Helvetica, sans-serif; color: rgb(4,4,156);}
H3 {margin-left: 40px; font-size: 28pt; font-family: Verdana, Arial, Helvetica, sans-serif; color: rgb(4,4,156);}
H4 {margin-left: 50px; font-size: 24pt; font-family: Verdana, Arial, Helvetica, sans-serif; color: rgb(4,4,156);}
A { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 30pt;}
A:visited { color : purple }
A:hover {text-decoration: none; color: red}
Once the CSS has been saved, in IE 4.0 or greater, select Internet Options from the Tools menu. Then select Accessibility. In the dialogue box that appears check all the check boxes under "Formatting" so that current page formatting will be ignored. In the User Style Sheet section of the dialogue box, browse to mystyles.css which you just created, and select it as your user defined style sheet. Choose "OK" to close each of the dialogue boxes, then restart your browser. This style sheet enlarges fonts and adjusts colour, typical of a style sheet that may be used by a person with low vision.
Netscape does not yet support user defined style, though font style, size, and colour options can be modified through the Edit menu, selecting Preferences >> Appearance >> Fonts.
Style sheets were designed to allow precise - outside of markup - control of character spacing, text alignment, object positioning, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and "clean up" the HTML in their documents, making them more accessible at the same time.
The formatting control CSS gives the designer decreases the temptation to misuse structural tags to create visual effects. For example, a common practice is to use the BLOCKQUOTE or UL for indenting. When specialized browsing software, such as a screen reader, encounters elements that are misused in this way, the results can be confusing or unintelligible to the user.
In the example linked above, CSS has been used to create a page layout like that which might be created using tables. Many assistive technologies read across the page one line at a time, reading the first line from the first column, then the first line from the second column, then the second line from the first column, and so on. The resulting audio output from screen readers, text to speech software, and other assistive technology that renders audio output of Web page, is at best confusing, and more often incomprehensible. When CSS has been used to create the columns, rather than using a table, the user has the option to disable CSS formatting. The result of disabling CSS is a linearized layout, with navigation buttons spread across the top of the page rather than down the side, and the columns are set out in rows, eliminating the problems that occur when text layout is side by side. Such formatting options are not possible for users when tables have been used for layout.
