Pasadena City College, Home of the PCC Lancers

accessibility and the PCC web site

Accessibility Guidelines

Designing without Tradeoffs for All Users

Ten check points for accessibility — these steps work best on a PC in Internet Explorer

Download Diamond Demo Tools – loads Bookmarklets for: Grayscale Page, Missing Alts and Kill Style Sheets

Number one: Use of Color

  • Check you page with your display color settings to grayscale. Favorites > Accessibility > Grayscale the Page

    Is there adequate color contrast?
    Is information or emphasis conveyed using color still available? For instance, are certain choices made obvious only by the font color, such as the original price is in blue and all the sale prices are in red?

  • Are there high contrast areas that cause an optical flicker, like striped backgrounds?
  • View your page at Vischeck–Color assessment/color blindness checker

Number Two: Use of Images

  • Turn off image loading in the browser and clear the cache. In the browser Menu, select Tools > Internet options > Advanced tab > Multimedia. Uncheck "show pictures"

    Is appropriate alternate text available? Does it convey the same function or purpose as the image?
    Can the page still be used with images turned off?
    Turn images back on and reload the page.

Number three: Flexible Page Design

  • Enlarge the font size in the browser. View > Text Size > Largest and Smallest

    Does the type on the page enlarge accordingly?
    Does the page layout transform gracefully?
    Is the page still usable?
    Does the page require horizontal scrolling?

  • Change the browser window width.

    Drag the browser window larger and smaller using bottom right corner
    Does the page content reflow to fill the new window size?
    Does the page require horizontal scrolling?

  • Turn off style sheets in the browser. Favorites > Accessibility > Kill style sheets

    Is the page still usable without style sheet formatting? If you are using layers, does the site work without them and provide the same content?

  • Apply custom style sheet. (Use style.css - black background, white text, 72 pt)

    Does the page formatting honor the settings in the custom style sheet?
    Is the page still usable?

Number four: Document Structure vs. Visual Design (Structure vs. Presentation markup)

  • Navigate the site using the keyboard only. (See Appendix for shortcuts)

    Are all links and form elements accessible and usable from the keyboard?
    Do you cycle through these elements in a logical order?
    Does the page clearly indicate where links lead to?

Number five: Easy, consistent navigation

  • Check your navigation

    Are the links easy to find?
    Is the navigation consistent; in the same place or grouping? Are there clear locations for primary navigation (main site sections), secondary navigation (inside content sections) and if necessary tertiary navigation (same page anchors, tables of contents, etc)?

  • Tab through to get to some page content. Click or press Enter on a link and once the page loads, tab through again to get to the item you wanted.

    How many navigation links must you tab through to get to information you selected?

  • Add "skip navigation feature" if you have a lot of navigation that is repeated on every page.

Number six: Use of scripts and forms

  • Test keyboard access to form fields or input boxes. Use a separate submit or go button for ease of use with drop down menus. Make sure that the label for each field precedes the actual input item.
  • Turn javascript off and make sure your visitor can still get to the content on your pages. In Internet Explorer Tools> Internet Options> Security tab>Custome Level - scroll down to Active Scripting and check Disable and reload the page.
  • Consider a phone number or email link as an alternate way for the disabled to sign up or provide information if you have a complex or multipart form.

Number seven: Use of Multimedia, animation, Flash, shockwave

  • Turn off your sound and view

    Can you understand, navigate the content without sound?

  • Movies: Turn sound back on and turn off monitor and listen.

    Can you understand the movie with only the sound?

  • Provide synchronized closed captions for hearing impaired and text alternate or audio description for visual impaired for all movies.
  • Flash material must be created with the latest accessibility features. At a minimum, the Flash content must not freeze a screen reader and equivalent text must be provided. Flash sites or Flash navigation must be accessible or may not be added to PCC web sites.

Number eight: Use of complex window structures

  • Don’t use Frames or provide a no frames alternate. If frames are used, make sure each frame is clearly labeled with its purpose.
  • Indicate if a link will open in a new window.
  • Don’t use meta tags that cause a page to refresh or reload with a new URL.

Number nine: Use of Tables

  • Are you using tables for layout or to organize data? For data tables, did you provide summary, header and row information to orient visitor in tables.
  • If table is for layout only, indicate "layout table" in table summary. Make sure that the way you have broken up the content in layout tables reads sensibly when linearized (see checkpoint four).

Number ten: Use of Graphs and charts.

  • Have you included graphs or charts on your site? Provide summary information in alt text and include a long description link to the data represented in the graph or chart.

SERVICE ALERT: PCC will be launching an updated version of this website on Tuesday, June 28, and Wednesday, June 29. During that time, you may notice some changes to content, layout, and functionality of the site, and there may be interruptions in service. We appreciate your patience during the launch, and apologize for any inconvenience this may cause.