Accessible Materials

Top Tips for Accessible LibGuides

Benefits

Accessible LibGuides are well structured and follow a logical reading order. This helps users with screen readers access your content. Presenting content in a logical reading order also benefits patrons accessing your guide via the mobile version of LibGuides, which presents content in a single column.

This presentation from February 2018 outlines many of the LibGuide accessibility basics (Google Slides).

Tips

LibGuides are already fairly accessible, but can be made even more so by using these tips:

• Follow general guidelines for accessible web pages.
• Logical reading order: screen readers read your LibGuide top to bottom, then left to right (as do users accessing your guide from a smartphone). In LibGuides with two columns, place material in the left-hand column that you want to be read before material in the right-hand column.
• Use alternate text for images: when you add images and screen shots to your guide, fill out the alternative text box with a quick blurb describing the image. The goal is to allow a person who cannot see the image to get the same information from the description as they would from seeing it. For example, the image on this page is described "LibGuide reading order: top to bottom on left, then top to bottom on right"

Formatting LibGuides using CSS

Copy and paste these into the Guide Custom JS/CSS box, which is located under Guide Layout.

This allows you to take advantage of accessible elements like headings, bulleted lists, list of links, etc. while maintaining control of your guide's overall appearance.

CSS to Copy and Paste

Change Size of Box Titles

<style>
div.s-lib-box-container
h2.s-lib-box-title
{
font-size:NNpx;
}
</style>

(replace bolded NN with size of your choice)

Change Size of Headings

<style>
h3 {
    font-size:NNpx;
    font-weight: bold;
}
</style>

(replace bolded NN with size of your choice)

Follow the same steps for h4, h5, etc.

Change Appearance of Lists

<style>
a {
font-weight: bold;
font-size:NNpx;
}
</style>

(Replace bolded NN with size of your choice. This will change the size of text in your lists)

Remove Bullets from List of Links

<style>
ul.s-lg-link-list {
list-style-type: none;
padding:0px;
margin:0px
}
</style>

Special Topic - Embedding Media in LibGuides

LibGuides and Iframes

When you embed media, such as a video, Google form or search widget into your guide, LibGuides uses a "container" called an iframe to display the media on your page. One way to make iframes more accessible is to add a title, so that the user knows what he or she has encountered on the page.

LibGuides does not automatically assign meaningful titles to iframes, but you can do so yourself when embedding media into your guide. This is a quick bit of text that you will add directly into beginning of the embed code.

Code for you to copy and paste

Paste directly after the word "iframe" at the beginning of your embed code.

title=”replace this text with a descriptive title of your media”

Examples

These examples show the unmediated code, and a more accessible mediated version where a descriptive title was added.

Unmediated

<iframe id="kaltura_player" src="https://cdnapisec.kaltura.com...

Mediated

<iframe title=”Video tutorial answering common questions about SearchPlus” id="kaltura_player" src="https://cdnapisec.kaltura.com...

Accessible LibGuide Links