Skip to main content

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 easy 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

  • 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

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 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

Online Forms

  • 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" />
  • 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: