Internet Oversight Committee

Accessibility Guidelines

Under federal law, Section 504 of the Rehabilitation Act and Titles I and II of the Americans with Disabilities Act (ADA) are the applicable mandates for the university's efforts to provide electronic accessibility to persons with disabilities. Also, for some federal grants and contracts, there may be requirements that grantees and contractees comply with Section 508 of the Workforce Investment Act of 1998, codified as Section 508 of the Rehabilitation Act Amendments of 1998. Because of that possibility and because the standards included in Section 508 provide one route to electronic accessibility, the following criteria drawn from that statute are offered as guidelines. Other accessibility models, however, may also be permissible under Section 504 and the ADA .

Methods of compliance with the North Carolina Persons with Disabilities Protection Act are based upon recommendations found within the Final Report of the IRMC Accessibility Work Group. Specifically, it recommends that WAI Checkpoints Priority One and Priority Two would appear as best practices within the Technical Architecture.

See the following web sites for reference:


Contents:

 

Text, Fonts, and Colors

Summary

  • Choose fonts that are easy to read for users with low vision.
  • Don't rely on color alone to convey information.
  • Create text based upon function, not presentation.
  • Be clear with your content.

Guidelines

  1. Divide large blocks of information into more manageable groups where natural and appropriate.
  2. When possible, text should use sans-serif fonts, such as Verdana and Arial. These are easier to read on a computer screen than fonts with serifs.
  3. All information that is conveyed with color should also be available without color.
  4. Choose colors that can be distinguished by people who are colorblind. When choosing backgrounds and colors, make sure that color combinations are effective.
  5. Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
  6. Don't use background images that blend in with overlaid text. It may not be noticeable to users with good eyesight, but this can make your web page hard to read for users with low vision.
  7. Mark up lists and list items properly.
  8. Mark up quotations. Do not use quotation markup for formatting effects such as indentation.

Tools

Juicy Studio Colour Contrast Analyser
Allows you to check the contrast of two colors using the W3C's color contrast algorithm by specifying the colors directly.
Colorblind Web Page Filter
to see how your web page appears to users with colorblindness.

See Also

Graphics, Multimedia and Dynamic Content

Summary

Non-text materials cannot be read by screen readers and text-only browsers. Provide text alternatives.

Guidelines

  1. Use the ALT attribute to provide text equivalents for all IMG elements
  2. Provide text equivalents for all other non-text items
  3. Provide equivalent alternatives for any multimedia presentation and synchronize these alternatives with the presentation
  4. People with photosensitive epilepsy can have seizures triggered by flickering or flashing in the 4 to 59 flashes per second (Hertz) range with a peak sensitivity at 20 flashes per second as well as quick changes from dark to light (like strobe lights). If you include animated gif images or other refreshing content that cause the screen to flicker, avoid causing a flicker with a frequency greater than 2 Hertz and lower than 55 Hertz.
  5. Until user agents provide the ability to stop the refresh, do not create periodically auto-refreshing pages.
  6. When an appropriate markup language exists, use markup rather than images to convey information. For example, MathML, CML
  7. Until user agents provide the ability to stop auto-redirect, do not use markup to redirect pages automatically. Instead, configure the server to perform redirect

See Also

Image Maps

Summary

  • Use client-side image maps instead of server-side image maps where possible.
  • Navigating image maps can present problems. Provide textual alternatives.

