Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.
- Contact Associate Professor & Librarian Miriam Deutch (email@example.com) or one of the OER Developers.
- In the email, please provide the email address to use for login name (typically first firstname.lastname@example.org).
- You will receive a system-generated email with link to LibGuides system for logging in and setting password.
Building a Libguide: Step by Step
Are you brand new to LibGuides, but not sure how to get started? Or have you used LibGuides before, but your guide skills are a little rusty? The purpose of this session is to give you an overview of how to create a LibGuide.
This video covers:
Logging into and navigating the LibGuides dashboard
Creating a new guide
Understanding content types
Best uses for box types
How to edit published guides
Adding and reusing guide content, including pages and boxes.
Best Practices for Building Guides & Accessibility Tips
Leverage LibGuides functionality to streamline the creation and management of content.
This video covers:
Boxes and content items
Rich text editor and images
Design your site to be more visually appealing, user-friendly, and readable
Apply some Writing for the Web techniques to your guide content
Explore the LibGuides community for inspiration
Accessibility Best Practices for LibGuides
- Page titles should be brief, clear, informative, and unique.
- When adding new pages in LibGuides, the "Page Name" field is equivalent to the "Title" field.
- Headings help in organizing a web page.
- When creating headings in LibGuides make sure to use the actual heading option and don't just make them visually look different.
Alt-Text for Images (Alternative text)
- Making images and graphics "visible" to all users is one of the first principles of accessibility.
- The way you make your image visible to everyone is by adding "alternative text" or "alt-text".
- Adding alt-text to your images is an accessibility best practice.
- Adding alternative text ("alt text") to an image, will make images and graphics "visible".
- For people using screen readers or browsing speech-enabled websites alt-text can be read aloud or rendered as Braille.
- Alt-text gives the speech input software users the ability to put focus onto a button or linked image with a single voice command.
- Alt-text allows mobile users to turn images off to help with download speeds or limit data-roaming charges.
- In LibGuides there are several ways to add alt-text to images.
- You can add "default" alt-text to an image by using the "Image Manager" to upload the image.
- Each time you reuse an image its default alt-text will be attached.
- This greatly increases the odds alt-text won't be overlooked (especially for images in your shared library.)
- You can also add /change alt-text when you add an image in a Rich Text/HTML.
How to add default alt-text to an image via the Image Manager:
- Go to Content in top menu bar
- Click on Image Manager in drop down menu
- In the Image Manager window, upload a new image, then click on the thumbnail and/or click on the thumbnail of image already uploaded to add default alt-text. (Make sure to click on the actual image and not link icon.)
- In the Edit Image Properties window, enter your alt-text into the Alternative Text field.
- Click the Save button.
How to add alt-text to an image you add via the Rich Text/HTML box:
- Select "Add Rich Text/ HTML"
- In the "Image Properties" window type in the alt-text in the "Alternative Text" field.
How to create Lists and Tables
- Do not create lists or tables manually, use the built in formatting.
- Do not use tables for layout.
- When creating tables make sure to add table row headings.
Check Color Contrast
- Check to see if the colors you've picked for your tabs and background are accessible.
- Use these color contrast evaluation tools.
- WCAG Contrast Checker is a Firefox browser plug-in.
This plug-in checks the compliance of contrast levels of foreground and background color combinations based on the requirements of WCAG 2.1.
- Color Contrast Analyzer is a Chrome browser plug-in.
This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page.
Why worry about color contrast?
- Choosing accessible colors for your documents and site is important.
- Colors affect the readability of your document and site for all users, not just those with vision impairments.
- The only people for whom the color choices don’t matter are those using screen readers.
How to use color correctly:
- Don't use color as the only way to communicate information, always make sure meaning is conveyed in multiple ways.
- This is true for the main text of your document, links in blocks and images of text.
- In the case of links, use another identifier such as bold or underline to indicate a link verses using color alone.
- Run your site and documents through color contrast checkers to make sure the contrast ratio is good.
- To meet basic guidelines (Level AA) text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).