Content Pages

Readability

  • White space or negative space should be used around content to help differentiate various components of the course and increase comprehension. Avoid large blocks of texts or the use of many images.
  • Avoid grammar and syntax errors.
  • Color coding of text or highlighting should only be used to serve specific instructional purposes. Color alone should never be used to convey meaning.
  • Underlined text should be avoided unless used for navigation.
  • Text should be clearly distinguishable from the background. Text and background should have a contrast ratio of at least 4.5:1. (Online Contrast Checker)
  • Font style and size should maximize on-screen legibility. Avoid ornate fonts and limit number of fonts to one or two.
  • PDFs that contain text are not merely image scans; any text contained in PDFs should be selectable and searchable.


Headers

  • Use headers to indicate the hierarchy of content on each page or document (Header 1, Header 2, etc.) so that learners can move easily through the content.
  • Use headers consistently to indicate change of topics. Group similar content together under a header. (The table of contents on each page of this website was created using headers).


Links

  • Links, files, and icons should be clearly labeled with easy-to-understand, self-describing , and meaningful names. For example, the text "NCSSM Website" should be used instead of "www.ncssm.edu" or "this link" or "click here".
  • Icons used as links should also have HTML tags or an accompanying text link.
  • Check your course for broken links. (Canvas Guide: How Do I Validate links in a course)


Images

  • Use images sparingly.
  • Each image should be described via an alt-tag, long description, or audio description. (Guide: Make your image, audio, and video accessible.)
  • Images should be appropriately sized so that they can be viewed in their entirety without scrolling.


Multimedia

  • Graphics and animation should enhance instructional materials without causing distractions.
  • Video resolution should be sufficient for comprehension.
  • Video and other multimedia should utilize captions and/or transcripts.
  • Audio quality should be clear.
  • Longer videos (longer than 15-20 minutes) should be broken into shorter segments.
  • Upload videos to Canvas using Panopto so your videos will be searchable by students. (NCSSM Teacher Guides: Panopto)
  • Do not use Flash or Java-based multimedia.


Tables

  • Tables should be set up as text and not embedded as images or screen captures.
  • Tables should only be used for summarizing data, not for formatting.
  • Tables should be set up with headings for columns and rows. Tables should have captions, alt-text or alt-tags, and are formatted so that headings repeat.

Examples of why you should not use tables for formatting

Image showing a table being used incorrectly for formatting. Links to course content have been inserted into the table cells rather than data.

Image 1: In this example, tables are incorrectly used for formatting, rather than summarizing data. Tables used for formatting often do not display properly in mobile browsers or the Canvas app.

When a student clicks on the "Webinar PowerPoint" file preview, the preview will not display correctly (see image 2).


Image showing a PowerPoint slide only partially displaying because it was inserted into a small table cell.

Image 2: When links to files are inserted into tables, the file previews cannot render to fill the screen properly. The file preview will only fill a single table cell. Imagine you are a student in the example above, in which a PowerPoint slide only partially displays.