Web Guide

Web Guide

Below are some guidelines to keep in mind when designing or maintaining your personal or departmental website(s).

Graphics

• ISSUE:

Images cannot be directly accessed by users of screen-readers, foreign language translation applications or some hand-held devices. Similarly, some users choose to disable picture loading - especially those users with slower dial-in connections. It may be difficult for some users to access information displayed using animations or Flash. Careful consideration should be taken to determine if Flash or a graphically intensive site is the correct solution.

An ALT tag is used to specify alternative text for an image. The alternative text will be spoken by a screen-reader, provide target text for users of speech-recognition technology, be displayed by browsers with picture loading disabled, and displayed briefly when a mouse or other pointing device is placed on the graphic. In the absence of an ALT tag, an unidentified gray box will be displayed by graphical browsers with picture loading disabled and screen-readers will speak the path and file name for the graphic - this rarely provides any useful information.

• STANDARD:

Include alternative text for all graphics. Alternative text should be included on all graphics including transparent graphics and other images (e.g., bars, borders and other objects) that are sometimes used for spacing and layout. The alternative text for these graphics is an opportunity to provide a description of the subsequent information or controls on the page (e.g., alt="Beginning of Site Navigation Controls" and alt="End of Site Navigation Controls"). If alternative text does not make sense for a graphic, continue to use the ALT tag, but have the value be " " (e.g. ALT=" "). This will help prevent screen-readers from speaking the entire path and file name for the graphic, which is usually useless information.

ALT tags may not be adequate for graphics (especially animations, Flash, tables, and charts) that are used to convey information. Along with ALT tags, the following may also be needed for conveying the information:

• Convey all of the information in the text body of the document.
• Use the graphic as a link to a complete text description of the information being     conveyed.
• Provide a separate link to a complete text description of the information being conveyed.

Frames

• ISSUE:

Frames used to divide a browser screen into two or more "windows" may be inaccessible to persons using screen-readers, screen magnification applications or users of some hand-held devices. Not all browsers support frames. Individuals with limited vision or low-vision may not be able to increase the font display size without truncating the text within a frame. Saving a frames-based page as a text document, for converting to Braille or large-print, may be difficult or impossible for users who must navigate using only the keyboard. Older adults and persons with cognitive impairments often find frames-based Web pages confusing and intimidating.

• STANDARD:

Avoid the use of frames. If frames must be used they shall be titled with text that facilitates frame identification and navigation. Use the HTML <noframes> element to point to an alternate page that does not use frames.

Marquees and Blinking Page Elements

• ISSUE:

Blinking page elements and marquees (text or images that scroll on the screen) can be problematic for persons using screen-readers, screen magnification applications, users with cognitive impairments or users of some hand-held devices. Blinking page elements or the refreshing of the screen to animate a marquee may trigger a seizure in people with photosensitive epilepsy (see Screen Refresh).

• STANDARD:

Avoid the use of blinking page elements and scrolling marquees.  If blinking page elements or marquees are needed, they should not refresh faster than twice a second to minimize the probability of inducing an epileptic seizure.

Browser-Specific HTML Tags

• ISSUE:

Some HTML tags are browser specific. Use of browser-specific tags may prevent page elements from being displayed or cause them to be displayed incorrectly by some browsers. Also, different browsers and operating systems display content differently even if it is the same code. Some browsers may not render the content correctly making it hard for users to read. Remember, people access Web pages using a variety of equipment and browsers.

• STANDARD:

Do not use HTML tags that are specific to (and only supported by) one browser.  Test web pages with a variety of web browsers including Netscape, Internet Explorer, and Mozilla and various operating systems including Windows and Mac OS. Make sure they all display the content correctly.

Multimedia

• ISSUE:

The visual components of a multimedia presentation cannot be directly accessed by users of screen-readers, language translation applications, some hand-held devices and browsers that do not support animations or have picture-loading disabled. Similarly, users who are deaf or hard of hearing will not be able to directly access auditory information. Some users may simply not have the equipment, software or connection speed necessary to access multimedia files.

• STANDARD:

If it makes sense and is possible, multimedia and audio presentations should be accompanied by text descriptions, either synchronized or transcribed of the multimedia content, especially if there is important information within the multimedia presentation.

A link to the plug-in, applet, or software download is recommended for a multimedia presentation that needs additional software.

Forms

• ISSUE:

Completing even the most carefully designed on-line forms may be difficult or impossible for users with certain types of impairments, users of some adaptive technologies and users of some Web-enabled devices. Individuals with mobility impairments may have difficulty accessing small form controls, such as radio buttons and check boxes.

It can be difficult for users of screen readers and other adaptive technologies to use the web form if the design, content, and layout are designed poorly using non-textual elements to define required fields and define special areas of the form.

• STANDARD:

Provide alternatives to completing on-line forms (e.g., E-mail, telephone, fax, postal mail, in-person) and clearly indicating that these alternatives are supported.

If the form is a PDF document, ensure that it is accessible both to lower version Acrobat users and screen readers.

