Skip to Main Content
Purdue University Purdue Logo Purdue Libraries

Creating a LibGuide

This guide will help you design an accessible, user-friendly LibGuide.

Design for Accessibililty

A well-designed LibGuide is visually appealing, accessible, and user-friendly. In many instances, these three criteria are often interdependent. For example, an accessible LibGuide takes into account elements such as color choices that are high in contrast and font styles that are actually part of the HTML structure of heading styles. A visually appealing LibGuide will also take color choice and font style into account in order to prevent creating an overwhelming or distracting effect on its user.

Accessibility Checklist 

Below is a checklist that can help you improve the accessibility of your guide. For specific details and resources for each of these points, see the corresponding tab in the Accessibility & Design Best Practices section.

  1. The colors on my guide (including colors used in infographics, images, etc.) have a color contrast ratio of 4.5:1 or higher.
  2. Content boxes that have multiple sections (especially floating boxes) use Headings to denote the structure of the information. 
  3. All of my images have alt text or long descriptions, unless purely decorative.
  4. My links are written using descriptive link text so users know where they're going if they click on the link.
  5. I used the Table button to create any tables on my guide and made sure the table had column and row headers. 
  6. All of the videos on my guide have captions and transcripts.
  7. When making lists, I used the Numbered/Bulleted List button instead of just typing in numbers.

Additional Tips

  • Select "Beneath item title" when choosing where to display an asset description.
  • Be sure "Off" is selected for the "Automatically play" gallery box setting.

Accessibility & Design Best Practices

Color can be an easy way to liven up content, but it should be used sparingly. The use of too many colors can distract from the content and may be overwhelming to some users, and poorly contrasting color combinations can make distinguishing colors next to impossible.

Guidelines

  • Limit the use of colors to 1 or 2 main colors
  • Do not use color as the only means of conveying information
  • Use color combinations that have a contrast ratio of 4.5:1 or higher

Resources

In some disciplines, like math and science, equations and formulas are critical to understanding key concepts. It can be tempting to upload an image of a complex equation to your guide; however, this isn't accessible. 

Guidelines

Resources

Text will likely be the most common form of content used on a LibGuide so it's important to consider font styles and formatting choices. 

Guidelines

  • Use headings to create hierarchy and organize content
  • Limit use of multiple fonts and styles (bold, italic, underline, all caps, etc.)
  • Reformat any copied and pasted text to match current guide design (see directions below)
  • Write using plain text language

Content copied from Word or other websites will almost always include a mix of extraneous HTML tags and inline CSS styles. This can conflict with the default page styles, while also making it difficult for you to style the text yourself. 

To avoid any issues, we recommend that you do one of the following: 

  • Paste as plain text. This will strip out all of the copied formatting, leaving only the text.
    • Chrome, Edge, or Firefox: press Ctrl + Shift + V (Windows) or Cmd + Shift + V (Mac)
    • Safari: press Cmd + Option + Shift + V
  • Remove formatting. This also strips all of the copied formatting, but does so after the text has been pasted (and in fewer steps). 
    • In an HTML textbox, select the text and click on the Remove Format button.

Resources

Headings communicate the organization of the content on a page and are used by web browsers, plug-ins, and assistive technologies to provide in-page navigation. It's important to make sure you're using heading tags to format your headings, rather than just styling your text to look like headings.

Guidelines

Heading Use
Heading 1 <h1> Guide/Page Title
Heading 2 <h2> Content Box Title
Heading 3 <h3> Box Subsections
Heading 4 <h4> Additional Subsections (as needed)
Heading 5 <h5> Additional Subsections (as needed)
Heading 6 <h6> Avoid Using

Technical Note: Heading 1 and 2 are automatically coded when you create a page or a new content box so you won't have to add those in - unless you're using a floating box. You will need to add in any Heading 3 tags or beyond. See the training video linked below for details.

Instructions for Adding Heading Styles

To add heading styles to text

  • Highlight the text you want to change. 
  • Click on the Paragraph Format drop-down menu (second from the left). 
  • Choose the appropriate heading style

Resources

Graphics and images should be meaningful and relate directly to the content of your guide. Images should include alternative text, also called alt text, so that they are accessible.

Guidelines

  • Include alt text for all images (unless purely decorative)
    • Be sure to not only describe the image, but also include why it is relevant
    • Be accurate and equivalent in representing content and function
    • Be succinct. A few words; 1-2 sentences at most
    • Do not include redundant information or provide the same information as text near the image
    • Do not include phrases like "image of", "graphic of", "picture of", etc. 
    • Note: If alt text is not sufficient to provide content for an image, you may consider including a long description below or near the image
    • Note: If an image is decorative, leave the alt text field in the image manager empty
  • Use the padlock icon () to ensure your image retains its aspect ratio when adjusting image size
  • Use descriptive file names when naming your image files
    • Bad: IMG_2546.jpg
    • Good: students_studying.jpg

Resources

Reminder: Images are subject to copyright.

It's often beneficial to include links to other resources or external websites. There are a few things to consider when linking text.

Descriptive Link Text

Sometimes, URLs can appear long or messy and it may be tempting to include links that say "click here" or "read more." The problem with doing that is that the text is often too vague and doesn't tell the user where they're going. Instead, use descriptive link text to tell the user where the link will take them. 

Friendly URLs

Friendly URLs can be helpful for users of assistive technologies such as screen readers and may help improve the findability of your guides. The examples below go to the same webpage; however, the friendly URL is easier for users to remember and for screen readers to read.

  • Regular URL: https://guides.lib.purdue.edu/c.php?g=1135434
  • Friendly URL: https://guides.lib.purdue.edu/creatingalibguide

It may also be helpful to create friendly URLs for individual pages if you plan to share the URLs.

  • Friendly URL: https://guides.lib.purdue.edu/creatingalibguide/bestpractices

Guidelines

  • Use descriptive link text
  • Use friendly URLs for guides/pages
  • Ensure you are using the correct link type when adding resources to your guide, limiting the use of hyperlinked rich text links
    • Websites (especially in list form) = Link asset
    • Books = Book from the Catalog asset
    • Purdue Libraries subscription database = Database asset
  • Avoid using abbreviations when naming link assets. e.g., "Dept." should be "Department"

Navigational features can improve the accessibility and usability of your guide, especially when it comes to mobile devices.

Guidelines

  • Use the recommended side navigation layout
  • Keep tab/page titles short and limit the number of tabs to a single row

The use of tables is not recommended due to accessibility issues, but they can be helpful in some cases. If a table is necessary, use the table button () to ensure that the table headers are created and meet accessibility standards.

Guidelines

  • Limit the use of tables to only when necessary
  • Include table headers 
    • Please see the Tables Tutorial linked in the resources section below for detailed guidance
  • Do not use tables for exclusively for layout purposes

Resources

Videos can be a great way to engage students and provide alternative formats for instructional content. There are a variety of platforms available for creating and finding video content so it's critical to take extra care to ensure that the video content is high quality and accessible.

Guidelines

  • Include captions and/or transcripts
  • Check video content regularly to see if updates or replacements are needed

Resources

More on Accessibility

There are a variety of resources available that can help you learn more about accessibility, test your content for common accessibility issues, and experience what it might be like to use assistive technologies.