Sunday 24th of September 2017 01:28:47 AM

CSS Style Guide

XHTML: Accessibility Tips

The library is committed to serving the entire public, and that means striving to ensure that all pages of our site are accessible to the greatest possible number of people and devices (including audio browsers, Braille readers, and other specialized browsing environments).

In addition, accessibility is now U.S. law for all government and publicly funded sites.

Education and Compliance

The following links can help you develop pages that comply with accessibility laws and guidelines:

WAI Accessibility Guidelines
These guidelines offer compliance tips, and outline various levels of compliance.
Bobby Accessibility Validator
The Center for Applied Special Technology has created this online tool that analyzes web page accessibility based on the W3C guidelines.

Accessibility and Web Standards

In a perfect world, the library’s website would be authored in XHTML 1.0 Strict, using absolutely no deprecated HTML “design” elements. Visual design would be handled via Cascading Style Sheets exclusively.

This strict separation of structure (XHTML) from style (CSS) would enable us to comply with the W3C's Priority One rating for User Agent Accessibility Guidelines 1.0, and would also vastly simplify the design, development, and maintenance of our site.

With such an approach, our site could look great in a standards–compliant browser, and yet remain accessible to virtually any known browser or Internet device.

The Bad News

Unfortunately, many web browsers used by our audience are not sufficiently CSS-compliant - over one third still use some version of Netscape 4.x. Happily, NYPL has upgraded our onsite PCs to Internet Explorer 5.5.

The Transitional Solution

In order to design sites that achieve at least a minimum of accessibility and that work well in Netscape 4, our pages must:

In addition, all XHTML and Style Sheets must validate, a simple process described on the very next page. »

receive these styles. Since the entire sidebar is already set to use Verdana, the headings will inherit and use it. As for the links, they need to be yellow, so we declare:

.sidebar A:link {color: yellow;}
.sidebar A:visited {color: yellow;}
.sidebar A:active {color: yellow;}

This will keep the links yellow no matter what, just as they are now. Figure 11-3 shows us the new, improved, FONT-tag-free sidebar which results from the

« XHTML Section Index | XHTML Validation »
.

BODY {font-size: 10pt;}P {font-size: 18pt; line-height: 27pt;}BIG {font-size: 250%; line-height: 1em;}<P>This paragraph's 'font-size' is 18pt, and the 'line-height' for thisparagraph is 27pt. A <BIG>larger element</BIG> within the paragraph doesnot cause the line's height to change, but setting its 'line-height' does,which leads to some interesting effects.</P>
Figure 4-28

Figure 4-28. Changing the line-height of an inline element

Setting a line-height of 1em<P>The baseline of the <B>boldfaced text</B> is aligned with the baseline of this paragraph.</P>

Figure 4-30

Figure 4-30. Baseline alignment

In examining Fiture 4-30, you'll see that it doesn't look any different than you would expect. It shouldn't.

If a vertically aligned element doesn't have a baseline -- that is, if it's an image, a form input, or another replaced

list-style-type

Values

disc | circle |square | decimal |upper-alpha | lower-alpha |upper-roman | lower-roman |