Saturday 18th of November 2017 04:52:10 PM

CSS Style Guide

XHTML: Accessibility Tips

In the first place, no matter how thick you make your borders on inline elements, the line-height of the element won't change. Let's set top and bottom borders on boldfaced text:

B {border-top: 10px solid gray; border-bottom: 5px solid silver;}

Once more, this is allowed in the specification, but it will have absolutely no effect on the line height. However, since borders are visible, they'll be drawn -- as you can see for yourself in Figure 7-51.

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. »

« XHTML Section Index | XHTML Validation »

the image, whereas the "second" is tall enough to containthe image, its padding, and its border. This is because the totalityof the replaced element (content, padding, borders) make up theinline box for the replaced element. This is what forces the lineboxes to be taller in Figure 8-66.

Margins are also contained within the line box, but they have theirown wrinkle. Setting a positive margin is no mystery: it will simplymake the line box taller, as in Figure 8-67.

P {position: relative;}   /* establish containing blocks */
<B STYLE="position: absolute; top: auto; right: 0; bottom: 0; left: auto;
width: 8em; height: 4em;">...</B>
Figure 9-19

Figure 9-19. The effects of absolute positioning

For the most part, the text in both paragraphs looks fairly normal. In the second one, however, the place where the boldface element would have appeared is simply closed up, and the positioned text overlaps the some of the content. There is no way to avoid this, short of positioning the boldfaced text outside of the paragraph (by display of list-item , ofcourse, but CSS doesn't distinguish betweenordered andunorderedlist items. Thus, you might be able to set an ordered list to usediscs instead of numbers. In fact, the default value oflist-style-type is disc, so youmight theorize that without explicit declarations to the contrary,all lists (ordered or unordered) will use discs as the bullet foreach item. In fact, that's up to the user agent to decide. Eveninside the margin. The CSS specification strongly implies that thebackground extends to the outside edge of the border, since it talksabout the borders being drawn "on top of the background of theelement," but not all browsers seem to agree. This is importantbecause some borders are "intermittent" -- forexample, dotted and dashed styles -- and the element'sbackground should appear in the spaces between the visible portionsof the border.

Every border has three aspects: its width, or thickness; its style,

Of course, this will match any first-child paragraph, no matter its parent element. Suppose instead we want a rule that applies only to paragraphs that are the first children of DIV elements. In that case, we need to use the child selector:

This translates as, "any paragraph that is a first child, and is a child of a DIV, should be in italics." If we were to leave out the child selector as follows, though: