Skip to Site Navigation | Skip to Local Navigation | Skip to Content
Student photo

Creating Accessible Content on the Web

We would like to share some important information with you about designing and evaluating your web pages for disabled accessibility. Accessibility means that blind, low vision, hearing impaired, learning and physically disabled persons have access to your web pages. Consider it "electronic curb cutting". It costs more to retrofit a sidewalk with wheel chair accessible curbs than to include the curb cut in the original design plan. Many of the barriers to accessing web pages are easy to correct. The bottom line is, designing accessible web pages involves nothing more than creating a web document which can be accessed with assistive technologies.

plus signCheck your web page now! Does it pass the test for accessibility?

 

Wave is an automated, web page evaluation utility designed to check your web page and issue you a report based on established criteria.

1. To begin, navigate to the Wave web site at http://wave.webaim.org/index.jsp

2. Enter the URL of a page and click "Submit this page"

3. Look for any red flags on the page such as a missing "alt" attribute. An explanation of the icons is available at http://www.wave.webaim.org/wave/explanation.htm.

Just hover over an icon with the mouse for a brief description or click on the icon for a detailed description. Web pages are required by law to be Section 508 compliant.

plus signLegal Mandates

plus signOrientation

 

Getting oriented to a web page's structure

Include a site map or link to a site map near the start of the home page.

Use headings, lists and consistent structure. Although the use of graphic bullets may make the lists difficult to understand. If graphical bullets are still used, then the alt attribute should be added. Don't rely on specific fonts, colors, or sizes. Use real heading attributes not just formatted text. Don't require a specific window size. Don't assume things will line up vertically because horizontal distances may change.

Lists whether ordered (numbered) or unordered (bulleted) are a good way to display links. Ordered hyperlinks are helpful in that the numbers give the user another tool for navigation.

  1. This is an example of an ordered list
  2. which uses
  3. numbers

Be Knowledgeable

  • Know how people with disabilities access your site
  • Occasionally review AT advances and standards
  • Use a quick reference Checklist
  • Look for accessibility features in new versions of authoring software

Listen to Feedback

  • No one is perfect, no one can think of everything—respond to requests and make necessary changes
  • Remember that you are lucky to get this feedback—usually your website visitors just get frustrated, go elsewhere, or (increasingly!) sue for compliance.

plus signRequirements/Guidelines

 

What's required for ALL content that goes on the web, and how do I to make that content accessible?

A Web site must:

  • provide text equivalents for all non-text elements (i.e., images, animations, audio, video)
  • provide summaries of graphs and charts
  • ensure that all information conveyed with color is also available without color
  • clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions) of non-text content
  • organize content logically and clearly
  • provide alternative content for features (e.g., applets or plug-ins) that may not be supported

Accessibility Guidelines at Portland Community College

plus signHTML Content Formatting: Text, Links & Tables

 

Problems with columnar text

  • Screen readers have difficulty reading multiple columns.
  • Design tables that read across from left to right and make sense. Always use headers for tables containing data.

Hyperlink descriptions

  • Use text that makes sense when read out of context. For instance, do not use "click here."

Tables

  • Make line by line reading sensible. Summarize. Avoid using tables for column layout whenever possible. Internet Explorer will "decolumnize" for a screen reader. The information contained within a table is read from left to right, making it difficult to understand the logic of the information. This difficulty is compounded when the table cells are not of uniform size. Sometimes the words run together, making the screen reader spell out the contents of the line.

plus signHTML Accessibility and Validation

plus signScripts, Applets, and Plug-ins

 

Scripts, Applets, and Plug-ins

  • Provide alternatives to all controls and applets Provide an alternate page that uses static text and graphics for displaying information, and standard links for input
    • Example: For a search field, provide a tree of indexed links
    • Example: For a form, provide instructions to supply information by phone, fax, mail, or email
    • Example: For information displayed by an ActiveX control or Java applet, provide a page displaying the same information as HTML text.
  • Use either LABEL or TITLE attributes to associate a name with every control
  • ActiveX controls should use Active Accessibility to be compatible with accessibility aids.
  • Java applets should use Active Accessibility for Java to be compatible with accessibility aids

plus signDocuments: Word, PDF, Etc.

plus signVision and Hearing Issues

 