Use <label> tags around form elements (e.g., checkboxes, radio buttons) and the text that corresponds to that form element so users can click on the text or the form element to select it. This makes it easier to select form elements.

The design, content and layout of an on-line form must be considered in order to ensure access for the widest possible audience - including users of adaptive technologies.

* Font styles, sizes, attributes, colors or other non-textual elements should not be used as the only means of indicating required fields and other form parameters.

* Legends for identifiers within the form (e.g., * = Required field) should appear prior to the form.

Downloads

• ISSUE:

A number of proprietary file formats (e.g., PDF, QuickTime, and Macromedia Shockwave) may be difficult or impossible to access for users of some adaptive technologies. Some users may simply not have the equipment, software or connection speed necessary to access these files.

Users may not possess the skills or utilities to extract archived files, such as *.zip (Windows) and *.sit (Macintosh).

• STANDARD:

When possible, include the following options for information presented in a proprietary file format:

• The information in an alternative accessible format (eg., HTML, text, rft).
• A link to the appropriate plug-in.
• A link to an accessibility plug-in or conversion site, if available.
• An alternative means of obtaining the information.

Self-extracting archives (i.e., *.exe (Windows) and *.sea (Macintosh) should be provided, over archived files (i.e., ZIP and SIT), in order to avoid requiring users to possess an extraction tool and/or knowledge regarding its use.

Provide PDF documents that are accessible both to lower version Acrobat users and screen readers.

When feasible, information to be downloaded shall be made available in a variety of file types.

Design Consistency

• ISSUE:

The use of consistent design strategies for all related documents will make navigation easier for everyone. A consistent look and feel, across all pages of a site, aids visitors in identifying ownership of a page. Once you have designed an accessible and effective page, use it as a template for all other pages of the site.

Navigation bars are often the first thing a visitor encounters on a web page. Each time a page loads, screen-reader users may have to listen to all of the navigational controls before hearing the main content of the page. Similarly, visitors who have difficulty controlling a pointing device and visitors with information tracking impairments may have difficulty scrolling the main content of the page into view.

• STANDARD:

Use a consistent look and navigational scheme for all pages of a site.

A method shall be provided that permits users to skip repetitive navigation controls and jump to the main content of a page, such as an anchor in the page that references the main content.

Font (Face, Size, Color)

• ISSUE:

Whether it is merely personal preference or necessitated by a visual impairment, individuals may view pages using fonts or color schemes other than those originally intended. The use of font face, font size, or color alone may be difficult or impossible to access for individuals who are color-blind, screen-reader users, individuals with low-vision, users of some hand-held devices, and individuals using a monochrome display.

The use of fixed font sizes, in an attempt to maintain the appearance and layout of a page, may prevent some users from being able to access the information. Visitors should be able to vary the size of the display font and have the information remain clear and accessible.

Increasing the font size alone may be inadequate for some users with low-vision. The contrast between text and the background should be significantly high at all color depths. Check your colors using different browsers and platforms.

• STANDARD:

Do not use only font face, size or color alone to convey information. Instead use header tags (i.e. <h1>, <h2>, <h3>, etc.). Many adaptive technologies use these as markers to easily navigate around the site. It may be good to wrap <h1> or other header tags around important images so adaptive technologies can easily navigate through site. These header tags were designed so <h1> would be used for the header, <h2> for sub-headers, <h3> for sub-sub-headers, etc and they can be customized using style sheets. These allow users to scale the font size up and down if they need.

Backgrounds And Wallpapers

• ISSUE:

Detailed or "busy" Web page backgrounds or wallpaper may make it difficult for users to discern the overlying text - it may be impossible for users with a visual or cognitive impairment. The readability of text against a background may vary greatly when the page is viewed using different font sizes, color depths, screen resolutions, platforms, browsers and other display color combinations - including black and white. Screen-reader users and some users of screen-magnification applications will not be able to access information presented as a graphical background or wallpaper.

• STANDARD:

Do not use complex backgrounds or wallpaper that may interfere with the readability of overlying text.
Do not use backgrounds or wallpaper to convey information.

Scripts And Roll-Overs

• ISSUE:

Web page controls that load a new page or otherwise move a user from their current location when a mouse-pointer is placed on the control may make navigation difficult or impossible for visitors who must navigate using a keyboard only, those who have trouble controlling a mouse and those whose equipment does not support a mouse or similar pointing device. Screen-reader users will not be able to access pop-up information or menus. Be sure to include the text of pop-up information in the ALT tag for the graphic and provide redundant links for pop-up menu items.

Web page authors have a responsibility to ensure that pages are accessible for users whose browser or adaptive technology does not support scripts, applets or other programmatic objects. When it is not possible to do so, equivalent information should be provided on an alternative accessible page.

• STANDARD:

Do not use roll-over controls that load a new page or otherwise move the user from the current location. For example, avoid the use of the "onChange" event-handler in a drop-down list.

Ensure that pages are usable when scripts, applets, or other programmatic objects are not supported or have been disabled.

Include text descriptions and redundant links for pop-up information and menus. Provide equivalent information and/or functionality on an alternative accessible page, when direct access cannot be achieved.