header

Designing Accessible Web Pages: Basic Guidelines

Why should you as a CMS author be concerned about making OC web pages accessible? 

  • These guidelines are intended to help our CMS authors to design web pages that are accessible to people with disabilities and make them more accessible in general. Special attention should be paid to the construction of web pages so that they can be easily "viewed" by people using computer software and equipment such as screen readers, Braille output devices, or nonstandard input devices. Pictures, icons or tables are particularly troublesome for students with disabilities.  If you want to understand students using these devices, try closing your eyes and have a coworker read to you from the web page left to right, line by line (ignoring pictures, colors tables etc.)  These guidelines were culled from important standards such as the World Wide Web Consortium (W3C) .  CMS automatically deals with many of the accessibility issues so you can focus on providing web content,  however there are a few things that you need to watch out for to make your content accessible. 
  • The second reason that we should be concerned about following these guidelines is because of Federal and State guidelines for technology (Section 508). 



Guidelines:

Don't rely on color alone

Users who are color blind or using a device (such as a text to speech reader) are not able to perceive page colors that have meaning.  Keep a high contrast between the letters and the page/background.

Provide alternate text

All pictures and image maps, as well as tables, in your document should have alternate text and descriptions.  For example, after you insert an image while editing:

1.  right mouse button on the image in the edit mode
2.  click on "Set Image Properties"
3.  select the "Image Properties" tab
4.  Type in a meaningful description of the picture in the "Image Alt Text" box.  The description provides an adequate description of the link's target for a user who may be relying on a screen reader or other assistive technology to read the page.  for a blind person in the "Image Alt Text" box.

The alternate text is displayed when the mouse pointer moves over the image. Try it!

Picture of Student Entry and Advising (do not use abbreviations like SEAC)

Tables

Use a minimum of tables  (only for tabular data e.g. sports scores) and do not nest tables (tables within tables).  Do no use tables  for screen formatting.  When you have to use tables, provide a descriptive caption and summary for tables:

1. right mouse button on the table and select "Set Table Properties"
2. Click the "Accessibility" tab
3. type a descriptive narration for the "Caption" and "Summary" box

 After entering the caption, the caption appears above and linked to the table.  In this case the "Example soccer scores" appears above the table from the "summary" box.  Most ADA devices should then read the caption just before the table which will be read from left to right, row by row.

Example soccer scores.
Team OC BCC
Game 1 10 0
Game1 20 0

 

Provide clear navigation mechanisms 

Complex pages can be daunting to even the quickest user.Group related elements together using labels, headings.  Form elements should be clearly labeled and placed into option groups. 

Use heading to group information (H1, H2, H3 etc.)

By using headings (H1, H2 etc) not only is the information organized into logical groups with a heading, but students with access issues can tell their browser to only read the heading.  So just as a sighted person can skip down in the text from logical group to logical group( "chapter" to "chapter"),  the browser will help the student skip down just reading the headings.  When the student hears the heading describing the group of information they were looking for, the student will tell the browser to stop at this heading and read the text following this heading.  When there is a lot of information on the page, we owe this "heading" feature to the student! Other multimedia content, scripts, ascii art, images

Provide text descriptions for all multimedia content, scripts, ascii art, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.

Option to view text-only pages

If all else fails, present the user with the option to view the content as a text-only page.