These guidelines are based on the Web Content Accessibility Guidelines (WCAG) 2.0, Section 508 of the Rehabilitation Act of 1973 (as amended) and the World Wide Web Consortium's Web Accessibility Initiative. These guidelines are in keeping with the spirit of current legislation such as ADA, Section 504 of the Rehabilitation Act, and Section 255 of the Telecom Act.
- List items marked with
are less technical and most relevant to web content providers and non-coders.
Navigation and Organization
- Write text clearly and simply.
- Every page should have an HTML
title tag that uniquely and briefly describes the page content, then includes the website title.
h6 tags for headings, properly nested to outline the content hierarchically and provide navigation for screen readers.
em tags for emphasis, instead of styles or underlines.
- Use list elements
dl to create lists.
ul (unordered lists) to create navigation menus.
- Navigation should be simple and consistent.
- Navigation links should come after the main content, or provide a link or method that allows users to skip repetitive navigation links.
- To display content only to screenreaders, use absolute positioning off the screen instead of
- Frames should have a
title attribute containing text that facilitates identification and navigation.
- In HTML5, structure the page using semantic elements (such as
- In HTML5, add ARIA landmarks using attributes such as these:
role="" for important page elements:
aria-readonly set to
true for some form fields.
aria-labelledby to clarify elements with a role.
- Keep tables as simple as possible; minimize use of nested tables and cells that span multiple rows and columns.
- Use a
summary attribute and/or
caption element to summarize the table contents.
th elements and
scope attributes for row and column headings.
- Use tables for tabular data. Minimize use of tables for page layout.
- Layout tables should use the ARIA
role="presentation" attribute, but not
- WebAIM: Creating Accessible Tables
- Links should describe the linked page and make sense if read out of context; not "click here" or "more".
- Check for broken links with a link checking tool.
- Add a
title attribute sparingly to links requiring more explanation, such as rollovers, mouseovers, and flyouts.
- Navigation buttons or tabs should be large enough for easy use.
- WebAIM: Links and Hypertext
- Use an
alt attribute (alternate text) to describe the content and function of images, image inputs, image map areas, and Java applets.
- HTML code:
<img src="/images/morgan.jpg" alt="Morgan Library" />
- An image which is not a link, and merely decorative or explained in the page text, should use an empty alt attribute:
- Add alt text to images in WordPress
- For image maps, use client side rather than server side.
- Use moving or animated graphics or text sparingly and consider alternatives, to avoid distraction and triggering seizure disorders.
- WebAIM: Accessible Images
- When using PDF documents and Power Point presentations, ensure that they are accessible, and/or also provide the information in HTML format. (See Adobe accessibility information.)
- When a plug-in, player, viewer or application is required to view essential content, provide a link to download the plug-in, such as Adobe Reader for PDF files. If you are unsure if the plug-in meets accessibility standards, provide the information in an alternative format.
- Provide synchronized multimedia so users with visual or hearing disabilities will be able to access this content.
- If elements cannot be synchronized, provide an alternative with description of video and captioning of audio information.
- Manual controls for multimedia (such as video, audio, and image carousels) should not require using a mouse.
- CSU Accessibility Guidelines: Creating Accessible Multimedia
- Design electronic forms to allow for easy navigation, completion, and submission of the information requested.
- Pressing the TAB key should flow sequentially through the form.
- Form controls such as text fields and text boxes should be properly labeled using a
label element with a
for attribute that matches the
id attribute of the control.
- HTML code:
<label for="name">Name:</label><input id="name" type="text" name="textfield" />
legend elements to group related fields.
- Instructions and text-based descriptions of the information requested should be positioned before the form elements.
- Allow extension of any time limitations.
- Error-handling should include both client and server validation, error messages that clearly indicate the problem and solution, and easy error correction.
- Provide an alternative way of providing the information requested.
- WebAIM: Creating Accessible Forms
- Assure that script content and fuctionality are accessible.
- Assure that scripts do not make form elements inaccessible to keyboard navigation.
- A text description should be provided before the script executes if the script conveys additional information or performs a function that affects the user's interface.
Test Your Work
Check your site using different technologies, such as: