Accessibility Requirement #7
Last Updated: January 12, 2007
Author: Donald F. Evans
Table of Contents
- Priority
- Description
- More Info
- Coding/Best Practices
- Testing/QA
- Search Engine Optimization (SEO)
- W3C Guidelines
Required
Page design MUST not override user browser/OS settings for large fonts, contrast, etc. Check out browser Accessibility Options under Internet Options from the Internet Explorer Tools menu. Windows OS accessibility settings are located under the Control Panel from the Settings menu. *Use relative font size for text
158 million internet users have visual disabilities not serious enough to need a screen reader, but serious enough to need to enlarge screen font. Using an absolute font size makes it difficult for them to override the designer's font size settings.
- Best Practices:
- None (see below)
Guidelines:
- Always specify a fallback generic font. You should use a BODY tag in which to put your default font attribute.
- HTML:
- CSS: body {font-family:"Gill Sans", sans-serif;}
- Use the following CSS properties to control font information
- 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', and 'font-weight' instead of the following deprecated font elements and attributes in HTML: FONT, BASEFONT, "face", and "size".
- If you must use HTML elements to control font information, use BIG and SMALL, which are not deprecated.
- The font-size attribute in your HTML file should not be absolute. Use relative font styles like em or % instead of px or other absolute styles.
- Do not override user browser/OS settings for large fonts, contrast, etc. Check out browser Accessibility Options under Internet Options from the Internet Explorer Tools menu. Windows OS accessibility settings are located under the Control Panel from the Settings menu.
Example: Always set a default font style
<HEAD>
<TITLE>Drop caps</TITLE>
<STYLE type="text/css">
.dropcap {font-size:120%; font-family:Helvetica}
</STYLE>
</HEAD>
<body style="font-family:'Gill Sans',sans-serif;">
<P>
<SPAN class="dropcap">O</SPAN>nce upon a time...
</BODY>
...
Example: Always use Relative Fonts, not Absolute.
P.two {font-size: 1.6em;}
P.one {font-size:166%;}
Hold down the Control Key while spining the mouse wheel.
Or in IE Click View and Text Size to set it to another setting.
Notice in each of these images the text "Accessibility Validator" gets larger. It has taken advantage of Relative Font Styles. However, the text "integrity Assurance" does not scale and therefore has used Ablosute Font Styles.
No known SEO issues.
- HTML Techniques for Web Content Accessibility Guidelines 1.0
- Markup and style sheets rather than images
- CSS Techniques for Web Content Accessibility Guidelines 1.0
- Units of measure
- Fonts
- Text instead of images
- Text formatting and position