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.
- Use
h1
-h6
tags for headings, properly nested to outline the content hierarchically and provide navigation for screen readers.
- Use
strong
or em
tags for emphasis, instead of styles or underlines.
- Use list elements
ul
, ol
and dl
to create lists.
- Use
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
display:none
or visibility:hidden
.
- Frames should have a
title
attribute containing text that facilitates identification and navigation.
- In HTML5, structure the page using semantic elements (such as
header
, footer
, nav
, article
, section
and aside
).
- In HTML5, add ARIA landmarks using attributes such as these:
role=""
for important page elements: main
, navigation
, search
, banner
, article
, contentinfo
, etc.
aria-required
or aria-disabled
or aria-readonly
set to true
for some form fields.
aria-label
or aria-labelledby
to clarify elements with a role.
Tables
- 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.
- Use
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 summary
, caption
, th
or scope
.
- WebAIM: Creating Accessible Tables
Links
Visual Design
Graphics
- 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:
alt=""
- 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
Multimedia
- 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
Online Forms
- 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" />
- Use
fieldset
and 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
Scripting Languages
- Use HTML instead of scripting languages like JavaScript whenever possible.
- 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.
- WebAIM: Accessible JavaScript
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.
- Web 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.