Tuesday, June 30, 2015

Southwestern College Left Navigation

Universal Design Data

Modern web design (as of 2011) tends to be both accessible and search-engine friendly. In the coding of your web page, presentation is generally separated from content -- that is, the content of your page is tagged with universal styles. Pages are not structured with tables, but with cascading style sheets and <div> tags (and eventually with the semantic tags of HTML 5).

The topic of your page should be reflected in the title tag and in the main headline for the page -- and that main headline should be identified with H1 tags, with subheadlines identified with H2 and H3 tags.

  • Use style sheets to format text. Avoid using absolute font tags such as font face or font size. Specifying relative sizes such as h1 and h6 allows users to adjust text size to their sight needs.
  • Use single columns of text, rather than multiple columns.
  • Avoid using images to represent text. Users cannot upsize the text in images to increase readability.
  • Use formal grammar. Write for your audience.
  • Avoid the use of large blocks of italic text; it’s harder to read.
  • Don’t use flashing or animated text.
  • Provide the long version of acronyms at the beginning of every page where the abbreviated name is used.

Alt tags

  • Provide text alternatives to visual and auditory content.
  • Keep alt tags meaningful and short.
  • If you must use bullets or buttons, use “” as the alt tag.


  • Text and graphics must be understandable when viewed without color. Avoid statements such as “Read the red text first.” Users with color blindness or otherwise sight disabled will not be able to see which text is red.
  • Select foreground and background colors with sufficient contrast between them. Print the pages of your site in black and white to check the contrast and readability.
  • Use solid, single color backgrounds.


  • Avoid using graphics that contain multiple objects.
  • Provide alt tags for all the graphics on your pages.


  • Place a 2x2 pixel invisible gif in the upper left corner of your Web page, add alternative text to the gif such as “Go directly to main content,” and link the invisible gif to the beginning of your main content. This gives the returning disabled user the option of skipping through the headers and navigation.
  • List links on your page, rather than placing them on one line separated by vertical lines or pipes. This facilitates screen readers in accurately reading through the links and allows users with fine motor control limitations to more easily select one link.
  • Size links so that you, as a test, can readily click them using your non-dominant hand.
  • Place links on words describing what will be accessed, such as Resources rather than Click here.


  • Check that your site can be navigated without using the mouse. Use the tab key and directional arrows.


  • If your page has a search function, place it close to the top of the page so that a disabled user can utilize it quickly without having to listen or scroll through lengthy content.


  • Provide alternate text files for sound.
  • Use closed-captioning on videos.
  • Provide alternate descriptions for animations.
  • Give the user a choice of versions; for example, with or without Flash, Shockwave, JavaScript, or other.


  • Use style sheets to control layout and presentation. However, check that your page is readable with stylesheets turned off to give the user the choice of what works best for her needs.
  • Use screen layouts that are consistent and uncomplicated.
  • Avoid using images to represent text where you can, with the possible exception of navigation links.
  • Begin a site with a table of contents linked to each specific section of the site or have a site map to provide an overview.
  • Provide a text-only version of your page and include a link to that version near the top of your page.


  • Use only for formatting data. Test your page with a screen reader. One version, JAWS, is available in the DSS Lab RM 429.

Test your pages with an accessibility page validator: