Accessibility by Design

These tips will work for flyers, brochures, presentations and websites -- any place you need to make sure the style of your text or the format of your media -- doesn't get in the way of meaning. 

10 Basic Principles of Accessibility in Design


Fonts: Type & Size

  • Minimum size for body text is 14
  • Use easy-to-read fonts: Arial, Helvetica, Times
  • UVM's recommended fonts fall into this category


Color: Contrast & Grayscale

  • Use the WebAim color contrast checker. 3:1 is the minimum
  • Don’t use color to indicate meaning: “Push the purple button” is meaningless for anyone who can't see purple


Style headings instead of using bold, italics or ALL CAPS

  • Style headings are Title, H1, H2, H3
  • They help screen readers and keyboard navigation in scanning a document


All photos, icons and figures have alt-text

  • 1-3 descriptive sentences
  • If the images show people, the alt-text should indicate skin, hair and eye color, as well as basic dress and hairstyle


Think about column width

  • People’s eyes get tired reading a full-width page — especially on screens. 
  • 80 characters is the ideal maximum width for a column of text.


All videos should have captions

  • Automated captions don’t count
  • Find out more about captions from the UVM Student Access Center


All audio has a transcript

  • That means all podcasts
  • Anything shown on screen should be described some other way


Whenever possible, provide a choice of file formats

  • Not everyone has Word
  • Not everyone loves a .pdf
  • Give your audiencea choice of options


Know your underlines!

  • Underline links
  • Don’t underline anything else


Color the alternating rows of tables

  • Remember to check the color contrast of both colors against your text


Designing for accessibility from the start is much, much easier than having to go back and build it in afterwards.

Tweet from Brian Parsons: Created this graphic to help visualize the ease of accessibility when taken into account from the beginning and the messiness when it's an after thought. Thanks to @cordeliadillon for creating this great metaphor that inspired me.

Two panels. On the left, two people bake blueberry muffins, pouring blueberries into the batter as they stir. On the right, the muffins are out of the oven with no blueberries, and the two people attempt to mash blueberries into them, crying, while the muffins explode.