LibGuides Accessibility: Best Practices and Guidelines

Broken links are bad for our website's accessibility and the experience of our users with disabilities. 

Accessibility Information on Meaningful Link Text

General Information:

• Assistive technology allows users to pull up a list of links so links need to be meaningful out of context.
• Since links are read aloud, don't repeat the same link text over and over on a single web page.
• Meaningful link text provides a clear description of where users will go once they click on the link.

Why is meaningful link text important?

• Links such as “Click Here” or “More” don’t provide any information to screen readers and are meaningless out of context.
• Link text which is the actual url is bad for screen reader users, if you can, avoid using just the url.

• LibGuides Link Checker

  Managing broken links in your guides

Alt-Text for Images (Alternative text)

What is alt text?

"Alternative text provides a textual alternative to non-text content in web pages." WebAIM, Alternative Text

In layman's terms, if you're adding images to your LibGuides they should contain properly constructed alternative text conveying the meaning or content of that image.

Why you should add them

1. Screen Readers: For visually or cognitively-impaired users, the alternative text is read outloud by screen reader software.
2. Mobile-Users/Slow Bandwidth: Not everyone has LTE or high-speed internet. For users who choose to disable images from loading on web pages due to bandwidth issues, the alternative text displays instead and provides context. 
3. Helps Your SEO: Properly-formatted alternative text provides "semantic meaning and description to images which can be read by search engines." - WebAIM, Alternative Text.

Now that you know the what and the why of alternative text, let's cover the how.

How do I add alt text to my LibGuides images?

There are loads of spots where images can appear in your LibGuides - from thumbnail images in your database assets, to gallery box images, to resource icons in your link assets. So, we won't cover all the places in LibGuides that contain alt text functionality.

Instead, keep an eye out for the alternative text field when you're adding or editing an image anywhere in your LibGuides system.

Bottom-line, every image you add must have the alternative attribute. Even if that image is given an empty or null value (e.g., alt=" "). Images without the alt attribute are inaccessible.

 

How to add alt-text to an image you have already added:

• Select "Image" icon

• In the "Image Properties" window type in the alt-text in the "Alternative Text" field.

 

How to add alt-text to your images with the Image Manager:

 

• If you have a lot of images you need to remediate, you can click on each image in your library and enter your alt-text into the Alternative Text field 
• Click the Save button.

Alternative text rules

• Be accurate and equivalent in presenting the same content and function of the image.
• Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as concisely as is appropriate. Typically, no more than a few words are necessary, though in rare cases, a short sentence or two may be appropriate.
• Don't be redundant or provide the same information as text within the context of the image.
• Don't use the phrases "image of ..." or "graphic of ..." to describe the image. It's usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user knows that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

- Taken directly from WebAIM, Alternative Text

Headings

• 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.

---

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).

Color contrast examples