Skip to main content

CUNY LIBRARIES ARE OPEN ONLINE! We are open online for reference & instruction. E-resources are fully available. Library buildings remain closed.

Support Students Impacted by Coronavirus Crisis Donate Now

Accessibility Toolkit for Open Educational Resources (OER): LibGuides (Springshare)

Accessibility guide for creating OER

LibGuides

A few key LibGuides accessibility points:

  • Public pages meet accessibility standards.
  • Content creators are given the option to add accessible code and content
  • The Administrative side does not meet accessibility standards

LibGuides (Springshare)

Pros: LibGuides Public facing pages meet accessibility standards

  1. Content creators have the option to add accessible content
  2. Public page elements have been designed to include text links, link titles, and “alt” tags.
  3. Meaningful images have alt- text descriptions. Non-relevant images have no alt-text
  4. LibGuides does not use color alone to distinguish the importance of a visual element
  5. Users and screen readers can read and understand public pages in LibGuides with the style sheets disabled
  6. All form elements are labeled as appropriate
  7. Public pages do not contain any applets, Flash elements or similar components that require external plug-ins.
  8. Blind and visually impaired users can access LibGuides with the addition of assistive technology
  9. The public interface supports basic navigation controls via a keyboard,  mouse, or equivalent hardware or software

Cons: LibGuides Administrative Interface does not meet accessibility standards

  1. Due to the complexity of the administrative interface it may not be possible to access all elements via keyboard only controls.
  2. There are elements on the administrative side without descriptive information so information on user interface elements including the identity, operation and state of the element may not be available to Assistive Technology.
  3. Because of the complex nature of the administrative interface, users and screen readers cannot read and understand the administrative pages in LibGuides if the styles sheets are disabled.
  4. Text-only alternative pages have not been created for the administrative interface at this time.

  5. Information provided by script should be identified with functional text that can be read by Assistive Technology. There may be
    aspects of the administrative interface that are not in compliance.

Conclusions:

It is great that the Public facing pages are accessible, however the fact that the administrative side has accessibility issues is of concern. Besides wanting to provide faculty, librarians and staff with an administrative interface that is accessible, students also create OER content, so these accessibility issues effects students and student learning.

 

Suggestions:

  1. Update the administrative interface so that it is in compliance
  2. Require users to add accessible content
    • When adding an image make "alt-text" information required
  3. Remind users when adding content to make it accessible
    • When they attach a pdf or word document put a reminder to make sure it is accessible

Webinar: Best Practices for Building LibGuides and Accessibility Tips from Springshare


This SpringShare webinar provides some helpful tips on creating accessible LibGuides. Unfortunately, the video itself is NOT accessible as there are no closed captions or a transcript. This is a problem.

SpringShare VPAT

LibGuides Accessibility Instructions

Page Title

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

Screen grab showing where to place the page title in libguides.

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.

Screen grab showing how to select headings from the drop down menu in the Rich Text/HTML

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:

  1. Go to Content in top menu bar
  2. Click on Image Manager in drop down menu

Screen grab showing how to access image map from top menu under content

 

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

Image Manager view properties

 

  1. In the Edit Image Properties window, enter your alt-text into the Alternative Text field.
  2. 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"

Rich Text/HTML screen image

  • Select "Image" icon

Image selection icon

 

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

Image Properties pop-up window image showing where to type in alternative text

 

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.

screen grab with red arrows showing where to create numbered or bullet list and table.

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

Creative Commons LicenseUnless otherwise noted, these accessibility guides were created by Accessibility Librarian Amy Wolfe for CUNY and are licensed under a Creative Commons Attribution-Non Commercial-ShareAlike 4.0 International License. If you re-use, remix or link to this guide, it would be appreciated if you could notify the creator Accessibility Librarian Amy Wolfe.

Some documents on this site require Adobe Acrobat Reader. You can download Acrobat Reader for free.
Office of Library Services | CUNY Accessibility