Creating Accessible Web Pages
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.
Check 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" tag. 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.
What's required for ALL content that goes on the web, and how to make that content accessible.
At Cabrillo, 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)
Creating Accessible Web Pages
What are the Legal Mandates?
- ADA (Americans with Disabilities Act)
- Telecommunications Act
- Section 508 of the Rehabilitation Act - http://www.section508.gov
People with disabilities use a variety of technologies to access web pages:
- Screen readers for blind computer users
- Screen magnification, for visually impaired users
- Voice recognition software (requires keyboard access without mouse)
- Text-to-speech software
- Text browsers and other specialty browsers
- Switches, trackballs, large print keyboards, etc.
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 tag 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.
Getting oriented to a web page's structure
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 tag should be added.
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.
- This is an example of an ordered list
- which uses
Don't rely on specific fonts, colors, or sizes. Use real heading tags not just formatted text. Don't require a specific window size. Don't assume things will line up vertically because horizontal distances may change.
Orientation to the contents of a site using frames
- Avoid using frames. You can use the NOFRAMES tag to show a link to an alternate page that doesn't use frames.
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.
- Use text that makes sense when read out of context. For instance, do not use "click here."
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 tags 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
- 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.
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 tags for buttons.
Getting an overview of a site's content
- Include a site map or index link to a site map near the start of the home page.
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
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.
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. The target range modem speed to design for now is between 56k.
- 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.
Validate and Test •Use validation tools such as Wave 4.0 Accessibility Tool http://wave.webaim.org/index.jsp •Use human testers, and good judgment
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.
Web Content Accessibility Guidelines
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
Resources on the Web
A tutorial containing 10 free online modules on making course materials accessible - covers general issues and then delves into specific applications such as PowerPoint, Flash, Word, PDF, etc.
Accessible Adobe PDF Files: http://www.webaim.org/techniques/acrobat/
World Wide Web Consortium: http://www.w3.org/
DeAnza's High Tech Center Training Unit provides state-of-the-art training and support for community college faculty wishing to acquire or improve teaching skills, methodologies, and pedagogy in Assistive and Instructional Computer Technology. http://www.htctu.fhda.edu/
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.)