Skip to Main Content

University Library, University of Illinois at Urbana-Champaign

Site Navigation Menu

Getting Started with LibGuides

This is a help guide for University Library staff in best practices for creating LibGuides.

Guidelines

Making your LibGuides content accessible benefits everyone: people with or without disabilities. The following list provides suggestions for accessibility practices that will make your content more user-friendly.

Text

  • Use clear fonts:
    • Don't mix different font types. Stick to the default font (Sans Serif).
    • Use bold, color, italics, and ALL CAPITAL LETTERS, etc. sparingly; each has its own function.
    • Don't use underlines for emphasis. Users will think an underline is a hyperlink.
    • Use real text rather than text within graphics.
  • Use headings and lists appropriately. Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.
  • Do not rely on color alone to convey meaning or importance. That information may not be available to a person who is colorblind and it will be unavailable to screen reader users.
  • Ensure proper contrast between the font and the background. Optimize font color use for readability and accessibility.
  • Make sure your content is clearly written and easy to read. Get more tips on writing clearly and simply.  Avoid dashes, abbreviations, and slang.

Graphics, Table and Links

  • All Images need to have alternate text (ALT tags) included. Alternative text provides a textual alternative to non-text content (such as graphics or images). It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them. Learn more about providing appropriate alternative text.
  • Tables should have appropriate table headers. Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table. Learn more about creating accessible tables.
  • Make sure linked text makes sense out of context. Screen reader users may choose to read only the links on a web page. Certain phrases like “click here” and “more” must be avoided. Avoid automatically opening links in a new window.

Media and Other non-HTML Content

Source: This list comes from WebAIM’s Principles of Accessible Design. This list does not present all accessibility issues, but by addressing these basic principles, you will ensure greater accessibility of your libguides content to everyone. You can learn more about accessibility at webaim.org.

Implications/Instructions

Tips on Adding Text

It is recommended that you type directly into the rich text editor; then use the functions in the text editor to add style and formatting. Creating the text elsewhere and attempting to copy / paste it into the text editor will bring in a lot of unnecessary HTML code and formatting, which will also introduce inaccessible content.

  • If you've already pasted your text into the text editor, highlight it and click on the Tx icon in the text editor. This will remove all the formatting from your text.
  • If you haven't pasted yet, then use the Paste from Word option (clipboard with W icon) when paste content from Word. Or, use the Paste as Plain Text option (clipboard with T icon) when paste content from other places. This generally removes some, but not all, of your formatting.

Style Your Text

  • Stick to the default font (Sans Serif). Avoid changing the font size unless you have good reason. If you need headers within a text box, use Heading 3 (<h3> in HTML) and follow by Heading 4 in the rich text editor.
  • Use bold or italics in the rich text editor (or <strong> or <em> tags in HTML) to indicate emphasis. Use these tags sparingly.
    • Avoid older-style bold <b> or italics <i> tags as they denote style rather than importance. 
    • Don't use underlines for emphasis. Users will think an underline is a hyperlink.
  • Don't use color as a way to convey meaning or importance. Colorblind users and screen reader may not pick up on color changes.

Credit: The content under Implications in LibGuides is a derivative of the Boston College LibGuides: LibGuides Standards: Accessibility page.

Do not use heading 1 and headgin 2 when create headings in rich text editorUse headings as indicators for sections and sub-sections in your guide. This not only provides hierarchical organization and formatting, but also makes it easy for screen readers to scan and jump to different content areas.

  • Never use Heading 1 (<h1> tag in HTML) in your guide as this should only be used once for the entire page.
  • Your LibGuides box titles uses Heading 2, so start with Heading 3 (<h3> tag in HTML) and then Heading 4 in rich text editor.
  • Higher level Headings should be placed above lower level ones otherwise your hierarchy gets confused. Here is an example:
    • H3
      • H4
      • H4
  • Do not use text formatting, such as font size or bold to give the visual appearance of headings. Use the paragraph format drop down in the rich text editor to assign headings.
  • Link description display selection screen with display beneath item title selected.Make sure linked text makes sense out of context. Avoid using phrases such as "click here," "more," "click for details."
  • Make sure link and database assets display their description below the link. Don't hide the description behind a hover-over button as this breaks accessibility.
  • Break up long lists of items into logical groups so that it can be skipped by screen readers.

Image properties window to add alternative text for image

All Images need to have Alternative text (ALT tag) included. To add a ALT tag to your image in the rich text editor, you will

  1. Select the image and then click on the add image icon , in the rich text editor.
  2. In the Image Properties window, find the alternative text field under Image Info tab, and then enter the alternative text for your image.
  • Table properties window for indicating table header and adding table caption and summary.Use tables mainly to display data that fits well into rows and columns.
  • Add table headers to describe the contents of the table columns. (Table Properties>Headers.)
  • 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.
  • If tables were used for layout purpose (layout tables), then DO NOT add table caption or headings (<caption>, <th>, etc.) to it. Otherwise, the screen reader may incorrectly present the table as a data table causing increased overhead and confusion.

Resources

Accessibility Checker

Color Contrast Checker

Caption