Pasadena City College, Home of the PCC Lancers

accessibility and the PCC web site

How we made this site accessible

 
 
 
 
 
 
 
 
 
 

 

First Version - January 2002

problems:

  • Text images are used for primary navigation and will not scale with enlarged text.
  • Font size in style sheet is set in pixels and will not scale.
  • Not a flexible layout - not scalable for larger screens and enlarged text. Results in very short lines of text all stacked up.
  • Spacing, proximity and position of visual elements communicate information that is not available to a screen reader.

Second Version - February

problems:

  • Punctuation is used as graphic elements; for example colon : and greater than > will be read by screen readers.
  • Form elements need a label before field.
  • Drop list needs a "submit" button to make sure it works with all assistive technologies.
  • Need to add a skip to main contents or skip repetive navigation link at the top of the page.
  • Add access keys - keyboard shortcuts to take to utilities on each page.
  • Need to announce when openning a new window with a link.
  • Tables should have a summary attribute.
  • Needs to be flexible layout.
  • Need coding for data headers and rows, even though most browsers do not use this yet.
  • Remove multiple links to site sections and home page.
  • Text links are not using underline convention.
  • Enlarging text breaks up the design in an unpleasing manner.

April Version

features:

  • A link is provided to skip to main contents.
  • Added a skip to main contents link at the top of the page.
  • Sections are either identified with structual markup, Title tags in TD or TABLE, or transparent spacers with alt tags identify sections.
  • Structural markup is used and the styles for each are established in the style sheet.
  • A flexible layout is used. Enlarged text works with design as well as normal text size.
  • No images are used for text.
  • Text links use standard underline convention.
  • Text is scalable using relative font sizes, either ems or %, and using style sheets for each browser and platform.
  • Punctuation is used appropriately to help screen reader modulate tone and measure of reading. Punctuation is not used as graphic element.
  • Form elements are proceeded with a label.

PCC Home old version November 2000

problems:

  • separate text only pages to be maintained for each page (not kept updated)
  • most of the text is in images that don't scale in browser with increased font size
  • javascript that is not accessible to assistive technologies:
    • drop down menus
    • quick links
    • random image
  • links open in second windows quite often and not announced
  • most of site is not consistent in layout and navigation making it hard for users wtih cognitive or visual impairments to navigate

PCC Homenew version April 2002

features:

  • uses text for all content except 1 picture
  • skip to main contents link at top of page
  • added hidden 1 pixel gif at top of page with alt tex t and link title totake screen readers to accessibility features

 

 

Flexible Design

We used a percentage for our basic table layout rather than setting widths of tables and cells to a fixed amount. Often users with low vision select enlarged text and have a large monitor. This flexible layout allows the page to grow to accomodate users who select an enlarged text size on their browsers and have large monitors, yet also work well with smaller monitors using normal text settings. Be aware of the way your page flexes. Does the design depend on every pixel staying aligned or can the layout grow and shrink with the text and monitor size without breaking up unexpectedly. The MSIE browser version 5 and above has a handy text zoom feature under VIEW in the tool bar that you can use to test this.

Layout forText Readers

Be aware of the way text readers move through a page. Does your content flow left to right in a logical fashion? Are your nested tables making the page overly complex or stacking the content top to bottom in multiple columns? The best way to understand if your layout works is to test it in one of the popular screen readers. JAWS and IBM Home Page Reader demo versions can be downloaded from their web sites. Also be aware that your page may have a lot of visual clues to its structure or content heirachy by the nature of placement, white space and juxtaposition that may be completely lost to a screen reader. We use a few transparent gifs with alt tags to "announce" some equivalents to the visual clues.

Use heading, bullet, list and blockquate as they were intended.

HTML Text vs. Images

Whenever an image is used, the text equivalent should be either in an ALT tag, LONGDESC or D Link. You don't need to include the phrase "an image". The reader usually does this. The alt tag should be brief and to the point. The alt tag should make clear to the visually impaired visitor the purpose of the image on the page. If its just there to be pretty, "photo of students on quad" will do. If it is part of the page structure for example, "Heading - Products". You might even want to apply heading tags to the image so that the text reader can recognize the structure.

Transparent gifs used as spacers should have alt tags to tell the text reader to skip them. Use a single space in the alt tag to indicate a spacer gif or any image you want the reader to skip.

Don't use special characters for graphic like accents. The text reader will read them as they are defined, such as > as "greater than", which will be at best distracting and at worst confusing. Instead use a graphic image with either a blank alt tag or an appropriate description, like "bullet".

While text images will be read by most screen readers as long as you supply the text in the alt tag, this will not help the low vision user who wants to increase the browser text size. The text images will remain the original size. We use text whenever possible. Style sheets give us some additional artistic control over text, without compromising the zoom text feature. (using text instead of images for text also makes it easier to revise, easier to have dynamic content, and keeps page weight down.)

Style sheets

And while we are speaking of text and fonts, when you use style sheets to set text size, make sure you use a relative size attribute, like percent or ems. If you set your font to pixels, you get great cross browser and platform control but at the cost of flexibility for the low vision user (and some MACs and some Netscape browsers render fonts smaller too!). We used a server side script to detect the four basic browser and platform combinations and write the appropriate style sheet to display the best text sizes on each for our design.

Make sure that the site works without the style sheets. Does it degrade gracefully if styles are not supported? Use HTML tags to define your styles where ever possible since this helps provides page structural information to text readers. For instance, a text reader can jump from heading to heading to provide a user a general idea of the content. The HTML tags can have fonts and colors assigned to them in your style sheet.

Colors

Make sure your color choices have good value contract. Many visually impaired do not see all colors or see colors differently. For instance, red is often not easily recognized and our campus color is a deep red. We switched from using red in our background and link color to more visible colors like navy blue, black and dark green on a white background.

Don't use color as the only element to determine navigation or button choices. Make sure your link and visited link colors can be differentiated to a color impaired viewer. Make sure that you don't rely on color alone to indicate links. Some sites use the "decoration: none" style classification to remove the underline on links for a cleaner look- don't! The underline denoting links is important to inexperienced users and those with cognitive impairments.

Skip repetitive navigation

Since we are repeating links to the home page, Quick Links and Search features at the top of every page, we provided a link at the very beginning of the pages to skip to the contents. We wanted our to visible so we used a text link, but you can use a transparent gif with a link and alt text if you only want it to be obvious to the screen readers.

No Frames

Frames are sometimes confusing for the sighted user, let alone for a blind user relying on a reader to get to your information. Some newer screen readers are able to work with them, but we recommend not doing it.

JavaScript

Be aware that some screen readers browsers will not be able to read the JavaScript properly, expecially if using document.write to create content on the client side. A well formated Application Server script, like ASP, Cold Fusion, JSP and PHP will create the proper HTML in the page before it is delivered to the browser. You will need to test any scripts in the text readers to determine if they will work as expected.