Accessibility Practices for Web Authors

Introduction

The following is not a comprehensive list of accessibility practices, nor will completion of this list guarantee that a web resource is completely accessible.  However, if you incorporate these practices into your development process, you will provide a better and more accessible web product for your users.

Images and non-text elements

  • All <img> and <area> elements include ALT attributes
  • ALT attributes provide content and functionality (i.e., linking, focusability) equivalent to the <img> or <area> element
  • Long text descriptions are provided for non-text elements that require detailed explanation
  • Decorative images include empty ALT text (alt="") and no TITLE attribute
  • Images included using CSS (e.g., background images, list-style-images) do not convey important information or functionality, including navigation or branding
  • Embedded and other objects (e.g., multimedia, applets, Flash components, etc.) are accompanied by appropriate text alternatives and references
  • Pages with visual CAPTCHAs include CAPTCHAs that use a different modality

Keyboard operability

  • All functionality is keyboard operable
  • Keyboard order reflects logical page order
  • Where mouse event handlers are in use, keyboard handlers are also available
  • Change of page context should be controllable by user
  • When an element receives focus, there is a visual indicator such as an outline or color change
  • No keyboard traps exist (i.e., the keyboard user can navigate in and out of page elements)

Forms

  • Forms are keyboard navigable; users can Tab and Shift-Tab between form fields
  • All form fields are associated with <label> elements, the TITLE attribute, or an ARIA label
  • Radio button, checkbox, and other groups of related fields are associated by means of fieldset/legend, ARIA-labeledby, or similar grouping
  • All error prevention and handling are exposed to and navigable by all users
  • Pages maintain a properly nested heading structure, skipping no heading levels
  • Pages include a top-level heading, marked up as <h1>

Metainformation

  • Pages should include a unique <title>
  • <title> should be relevant
  • LANG attributes for HTML tag identifies default language for page
  • Elements in languages other than default use LANG attribute to identify language

Magnification

  • Page maintains legibility after page magnification in browser
  • Content maintains legibility after text magnification
  • Content reading order is linear and logical in the absence of styles and formatting
  • Form control sizes are defined as percentages, ems, or by named sizes

Links

  • Use meaningful  text to identify hyperlinks(e.g., "More about Diversity"; "Proceed to Checkout")
  • Ensure that links are focusable and can be activated by keyboard
  • Links are visually identifiable, and distinguishable from other page content
  • Provide ALT text for images that are also links
  • Links to the same resource should use the same or similar link text
  • Link text uses device-neutral wording, such as "Proceed to…"
  • TITLE attribute in hyperlinks provides advisory information only

Media

  • All online video is accompanied by captions
  • All online audio is accompanied by a text transcript
  • University-provided media players are keyboard-accessible, and that individual player controls are announced by screen readers and other assistive technology
  • No other accessibility barriers are presented by online media

Tables

  • Tables use <th> and <td> to present data
  • Table headers and table data cells are related by associative markup such as SCOPE
  • Tables should not be used for layout; layout tables include ARIA role="presentation"
  • Foreground and background contrast must be sufficient
  • Font sizes should be defined as percentages, ems, or by named sizes

ARIA and interactive elements

  • All page content is contained in appropriate ARIA landmarks
  • Interactive elements include the role attribute to inform the user of the widget's purpose
  • Interactive elements that change state include appropriate ARIA attributes (e.g., ARIA-EXPANDED, ARIA-INVALID)
  • Complex ARIA widgets include appropriate role, state, label and relationship information
  • Interactive elements are enhanced progressively, built on elements with native functionality
  • ARIA widgets use predictable keystroke patterns that are consistent with their roles in other applications