The following are some tips intended to improve the accessibility of your web content. These guidelines are broad and general, and apply to a wide variety of use cases. For

Images and ALT text

  • ALT text should convey the meaning and function of the image, not the physical style or appearance
  • For images of text (such as logos or wordmarks), use the image text as ALT text
  • For simple images, use short, descriptive ALT text
  • For complex images, such as charts or graphs, use brief ALT text and add a link or reference to a more detailed description
  • If an image is already adjacent to the text that describes it, use an empty ALT attribute or ARIA presentation role
  • For decorative images, use an empty ALT attribute or ARIA presentation role
  • For spacers and shim images, use an empty ALT attribute or ARIA presentation role
  • Do not use file paths (DSC0001.jpg) for ALT text
  • Do not use "Link to…", "Image of…", "Button for…", "Logo for…" or similar constructions in ALT text
  • Remember that every image or AREA element uses ALT text or ARIA presentation role

Keyboard operability

  • Ensure that there is a visual indicator, such as an outline, when an element receives focus
  • Make sure your tab order is logical and reflects the page or process order
  • Ensure that your page contains no keyboard traps, so that users can key into and away from interactive elements
  • Use :focus styles wherever you use :hover styles
  • Use focus and blur events wherever you use mouseover and mouseout events

Web forms

  • Use only native HTML form controls to create form elements
  • Label all form fields for clarity
  • Associate and group form fields and labels, and collections of fields
  • Visually indicate a change of focus to the current field or form control
  • If a field requires a specific input format, such as a date or telephone number, provide an example of the format
  • Indicate required inputs as part of the control's label
  • Make sure that error and confirmation messages are exposed to the user
  • Require successful completion and validation of form prior to submit or reset
  • Maintain data within form inputs until the form has been validated and submitted
  • Provide a button or other control to enable users to trigger page events
  • More about web forms

Document design

  • Use ARIA regions to denote regions of your page
  • Place all content inside an appropriate ARIA landmark
  • Include a unique, meaningful <title> with each page
  • Avoid using tables for layout; use CSS instead

Using headings

  • Apply page and topic headings in a nested outline structure; use the outline structure to guide users through the content
  • Begin pages with a level 1 heading (<h1>)
  • Do not use headings or skip levels for stylistic or visual purposes; instead, use CSS to stylize headings in context
  • Place an appropriate heading before semantic lists of links or other navigation
  • Watch for relative headings in HTML5; these are treated and rendered differently than "hard-coded" headings
  • Assess your page headings using a utility such as the WAVE Toolbar
  • More about page headings

Data tables

  • Use ID and HEADERS to associate <th> and <td> cells
  • Use SCOPE attribute for header cells
  • Apply the caption element to all data tables
  • Apply the summary attribute for all data tables
  • Avoid tables for layout--if you must use tables for layout, use the ARIA "presentation" role

Styles and formatting

  • Ensure that your pages are usable without stylesheets
  • Use sufficient contrasts in your color palette
  • To promote good magnification, use em, %, or named sizes to define your font size, and not px, pt, cm

Multimedia

  • Provide captions for all video content
  • Provide transcripts for all audio content
  • Ensure that media players are keyboard operable