Accessibility, UX, & LibGuides – The Minimum

The following is adapted from a training session I gave for my workplace’s Hump Day Huddle Up training series. It’s a primer in basic stuff to do to avoid your LibGuides being a hot mess.

Accessibility – How to Avoid Being an Ableist Loser

Fonts Fonts Fonts*

*to be sung to the tune of Motley Crue’s Girls Girls Girls

  • 1em allows font to automatically resize according to user preference – if you must use pixels, 16px is good.
  • Fonts should be sans serif for screen use.
    • Examples: Calibri, Arial, Franklin Gothic
  • MIND YOUR CONTRAST
    • When in doubt, black on white or white on black.
    • Tool to check colour contrast located here

Follow these rules to avoid your users going full SpongeBob.

spongebob with red bleary eyes from eye strain

[image: spongebob with red bleary eyes from eye strain]

Images

Every. Single. Image. Needs. Descriptive. Alt. Text.

For an example of how to do this, check out my alt text below the embedded image. In Tumblr, you sometimes have to place it below the image – in LibGuides, you right click on the image and put it under alt text in “Image Properties”.

An image of a brown Australian shepherd cuddling a small plastic Pikachu, illustrative of how cute the author’s dog is.

[Image: An image of a brown Australian shepherd cuddling a small plastic Pikachu, illustrative of how cute the author’s dog is.]

Make sure your alt text is descriptive of both the image’s contents and any function it may serve!

Multilingual Pages?

Switching languages? Use language tags! Language tags can be attached in <p> for paragraphs or <span> tags for sentences/words.

  • <p> This sentence is in English. </p>
  • <p lang=“en-GB”> This sentence will be read with a British accent </p>
  • <p lang=“es”> Esta frase es en espa&ntilde;ol. </p> (Spanish)
  • <span lang=“fr”> Cette phrase est en fran&ccedil;ais </span> (French)

To Find Your Language Code, Use the Following Tables: ISO 639 Code Tables

PDFs and Documents

Videos

  • Closed caption all your videos!
    • It’s super easy with YouTube and a script handy.
    • Not scripting? Idk what to say to you.
      • jk I do it’s “start scripting your videos bruh”
  • Provide descriptive video or a text-only descriptive option for your visually impaired users.

Fancy Web Stuff 

  • Limit Tabs – 6 or less is good!
  • Avoid creating content that refreshes the page without user input.
    • It’s real rough for users with voice controlled mouse movement. 
  • If you must use a slider it should be for an image reel and not for functional content. 
    • Sliders cause difficulties for people with mobility issues.

Test Your MIGHT

Test your LibGuides for screen reader compatibility to avoid formatting errors that make your page unusable internet swampland.

To test for free:

General UX – Don’t Look Like a Mess

Your Users Don’t Have to Read These You Know

  • Users skim information – build so they can skim!
    • Use subheadings, lists, etc.
    • Avoid paragraphs or lists longer than 6-8 bullet points.
  • Write like a person, not an academic.
    • “We” offer services. “You” can use them. 
    • Plain, concise language and a personal tone go a long way.
  • Simplicity is key.
  • Avoid overwhelming users.

You’re Making a Functional Tool So Design Like It

If you can do this, you’ve attained the minimum standard in LibGuides accessibility and UX! Of course, you should still conduct user testing to determine your layouts and content are working as intended, but at least this way they can use what’s there to begin with.

Leave a comment

Your email address will not be published. Required fields are marked *