Skip to main content

Designing for Accessibility

Tips, tricks for Universal Design, Design for All

Web Accessibility for Designers infographic with link to text version at WebAIM.org

From WebAIM's Resources for Designers

Tips

Write clearly

  • Keep it short. Use the simplest language appropriate for your content
  • Use illustrations, icons, etc. to supplement text.
  • Check spelling, grammar, and readability.
  • Be careful with abbreviations, jargon, complex language, or anything that might confuse the reader.
  • AVOID THE USE OF ALL CAPS. IT CAN BE DIFFICULT TO READ.

Structure your content instead of styling your content

  • Use true heading styles <h1>, <h2>, <h3>, etc. to organize the elements on the page
    • Do not skip levels between heading styles
    • The headings will outline the content on the page, making it easier to navigate with screen readers and mouse-less interfaces
    • Can get to desired content more quickly
  • Use true bullets <ul> and numbers <ol> for lists
  • Do not rely upon font changes in color, size, boldness, to indicate a new section
  • Do not rely upon spaces or tabs to place content

Think about users with visual impairments

  • Use strong contrast between text and background colors
  • Do not use color alone to convey meaning
  • Do not use descriptions that rely on sight (such as "click on the left square")

Ensure links are descriptive

  • Avoid phrases such as
    Click here to access Dashboard
  • Use active phrases such as
    Sign in to Dashboard
  • Do not list URLs as links

Provide alternate text for images, video, audio, and tables

  • Audio files must have a transcript or text equivalent readily available
  • Video files must have closed captions and/or transcripts
  • Provide transcripts of dialog in comics and other complex images
  • Use alt tags to describe what's important about this image in relation to the other content on the page
    • Describe the image in context ; will the alt text make sense when read aloud
    • Put a period at the end of alt tag; it makes screen readers pause
  • For purely decorative images, use <img alt="">; screen readers will skip it
  • Transcribe text for screenshots, including tweets and other social media
  • For data tables, use table, row, and column headings

Adapted from Creating Accessible Electronic Content

Otis College of Art and Design | 9045 Lincoln Blvd. Los Angeles, CA 90045 | Otis Dashboard

Millard Sheets Library | Library Dashboard Site | 310-665-6930 | Ask a Librarian