Section 508 of the Rehabilitation Act requires that technologically-presented information be accessible to employees and the public. Some of the design limitations in place in the CMS are to assist our site in being as accessible and ADA compliant as possible. Web Content Accessibility Guidelines 2.0 (WCAG 2.0) is a stable, referenceable technical standard which helps explain and provide benchmarks for accessibility of online content. It has 12 guidelines that are organized under 4 principles: perceivable, operable, understandable, and robust. For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA.
The 12 quick reference guidelines for web-based information from the WCAG 2.0 are:
From the NY Times:
From the Department of Justice:
From The Chronicle:
"Let's Give the Blind Better Access"
May 8, 2011
"Best and Worst College Web Sites for Blind Students"
December 12, 2010
- Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
- Time-based Media: Provide alternatives for time-based media.
- Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
- Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
- Keyboard Accessible: Make all functionality available from a keyboard.
- Enough Time: Provide users enough time to read and use content.
- Seizures: Do not design content in a way that is known to cause seizures.
- Navigable: Provide ways to help users navigate, find content, and determine where they are.
- Readable: Make text content readable and understandable.
- Predictable: Make Web pages appear and operate in predictable ways.
- Input Assistance: Help users avoid and correct mistakes.
- Compatible: Maximize compatibility with current and future user agents, including assistive technologies.
As a note on #4: Colors sometimes do not render well on various web browsers, provide difficulties with proper text/background contrast levels, or otherwise are unsuitable for web design. In addition, ADA Compliance requires that there be contrast between backgrounds and the text of a page, so what colors are available in which combinations is fairly limited.
It should be noted that the General Web Design Standards do not recommend white text on a dark background.
To define those further, some points from the Section 508 website:
- A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
- Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
- Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
- Documents shall be organized so they are readable without requiring an associated style sheet.
- Redundant text links shall be provided for each active region of a server-side image map.
- Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
- Row and column headers shall be identified for data tables.
- Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
- Frames shall be titled with text that facilitates frame identification and navigation.
- Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
- A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
- When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
- When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).
- When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
- A method shall be provided that permits users to skip repetitive navigation links.
- When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
You will see immediately that some of these apply to general websites, while some are harder to see the connection. Here is a bit of commentary some of the items, and ways in which they are applied in the Skidmore web systems:
- In OU Campus, there is a field for each image to enter an Image Description and Title. Use of these fields is something that is stressed in training classes and in individual sessions.
- Whenever you provide an image as a link, you should also provide a text link somewhere on the page as an alternative (it could be in the main menu, but somewhere on the page.)
- Mulitmedia presentations should always be accompanied by an accessible alternative.
- Properly coded H1, H2, H3, and other style tags are provided for use in formatting
the outline of pages.
- H1 is reserved for the title of the page only.
- H2 should be used sparingly, for major subheadings on the page. It should NOT be used for entire blocks of text.
- H3 can be used for other subheadings on the page, to call out section titles, etc. It should NOT be used for entire blocks of text.
- The colors available for use in OU Campus are extremely limited, by design, partially in order to comply with these requirements (both in terms of background colors and text colors.) This ensures a high enough contrast between text and background.
- Tables in the OU Campus have a summary field to make them accessible when the table cannot be read or rendered.
- Tables should only be used for data presentation, never for page layout or navigation
listing. General guidelines:
- If you can't put a header row on it and name the columns, it's not a data table and you should format it another way.
- One column or one row does not make a table, and you should format that data another way.
- Use bullet lists as an alternative.
- Properly coded snippets are provided for creating tables, bulleted lists, and images with caption boxes. Explore these options for enhancing your page with accessible programming.
- Properly coded snippets are provided for establishing some customized page layouts, such as two or three columns. Explore those snippets and do not use tables for this purpose.
- OU Campus does not use frames for web pages.
- Do not use blinking text, moving text, blinking graphics, or moving graphics on college web pages.
- Scripts created for OU Campus are accessible to assistive reader technology wherever possible.
- Applets such as the Flash banners display a message that the user requires Flash to view the element, and recommends download.
- Wherever possible, plug ins are programmed to not require downloaded applications, and to run on all available platforms.
- The OU Campus Web site does not utilize intrusive repetitive navigation elements.
- The OU Campus Web site does not currently include any timed-response elements.
If you have any questions about whether your pages comply with these guidelines, or if you want more information about ADA compliance and web standards, please contact the Web Development team of the Office of Communications and Marketing.
- Web Content Accessibility Guidelines 2.0
- Mobile Accessibility (WCAG 2.0)
- Web Accessibility in Mind
- Section 508 website
- The Access Board Section 508 Guide
- Access Board Section 508 homepage
- Jim Thatcher's Section 508 Tutorial
Checks/Tests for Compliance
Before using these tools, please be aware that some are computer-automated systems
- they can generate a report of findings, but it is up to each site owner/editor to
use those reports thoughtfully to ensure that web content is ADA compliant.
For example: the report may say that there is alt text for all images - great! But then the site owner/editor must still visit each image and make sure that the alt text is relevant to image content.
- Microsoft Word and Accessibility
- PDF Accessibility
- WAVE toolbar for website accessibility testing
- SortSite for website testing and accessibility check
This policy is adapted from the RIT policy on web design standards. This policy is subject to change as new standards are deemed necessary. This version is based on the 2009 edition of the Graphic Standards manual, but contains more up-to-date information and thus shall be considered the official statement regarding web design standards. If you have any questions, or wish to report an error, please contact the Web Development team of the Office of Communications and Marketing.