The following are some tips intended to improve the accessibility of your web content. Like all such tips, they are broad and general, and you may find instances in which they do not apply. But for the majority of use cases, these should help.

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, meaningful ALT text
  • For complex images, such as charts or graphs, use brief ALT text and add a link or reference to a more detailed explanation
  • If an image is already adjacent to the text that describes it, use an empty ALT attribute
  • For decorative images, use an empty ALT attribute
  • For spacers and shim images, use an empty ALT attribute
  • Avoid using file paths (DSC0001.jpg) for ALT text
  • Avoid using "Link to…", "Image of…", "Button for…", "Logo for…" or similar constructions in ALT text
  • Remember that every image or AREA element uses ALT text
  • More about images and ALT text

Keyboard operability

  • Use :focus styles wherever you use :hover styles
  • Use focus and blur events wherever you use mouseover and mouseout events
  • Ensure that there is a visual indication when an element receives focus
  • Make sure your tab order is logical
  • Avoid keyboard traps; ensure that users can key into and away from interactive elements
  • More about keyboard operability

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

  • ID and HEADERS to associate <th> and <td> cells
  • SCOPE attribute for header cells
  • Caption element available for all data tables
  • Summary attribute available for all data tables
  • Avoid tables for layout
  • More about data tables

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