Skip to Main Content
The University of Manitoba campuses are located on original lands of Anishinaabeg, Cree, Ojibwe-Cree, Dakota, and Dene peoples, and on the National Homeland of the Red River Métis. More

Developing Accessible Content on LibGuide: Best Practice: Workshop

This guide is prepared for the workshop by the same name, held in Brown Lab, Elizabeth Dafoe Library, 10 - 11 am, June 27, 2018

In this workshop, five most common accessibility checkpoints for developing accessible LibGuides are shared.

Web Accessibility Content Guidelines (WCAG)

Digital and online content accessibility is governed by the guidelines developed and maintained by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI).  Any web and mobile contents including PDF, WORD, video, or audio files are subject to the same accessibility content guidelines.  The W3C WAI brings together people from industry, disability organizations, government bodies, and research labs from around the world to develop guidelines and resources to help make the Web accessible to people with auditory, cognitive, neurological, physical, speech, and visual disabilities.

 
The latest standard for the Web Accessibility Content Guidelines (WCAG) recommended by the WAI is WCAG 2.1 as of June 5, 2018.  Many jurisdictions including Ontario still use and refer to WCAG 2.0 as their guidelines.
 
  • Four principles organize the guidelines (WCAG 2.0):
    1. Perceivable
    2. Operable
    3. Understandable
    4. Robust
  • There are 12 guidelines, and each guideline provides testable success criteria. 
  • Three levels of conformance:  A (lowest level), AA, and AAA (highest level), that are defined to accommodate the needs of different groups and different situations.
Other Web Accessibility Guidelines: Authoring Tools Accessibility Guidelines (ATAG) and User Agent Accessibility Guidelines (UAAG).

1) Fonts

Font Types

  • Use sans serif fonts - serif fonts are harder to read on screens
  • Steer clear of Comic Sans - it's widely considered to be unprofessional

Visual Effects of Serif font and sans-serif font.

Styles

  • Don't underline text - users identify underlined text with links
  • Bold & italicize sparingly - bold a word or phrase, but not an entire sentence or paragraph
  • Use color sparingly, too - make sure the contrast between the box background & your colors is readable

Font Size

(There is no font size that works for everyone.  People can adjust to meet their specific needs using browsers.)

  • Avoid customizing font size in an individual box - fonts should be defined at a system level
  • Use the same font throughout your LibGuides site/page - changing fonts is not a good way to emphasize a change in context. (For example, don't use a different font for your headings.)

2) Alternative Text

Writing Effective Alternative Text

"Writing effective alternative text for images is like learning how to properly cite resources." 

Context is everything.

What you need to consider for the alt attribute:

  • Be accurate and equivalent in what you intend to convey using the image.
  • Be succinct:  The content and the function of the image should be described as succinctly as possible.
  • Not be redundant.  Consider the context in which you are using the image.
  • Not use the phrases "The image of..." or "The graphic of..." to describe the image.

Refer to more examples.

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.

If the image is purely for decorative purpose, you can leave alt attribute empty and leave the Alternative Text box empty (alt=" ").  

Also what you provide in Alternative Text depends on what surrounding texts are being offered.  

 

alternative text field highlighted in Image Properties Window.

3) Colour

Use High Contrast Between Background Colour and Type

Pages with poor colour contrast can be difficult to read, especially for folks with visual impairments. Avoid using Red and Green as it is not helpful to users that are color blind.

Dark Grey type on a white background is best (by default the system uses #333 for the body class and #555 for the box text), but if you want a colored background, keep it light.

Bad example:         
Orientation
Better example #1: 
Orientation
Better example #2: 
Orientation

Important: Overall, try to stay with the same colour scheme throughout your guides, and only use different colours sparingly.

Recommended Web Font Colors and Font Checkers:

Web AIM Color Contrast Checker

This tool checks to make sure your text can be read based on the text colour and background colour, to help your site meet and exceed accessibility guidelines.

More Tips to Increase Accessibility for Colour-Blind Users

Adobe Color CC

How to Design for Color Blindness

4) Headings & Other Elements -- Semantic Page Structure

Headings communicate the organization of the content on the page.

  • Screen reader and other assistive technology users navigate the content structure using headings.
  • The user can identify a list of all the headings on the page and go back and forward to navigate.
  • The hierarchy of headings:
    • H1
      • H2
        • H3
          • H4
            • H5 ..
  • If you want to highlight or emphasize an element within your content that is not a heading, do not use heading elements to achieve visual appearance you want.  
  • Visually, the <bold> (bold) and <strong> elements, and the <i> and <em> elements look exactly the same.​ 
    • The <bold> and <i> elements connote visual emphasis, while the <strong> and <em> semantic emphasis. 
  • Use lists correctly.
    • Unordered list - no order of sequence of importance.
    • Ordered list - a progression or sequence.

5) Links

Links Added via Rich Text Editor

  • Giver descriptive anchor text, not Click or Click Here
  • Use Heading 3 or 4 for the link in Rich Text Editor.

Database Link

  • The description for Database should display below the link; don't use an hover-over button to display it.
  • Avoid a long list of databases.  Use groups to break them up.