Kwik-n-free web design accessibility tips
Tips on how to design a web site that is accessible for all. Wednesday, March 10. Last edited: 2008.01.12
These are basic web design accessibility tips that I write down as I find.
The internet is a natural outlet for people who are blind or color blind, and for house-bound elderly people who may have difficulty reading fine print. Building web sites with "accessible design" is fast becoming a standard practice. The UK has made accessibility mandatory for commercial web sites. However, concise guidelines tend to be rather inaccessible for the novice web designer. Here is my attempt at briefly and clearly explaining the basics.
1. Use standardized doctypes and flexible sizing.
The "standardized doctype" reference is placed at the very top of the HTML document and is essential to help prevent CSS font sizes from showing up differently in different browsers. The non-PX sizing ensures that users of the IE browser (80% of site visitors) can toggle a larger or smaller text size, as needed. Do not use PX sizing except for most images. For small navigational images, such as a shopping cart button, use EM sizing. This will allow the image to be enlarged along with the text for a vision impaired person.If using EMs however, it is necessary to specify in your CSS a general font size for the body. Due to an IE6 bug, if no body font-size is specified, the text size controls in IE6 browsers become unusable, zooming between huge and minuscule. Any body font-size can be used, and every expert seems to have a favorite. However, for the greatest simplicity I recommend that you start out with body {font-size:100%}.
Advanced web designers who demand high precision can find all desired features in EM text sizing. (Click here for advanced discussion on EM text sizing.) To specify the width of columns and all similar "spacial sizing," it is also helpful to state the size of the space either in EM units or as a percentage, so that the spaces will change size together with the text. "Keyword sizing" ("x-small," "small," "medium," "large," etc.) and "percentage sizing" are equally acceptable for accessible text.
See my CSS beginner's external style sheet for f1, f2, and f3 classes with flexible CSS font sizes that correspond to HTML "font size=" 1, 2, and 3--if a "standardized doctype" is used! A few older browsers may not recognize the "standardized doctype." Consequently, keyword sizing may show up one size larger in such browsers. For most web designs, this is not a significant problem. Just (a) do not specify any size for "medium" text. (b) Keep your margins slightly generous. (c) Avoid using the "large" or "x-large" font-size whenever a smaller size in "bold" will do.
Click here for official W3.org information on "standardized doctypes". We suggest the following "standardized doctype" for most English language sites and for most levels of expertise:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
However, those more advanced web designers who know XHTML probably will want to use this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Please note the words "strict" rather than "transitional" in the above doctypes. This is because for maximum efficiency, it is becoming increasingly important to have correct markup. If any of your code is not correct, the browser generally will default to "transitional" anyway. Therefore, you have nothing to lose by trying to be "strict." Moreover, you can be sure to have correct code by using the official validators you will find by following these links: W3.org Markup Validation and W3.org CSS Validation.
2. Always use alt tags for images--but usually empty!
Use alt="" with no space for most images. (Incorrect: alt=" ") This allows most aural readers to skip any mention of an unimportant image. For all images that are important to understanding the page content--or for navigation--or for a "tool tip" for sighted readers when the mouse hovers--then in addition to the empty "alt" tag, also add a "title" tag. Make the "title" text brief and meaningful to a blind or color-blind person. Also, use only plain text (such as & or and) inside of title or alt tags. Avoid using HTML codes (such as &) inside these tags. Sometimes this is not processed correctly by the browser.Please note that for Internet Explorer, either the alt tag or the title tag can activate the "tool tip." However, for Mozilla Firefox (used by about 20% of site visitors) it is necessary to use the title tag to activate the "tool tip." For w3.org standards, it is essential to have an "alt" tag. Therefore, to meet all standards: always have an empty alt tag--and when information is needed, always use the title tag.
(The only drawback is that this forces color-blind persons to hover the mouse cursor and read the "tool tip" to understand the image. Another solution might be to repeat the "title" information in the "alt." Redundant repetition however is insensitive to blind people, and frowned upon by search engines. It would be best if Mozilla changed this policy. Mozilla supporters seem to believe that W3.org guidelines reserve the use of the "tool tip" for the title only, which is untrue. Unfortunately, we can not expect that Mozilla will change this policy any time soon.)
3. Accessibility Jump links.
If a list of links comes before important text in the source code, place "skip links" jump links so that a blind person can skip reading all the links, or can go directly to the links if desired.A small or invisible image can be used for the "jump link," with the link text in the "title" tag. If you use such an image, it is best to keep the "alt" tag empty, as explained above. Otherwise, the "alt" text will display disruptively for sighted people who are color blind or for any reason have images turned off. A small "accessible website" icon can add a nice touch to a website that wants to project a "user friendly" image. The examples below show how this is done. However, I personally prefer just to use the invisible text for the "jump link." Then because there is no image, there is no need to bother with the emty "alt" tag and no worry about the downloading speed. To follow this method, just remove the entire "img src" tag, and replace it with .
Here is an example of an aural-friendly jump link before the main links column, with a 3-column layout:
<a href="#endmainlinks" title="Aural readers to skip main links click here."><img src="../pix/accessible-site.gif" class="skip" alt=""></a>
<a href="#secondary-links" title="skip main text"><img src="../pix/accessible-site.gif" class="skip" alt=""></a>
<a href="#end-links" title="To skip secondary links click here."><img src="../pix/accessible-site.gif" class="skip" alt=""></a>
<a href="#main-links" title="End of main content. To return to main links click here."><img src="../pix/accessible-site.gif" class="skip" alt=""></a>
If I have a block of links within the text, I give it a little heading such as "Related Pages." I place a jump link just before, ending just after, with title="skip links". As for the "related pages" links themselves: I send these to anchors at the very beginning of the text of their destination page. For this page for example: "accessibility.php#text2" goes directly to the main text. Thus skipping all the links, which the visitor who is using an aural reader must already have encountered.
4. Accessible Tables.
Avoid tables except for tabular data.If tables must be used for layout:
- Make sure the content appears in the same order visually as in the source code.
- Do not use the <th> code tag.
- Use both column and row headers, with the <th> tag and scope="row" or scope="column" specified.
- Also use the <caption> tag and "summary" attribute. Make these either a very brief introduction or a complete replacement for the table's information.
- Avoid the need for "colspan" and "rowspan."
- For more complex tables see: Creating Accessible Tables.