Using Relative font-size for Accessibility

Although I prefer using ems and percentages, there are select web designers who insist on using pixels for their entire design. There are some advantages to this, such as a controlled layout and knowing that it will look the same in all browsers and computers. However, using pixels can cause accessibility problems for visual impaired. To counter this, we must use another form of font-size properties to allow all browsers to resize font; these font-size properties are called font-size keywords.

How to make font-size pixels resizable

p {
font-size: 12px;
}

/*/*/a{}
body p {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>body p {
font-size: small;
}
/* */


Everything between the /* */ is ignored by Netscape 4. a{} is ignored by Opera 5. Defines body p to be x-small in IE 5, small in others. The voice-family stuff makes IE 5 think body p is over, but no other browser does. html>body p is for Opera 5. All browsers except IE 5 will then set the font-size to small except IE 5 and Netscape 4, which doesn’t support relative font-size.

To make it easier for visitors to change font-size use a style switcher code to place icons on your site so they can easily increase font-size on their own without digging through browser settings.

Written: Dec 6, 2007

0 Responses to "Using Relative font-size for Accessibility"

No comments yet.