Creating Accessible Online Content

Online content includes Canvas courses, web pages, and other web-based material created for your course.

Page Content and Structure

  • Use clear and consistent layouts, navigation, and organization to present content.
  • Keep paragraphs short and break up text with lists and other structural elements to avoid large blocks of text.
  • Do not use blank lines, tabs, or spaces to create page structure.
  • Avoid the use of text boxes whenever possible.
  • Use built-in tools to create ordered (numbered) and unordered (bulleted) lists.
  • Instructions should not rely on shape, size, visual location, orientation, or sound (e.g., “Click the red button to continue,” “Start recording after the tone,” “Identify the map in the upper right corner,” etc.).

Headings and Titles

  • Use built-in heading and paragraph styles to create page structure instead of changing font weight, size, or style to organize content.
  • Assignment of heading levels should reflect the hierarchy of the document or page contents (i.e. <h1> designates the main topic and <h2>, <h3>, etc. designate smaller, nested sub-topics). Be aware that some online platforms (such as Canvas) automatically designate some of the higher heading levels.
  • Heading levels should not be skipped and smaller heading levels should nest within larger heading levels (like a table of contents)
  • All pages should have descriptive and informative titles.
  • Titles and headings should be unique within the site or document to avoid confusion.

Images and Graphic Elements

  • All images should have appropriate, concise, alternative text.
  • Images that are decorative or do not otherwise convey information are marked as such.
  • Equivalent alternatives to complex images should be provided in context or on a separate page.
  • Use real text and not images of text (or provide all text included in graphics as readable text on the page)
  • Gifs and other animated content has a text alternative or is described in the text.
  • Avoid using content that flashes, blinks, or uses sparkling animation.

​​​​​​​Use of Color

  • Text and images of text (such as text on an image of a chart or graph) should have a contrast ratio of at least 4.5:1.
  • Graphical objects that contain components required to convey essential information (such as data elements in a diagram or chart) will have a contrast ratio of at least 3:1 against adjacent colors.
  • Color should not be used as the sole method of conveying visual information (e.g., colored dots indicating optional or required assignments, using highlighted text to indicate important information or for document editing, colors used to show various areas on a map, color alone used to identify hyperlinks)

Tables

  • Use tables for data and not for page layout.
  • All tables should have dedicated header rows and avoid using merged or split cells.
  • Avoid blank cells whenever possible.
  • Overly complex tables can be broken down into multiple, smaller tables.
  • Course content should not contain images of tables.
  • Tables should have a title or caption.

Text, Links, and Language

  • Use text instead of images of text whenever possible. If text is used in an image, that text should also be available in the page content.
  • Do not use fonts that are not readily available.
  • Use emojis instead of emoticons.
  • Do not underline text unless it is a link.
  • Use meaningful link text (e.g., "learn more about meaningful links" and not "to learn more about meaningful links, click here"). Users should be able to tell where a link goes from the link text itself.
  • Do not use text formatting alone to convey meaning. For example, in a list of students, do not bold some names to indicate who will present on a topic. Convey the information in another way (e.g., have two lists of students, with one list being the list of presenters).
  • Do not justify text (i.e., aligned to both the left and right margins). Left-justified text is preferable.

Mathematical and Chemical Formulas

  • Should be presented as readable text and not as images. Or, if images are used, formulas and equations should be explained in plain text.