Home /

FITC Quick Guidelines for Accessibility in Web Design

Return to Main Menu

Here are some quick guidelines on how to design your web page to meet the criteria for accessibility.

You can also visit the WebAIM (Accessibility In Mind) site for training in ADA accessibility design.

The following topics will be covered in this tutorial:

General Layout

  • Pages should be easily readable. This includes neatly organized text and images.
  • Content should be clearly defined from content separators and headings.
  • The content should be linearized, and easy to follow.
  • The page should be as clean as possible, without the clutter of excessive images/icons, pop-ups, floating layers, etc.
  • Styled pages should be able to be read properly even without any CSS applied.
  • A table of contents must be present for pages with several sections of content.
  • In particularly long pages (pages that may scroll for two or more screens), a link that will take the user back to the top is recommended.

Text and Fonts

  • Fonts should be about 12pt.
  • Arial, Georgia, Times New Roman, and Verdana are standard, and accessible, fonts.
  • Dreamweaver has pre-set font lists that ensure accessibility across all platforms.

Here is some CSS code demonstrating proper use of font families. Browsers will attempt to use the first font on the list, and if that particular font is not installed on the user's computer, the browser will use the next font in the list, and so on. This ensures that all users may see the webpage in proper formatting.

code:
.main-text {font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px}

Furthermore, headings and text should be given difference CSS classes, utilizing separate "div" layer tags to organize the content:

code:
<div class="sections">Text and Fonts</div>
<div class="sub-sections">
<br>Size/Readability:</div>
<div class="main-text"><br>Text</div>

Hyperlinks

This code will make a link become highlighted whenever the mouse is over the link, or if the Tab key is used to focus the link:

code:
a:hover,
a:focus,
a:active
{
background-color: #CCFFCC;
color:  #990000;
}

Images

  • All images must have ALT text, which describes the function of the image, not the appearance.
  • Here is some example code for an accessible image:
code:
<img src="image.jpg" alt="Image Function" name="Image">

Forms

  • Make sure all form items have labels. The text "Item 1," for example, is in between a <label> tag.

Image of an example form


  • Here is some example HTML code that will generate a form similar to the one pictured above:
  • Note the <fieldset> tags, and how they are used to organize related items in a group. Additionally, the tags and text in color are all accessibility features, specifically for the purpose of organization, fluidity, and overall ease of use. See the WC3 HTML 4.01 specification on form tags (opens in a new window) for more information on how to use these tags.
code:

<form id="form1" name="form1" method="post" action="">
<p>
<label>Item 1<input type="text" name="textfield" /></label>
</p>

<fieldset><legend>This is a Fieldset</legend>

<label><input name="radiobutton" type="radio" value="radiobutton" /> Use Fieldsets </label><br />
<label><input name="radiobutton" type="radio" value="radiobutton" /> For Multiple </label><br />
<label><input name="radiobutton" type="radio" value="radiobutton" />Items in a Group</label>

</fieldset>

<p>
<div align="center">
<input type="submit" name="Submit" value="Submit" />
<br />
Submit buttons do not need labels.
</div>
</form>


Cascading Style Sheets

  • CSS is strictly used for visual presentation. Thus, the HTML portion should be coded in a strictly structural fashion. For example, the use of the <b> tag should be used to indicate emphasis on the meaning of certain texts, not for its bolder visual aspect. CSS should be used to embolden words if strictly for visual appeal (such as titles, content separators, etc.). Keep in mind that for full accessibility, web pages must also be orderly and readable even without any style sheets applied. For more ideas and tips on using CSS, see the References section.

Frames

  • FITC-related Web pages should never use frames. If they do exist, however, frame sets should always be given proper titles.

References

USCS Faculty Instructional Technology Center
2006-2007
Last updated 05/10/2007