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 access to multimedia for users with visual or hearing disabilities, such as video captioning, audio transcripts, and audio descriptions of visuals.
- 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.
- Allow keyboard-only navigation (e.g. Tab key to move sequentially, arrow keys to select items, Enter to submit).
- 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:
- Only the keyboard for navigation. (See WebAIM: Keyboard Accessibility.)
- A browser with images, styles and scripts disabled. (See WebAIM: Web Developer Extension: Disable)
- A screen reader such as JAWS or VoiceOver.
- Click in the browser window, select all (Ctrl+A), copy (Ctrl+C), and paste into Notepad (Ctrl+V) to show all text that is accessible to screenreaders.
- An automated online accessibility checker such as WAVE.
- An automated code checker such as the W3C HTML Validator.
- Browsers such as Mozilla Firefox, Google Chrome, Microsoft Internet Explorer and Edge, Apple Safari, and Opera.
- Desktop and laptop operating systems, including Microsoft Windows and MacOS.
- Mobile devices, including tablets, mobile phones and media players running Apple iOS and Google Android operating systems.