Skip to Main Content

LibGuide Design: Best Practices and Guidelines

This guide is designed to provide guidance on making LibGuides more useful, accessible, and relevant to users through best practices that incorporate usability and web design.

Meeting #1: Alternative text for images

Link to slides, recording(~23 minutes), and the Poet Training Tool (which will make you an expert alt-text producer!. Please see key takeaways below:

  1. Alt-text key-point: any information conveyed in an image must be included either in the alt text or the surrounding text. 

Meeting #2: Descriptive Links

Link to slides, recording(~22 minutes).

Meeting #3: Formatting Issues

Hi! No slides this week, just examples listed here. YouTube recording (~20min)

Headings

Headings help screenreaders and sighted users analyze the entire structure of a page at a glance. I've used headings in this box.

Two basic rules govern headings:

  1. Semantically defined: Do not use just a bold font, or a larger size to "fake" a heading. Headings are available under the "Format" selector in the HTML/Rich Text editor.
  2. Properly nested: Headings ranged from H1 (largest and is the title of the page) to H6 (smallest).
    • H1: Title of guide ("LibGuides Training")
    • H2: Box Titles
    • H3: First option in HTML/Rich Text editor ("Meeting #3: Formatting Issues")
      • H4: Headings
      • H4: Copy and paste
        • H5: Example without...
        • H5:Example using...
      • H4: Font, style, and size
      • H4: Lists

Copy and paste

Example without using paste option (image):

Promoting engagement in universities      ‘Universities really can’t afford not to have a Wikimedian in Residence these days. It still surprises me how few do.’      Melissa Highton, Director of Learning, Teaching and Web Services,       —University of Edinburgh48.

Image showing: an H2, larger text, and a link to a footnote.

Example using Ctrl + Shift + V

Promoting engagement in universities

    ‘Universities really can’t afford not to have a Wikimedian in Residence these days. It still surprises me how few do.’

    Melissa Highton, Director of Learning, Teaching and Web Services,
    —University of Edinburgh48.

Up-to-date guidance from SpringShare on Copy and Pasting from Word or elsewhere on web:

To avoid any issues, we recommend that you paste as plain text.

  • In Chrome, Edge, or Firefox: press Ctrl + Shift + V (Windows) or Cmd + Shift + V (Mac) 
  • In Safari, press Cmd + Option + Shift + V.

This will strip out all of the copied formatting, leaving only the text.

Often times, this yields the best results, as you can then use the Rich Text Editor to apply formatting to the text yourself.

Font, style, and size

In general, you don't need to choose any of these selectors, as we have a site-wide style applied through CSS. We can talk more about refreshing this!

Lists

In the HTML/Rich Text Editor use the selector for numbered and bulleted lists.

Meeting #4: Captioning

Both videos we create, as well as videos we direct users to should have captions/subtitles.

Captions not only include dialogue, but identify who is speaking and include non-speech information conveyed through sound, including meaningful sound effects.

- Understanding Success Criterion 1.2.2 Captions (Prerecorded)

Captioning top recommendations

  1. Accurate, can exclude starts/stops and um's and uh's
  2. Timestamps (not too brief, and not too long)
  3. Punctuation and capitalization
  4. Brackets for speakers and important sounds

Options for WSU-created videos

  • Consider adding to "WSU Library Instruction" YouTube channel
  • Consider if you need a video
  • Upload to YouTube, edit auto-captions yourself
  • Ask Web Services Librarian or Systems to create captions (~1 week turnaround)

Options for other videos

  • Search for a different, captioned video on the same topic
  • Advocate for that creator to add captions
  • Create your own captioned video

Why auto-captioned videos aren't enough

Meryl Evans, web accessibility advocate and author, gives the following 6 reasons auto-captions are a problem:

  1. Automatic Captions Don’t Make Sense
  2. Automatic Captions Are Embarrassing
  3. Automatic Captions Give Wrong Information
  4. Automatic Captions Hurt Your Brand
  5. Automatic Captions Cause Viewers to Stop Watching
  6. Automatic Captions Are Not Equitable
WSU Libraries, PO Box 645610, Washington State University, Pullman WA 99164-5610, 509-335-9671, Contact Us