Guidelines

  1. Image maps fall into two categories: server-side image maps and client-side image maps.
  2. A client-side image map's functions are provided on the client's end (the user's browser) rather than at your web server's side. All the information needed to run the map is included in your web page document. Since text-only browsers, screen readers, and other devices may not be capable of interpreting links in server-side image maps, use client-side image maps instead of server-side image maps whenever possible.
  3. Server-side image maps do not allow you to use ALT tags to describe individual links in the image map. So if you use a server-side image map, provide a redundant set of text links to duplicate the links in the map. This allows users to interact with the links without having to use a pointing device, such as a mouse.

See Also

Tables

Summary

Make sure tables will be read in the correct order by non-graphical browsers

Guidelines

  1. Used for Page Layout
    1. Page layout tables visually format images, text, and other information on the page such as a navigation bar, or a newspaper page with stories, links, and images. Each cell in a layout table is normally independent and can be viewed on its own.
    2. If you use a table for layout purposes, make sure the table makes sense when it is linearized. This means that the cells are read in the order in which they appear in the HTML source code. This is not necessarily the order in which the text is laid out on the screen.
  2. Used for Data Presentation
    1. Data tables present relational data such as a bus schedule, a comparison of regional sales figures, or a listing of employee contact information.
    2. Provide information about the table by using appropriate table markup (e.g., markup headers on data tables using the TH element; use the SUMMARY attribute; etc.).
    3. For data tables that have two or more logical levels of row or column headers, use appropriate markup to identify those divisions.

Tools

Complex Table Inspector
ECMAScript-based Favelet that reveals hidden table information such as the scope, header, and abbr attributes

See Also

Frames

Summary

Title frames to minimize confusion for screen reader users.

Guidelines

  1. To facilitate frame identification and navigation, title each frame, using the HTML TITLE attribute.
  2. Use the NOFRAMES element to define frames content for browsers that cannot display frames.
  3. Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone.

See Also

Style Sheets

Summary

If you use style sheets, make sure the content makes sense without the style sheet.

Guidelines

  1. Use style sheets to control layout and presentation.
  2. Use relative rather than absolute units in markup language attribute values and style sheet property values.
  3. Style sheets are used to control the layout and appearance of web pages. Some browsers, including screen readers and text-only browsers, ignore style sheets when reading the content to users. If you use a style sheet, check your page with styles turned off to see if the page still makes sense.

Scripts, Applets, PDF Files, & Other Applications

Summary

Some browsers/screen readers do not support some plug-ins, applets, scripts, or other propriety formats. Provide alternatives for their users.

Guidelines

  1. Provide alternative content for users with browsers that don't support scripts. Put the content within a NOSCRIPT tag.
  2. If your web page requires the user to have an applet, plug-in, or other application to interpret the page's content, you should provide a link on the page to it.
  3. Adobe PDF (Portable Data Format) files can be interpreted as graphics rather than as text by screen readers, rendering them inaccessible. If you must include a PDF file, make an HTML version of the file and include links to both versions.
  4. For scripts and applets, ensure that event handlers are input device-independent.
  5. Avoid movement in pages
  6. Ensure that any element that has its own interface can be operated in a device-independent manner.
  7. Include ALT attributes when you use Java applets so browsers that don't support Java will give the user information about the applet's function.

See Also

Interactivity

Summary

  • Design forms so that all input elements are clearly labeled.
  • Ensure that all interactive elements (like menus) are usable without the mouse or that alternatives are available that do not require the mouse and provide the functional equivalent.
  • Do not change the user's focus without permission.

Guidelines

  1. Electronic forms that are supposed to be completed online should allow people using assistive technology to complete the forms. They should be able to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
  2. For all form controls with implicitly associated labels, ensure that the label is properly positioned.
  3. Associate labels explicitly with their controls.
  4. If a timed response is required, alert the user. Provide a way for the user to indicate if they need more time to respond.
  5. Screen readers and some browsers are unable to read moving text. Do not use moving, blinking, scrolling, or auto-updating objects or ensure, at the very least, that those objects can be stopped by the user.
  6. Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

See Also

WebAIM: Creating Accessible Forms

Navigation

Summary

  • If you repeat navigation bars on a page, let users skip them.
  • Ensure that all links have meaningful text.

Guidelines

  1. Navigation links, menus, or banners are often repeated on each web page. Include a skip to main content link at the top of each page so that screen reader users can save time and don't have to listen to a repeated menu each time they move to a new web page.
  2. Use navigation mechanisms in a consistent manner.
  3. All links should have text that is meaningful. Some users and methods of browsing rely on the link text (and not the surrounding context) to determine the purpose of the link. Link text like “click here” does not provide the user with any useful information about the link.

See Also

Programming & Structure

Summary

  • Create documents that validate to published formal grammars.
  • Use current W3C technologies and use them correctly.
  • Provide additional information to enhance accessibility.

Guidelines

  1. Use header elements to convey document structure and use them according to specification.
  2. Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported.
  3. Avoid deprecated features of W3C technologies.
  4. Provide metadata to add semantic information to pages and sites.
  5. Provide information about the general layout of a site (e.g., a site map or table of contents)

Text-Only Page

Summary

  • When all else fails, provide separate, equivalent text versions of your pages.
  • Use of a text-only page must be approved by the University Web Accessibility Coordinator.

Guidelines

  1. If you cannot accomplish compliance with these guidelines in any way on your web page, you must still provide users with disabilities with the equivalent information or functionality. This can be done with a text-only page.
  2. The content of the text-only page must be updated whenever the primary page changes. By choosing to offer a text-only version of your web pages, you will have two versions of your web site to maintain and update.