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 heating 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.
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.
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.
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:
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.
Reminder: Images are subject to copyright.
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.
| 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.
To add heading styles to text,
It's often beneficial to include links to other resources or external websites. There are a few things to consider when linking 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 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.
It may also be helpful to create friendly URLs for individual pages if you plan to share the URLs.
Navigational features can improve the accessibility and usability of your guide, especially when it comes to mobile devices.
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.
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.
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.