/Access all areas/ www.dkeirle.com
26/10/2006 | Filed under Develop > Access all areas
Website accessibility is for some a legal requirement as well as good design practice. Alastair Campbell puts www.dkeirle.com through its paces
This site is refreshing because it gets so much right: valid and structural code, alternative texts, and good use of CSS for presentation and layout. In fact, there is only one point I would bring up on the site in general, which is the use of relative sizing units. The Web Content Accessibility Guidelines (www.w3.org/TR/WCAG10) encourage the use of relative units, for both fonts and layout. This helps people who need to re-size the fonts, or have unusual window sizes.
Tackling fonts first, most of the text is set at ten pixels, and unfortunately pixel units do not resize in the most popular browser currently used: Internet Explorer. Defining text in this way prevents many people with mild to moderate visual impairments (or people with new high-resolution laptops) from reading the text on the site. Appropriate units would be percentage or em, both of which are relative to the user’s default font size: 100 per cent = one em = default font size.
To combine cross-browser design and enable IE to re-size the fonts you can use something like this in the CSS file:
body {font-size: 62.5%;}
html>body {font-size: 10px;} /* hidden from IE < 7 */
Other elements can be sized relative to the value in percentages or ems (www.clagnut.com/blog/348).
With layout, the hard-line view is to define all elements of the page in percentages. However, an essential condition for accessibility is that the main content area should fl ex with the user’s window size.
A constrained liquid layout is the best compromise: the layout is set as a percentage, but with a maximum and minimum width to constrain it. The site currently uses this layout code:
#frame {width: 725px;}
To convert to an elastic layout, the site could use:
#frame {width: 80%; min-width: 650px; max-width: 1000px;}
There are even methods of getting IE to respect this (www.smackthemouse.com/20031007). Making an elastic layout would make this site more user-friendly.
Bookmark with:
