Accessibility in the Project Lifecycle

Tips for Web Developers

The tips presented here represent a sampling of techniques that web developers can use to provide accessible websites.

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 (future link)

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
  • More about Document Design (future link)

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>); this should reflect the purpose (title) of the page or view
  • 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 (future link)

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 (future link)

Styles and formatting

  • Ensure that your pages are usable without stylesheets
  • Use sufficient background/foreground contrast in your color palette
  • To promote good magnification, use em, %, or named sizes to define your font size, and not px, pt, cm
  • More about Styles and Formatting (future link)