Skip to Main Content

Style Guide & Resuable Content

A place to find information on our overall style formatting, reusable boxes and pages, and tutorials

Best Practices

Our custom JS/CSS code uses a Sans Serif font family (Arial, Helvetica, Verdana) set at 21px (15pt font). For best results, avoid changing the typeface used by our LibGuides website.
Please do not mix different font types.

  • PUTTING TEXT IN ALL CAPS usually makes it harder to read. Use capital letters carefully. 
     
  • Try to avoid underlining. Many users associate it with hyperlinks, leading to confusion.
     
  • Text information presented in a graphic should be accompanied by a text-only equivalent whenever possible. Screen reading software cannot read graphics. 
     
  • Use left-aligned (left justified) text. Having a consistent margin makes text easier to read. Centered text requires the reader's eyes to jump around too much to find the starting place of each line. It should be used very sparingly or - preferably - not at all. 
     
  • Headings convey the hierarchy of information to screen readers, making page navigation more effective. Switch over to the public/web view to see how headings translate with our coding:

    • Heading 3

    • Heading 4

    • Heading 5
  • Color choices can impact accessibility for people with color-blindness. If you are using a color to convey meaning, add additional cues (e.g., boldness, position, contrast)
     
  • Slang and idioms can be a colorful way to connect with some students. Be mindful of the impact on people whose first language is not English. 
  • When inserting images and non-text content  into your LibGuides, provide a description in the Alternative Text (also known as alt text) field of the Image Properties pop-up. This allows screen reader users to have the content read to them. If the page fails to load properly, the alt text allows the user to know what is missing.
     
  • If the image is a diagram, chart, flyer, or other kind of infographic, determine how to convey its meaning with alt text and a link to a text-only version. 
     
  • Some accessibility experts say that purely decorative images don't necessarily need alt text. While a simple "decorative" alt tag might suffice, consider how a few additional words might enhance the user's experience.