Skip to Main Content

LibGuide Design: Best Practices and Guidelines

LibGuide Design

Guide checklist

Guide & Page Names 
  • Descriptions added to guide and all pages
Friendly URLs and descriptions
  • Friendly URLs created for the guide and all the pages within the guide
Text Formatting & Headings
  • Heading levels are used in the body of the text, and in logical order
  • To make text larger, use headings rather than increasing the font size.
  • Use clear fonts and don't mix different font types. It is recommended that you use the LibGuides default font, but if you change fonts, select a font that is easy to read online.
  • Use emphasis - bolding, italicizing, and changing the color of text - sparingly. 
  • Don't use all caps for emphasis. This can cause difficulty for users of screen readers.
  • Don't use underlines for emphasis. Users will think an underline is a hyperlink.
  • Don't rely on changing text color to emphasize text. Color won't be useful for all users, and is usually unavailable to screen reader users.
  • If you change your font color, make sure there is a strong contrast between your font and the background.
  • Non-English language text has been added to HTML tags
Tables
  • Tables are only used for data and formatted appropriately
  • Avoid using tables for layout purposes whenever possible.
  • Use tables mainly to display data that fits well into rows and columns.
  • Tables that are used to organize tabular data should have appropriate table headers (the <th> element).
  • Add table caption and summary to provide more information about the table for screen reader to pick it up.
  • Avoid spanned rows as screen readers may not properly parse them.

Links
  • Contexual links - link text is informative and tells the user where they'll be taken
  • No broken links - links have been reviewed and go to the correct destination
Images & Alternative Text
  • Images have appropriately descriptive alt-text (ALT tags)
  • Infograhics have appropriate alt-text and longer text descriptions
  • Don't use an image is the subject of the image is just text.
  • Make sure your linked text makes sense out of context. Avoid using words or phases like "click here," "more," or "click for details" in front of links.
Embedded Media
  • Captions and/or transcripts are available for audio or video in your guide 
Colors
  • The default colors for text and background are the best options. It is recommended that you leave these options as is to mitigate contrast issues.
  • Don't rely on changing text color to emphasize text. Color won't be useful for all users, and is usually unavailable to screen reader users.
  • If you change your font color, make sure there is a strong contrast between your font and the background
Gallery boxes
  • Only use these for images.