For the blind user, accessing visually presented information (images, graphs, videos, charts) is done with software referred to as "assistive technology"

  • Use the "alt" attribute to describe the function of all images and animations on a web page. (Under Image Properties in most software programs that generate HTML). If you write the HTML code yourself, alternative text is written into the attribute shown below:
  • <img src="imagefilename.gif" alt="text description of image"> If the image you are using is decorative only, leave alt blank.

  • Use a client-side MAP and text for hotspots in image maps. The TAB key moves between links and image map areas in the order they're defined in the HTML—be sure it generally moves from left to right and top to bottom, but does not skip back and forth between groups of items. Use TITLE attributes to name AREA fields in client-side image maps
  • Provide captioning and transcripts of audio, descriptions of video, and accessible versions in case inaccessible formats are used.
  • Summarize or use the longdesc attribute in all graphs and charts.
  • Avoid using scrolling marquees wherever possible; otherwise, provide an alternative page.

For the low vision user, distinguish between foreground text and background color or patterns

  • Firefox as an Add-On to help detect problem areas for colorblind users.
    Click here to view the Add-On instruction page.
  • Provide clear contrast between text and background. Background textures are exceedingly difficult to read. Blue active links on a similar color background is not good design.
  • Different monitors have different limits on the number of colors they can display. Colorblind people have difficulty distinguishing colors. Since the presentation of color depends heavily upon particular browsers and monitors, one solution is to view your Web design on multiple systems to gauge the accessibility of your color use.

Recognizing information communicated only by color cues

  • Avoid using color alone to convey information e.g. color-coded pop-up graphic buttons. Supply "alt" text attributes for buttons.

Accessing information by the hearing impaired requires that audio components of a web page be augmented with text scripts or closed captioning

  • Create a text script of the audio file
  • Even better, provide closed captions for all audio content that contains useful information

plus signClosed Captions

 

Closed captions are required for any video posted on the Cabrillo website, in order meet accessibility standards.

  • 3C Media provides captioning services to California Community Colleges, but only for videos that are used in teaching classes.
  • Captioning services may be purchased from an outside vendor, such as Rev.com, if they are needed in a video that is for a purpose other than teaching a class.
  • The Accessibility Support Center (ASC) may have additional options available.

plus signPeople with Disabilities

 

At Cabrillo College, about 15% of students have a disability; statistics in the general population are higher (19.7% according to the U.S. Census, 1997). That's one person in five! (Ingel, 2002)

People with disabilities use a variety of technologies to access web pages

  1. Screen readers for blind computer users
  2. Screen magnification, for visually impaired users
  3. Voice recognition software (requires keyboard access without mouse)
  4. Text-to-speech software
  5. Text browsers and other specialty browsers
  6. Switches, trackballs, large print keyboards, etc.

Learning Disabilities/Cognitively Impaired - Reading the web page text

  • Site should be able to handle screen readers and large print display software.
  • Focusing on relevant information by creating clear and elegant pages, which facilitates information gathering. Always put the navigational icons in the same location.
  • Hyperlink words which describe the destination of the link. E.g. Click here for a picture of Beethoven; Click here for a picture of Beethoven.
  • The confusion and frustration experienced by anyone attempting to navigate and use a poorly designed site will be even greater for students with cognitive disabilities.
  • Include only 3 to 5 important pieces of information on each web page. (research has confirmed this!)
  • Use simple shapes and unambiguous navigational icons which are always in the same locations on each web page.

Physical Disabilities require accessing web pages with keyboard commands

  • Test page using keyboard commands only. Web access is managed entirely with assistive computer technologies.

plus signTechnological Diversity

 

Finding a common ground between network access speed, graphics and multimedia capability and access for persons with disabilities.

  • Market research says you have between 7-10 seconds to get something up on that screen before you loose your viewer to confusion and/or boredom.
  • Information icons which are culturally specific may not provide a consistent message to a diverse and global audience. E.g. an image of a turtle may mean slow or wisdom, depending on the culture.
  • High energy animations, digital movies, stereo sound and Java applets are exciting only if users have the hardware, software and network access speed to enjoy them.

plus signResources on the Web

plus signResources on Campus

 

At Cabrillo College

  • Assistive Technology
    At Cabrillo’s Assistive Technology lab, TAs are willing to test sites for students in Cabrillo DM programs or for campus faculty and staff. To make a request, call 477-5260 or email Calais Ingel at caingel at cabrillo.edu. Allow at least a week, preferably two weeks, for testing and feedback. (Available only during fall and spring school terms.)
  • Accessibility Support Center (ASC)
  • Computer Technology Center (CTC)
    Was this page helpful?    
Ask Cabrillo WebAdvisor Cabrillo Library Cabrillo Bookstore  Canvas icon  Facebook Icon Twitter Icon YouTube

© 2013 Cabrillo Community College District

Campus Safety | Accessibility | Title IX

Main Campus, 6500 Soquel Drive Aptos CA 95003, 831.479.6100