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.
[image: spongebob with red bleary eyes from eye strain]
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”.
[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!
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ñol. </p> (Spanish)
- <span lang=“fr”> Cette phrase est en français </span> (French)
To Find Your Language Code, Use the Following Tables: ISO 639 Code Tables
PDFs and Documents
- You MUST use only accessible PDFs and documents.
- If you HAVE to use an inaccessible document, place an active offer to make said document accessible on demand and prepare to follow through.
- 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:
- Click here to learn about testing with Firefox and NVDA
- Click here for testing with Firefox and FANGS (a visual display of screen reader interpretations of websites)
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
- Remember the F shape of user eye patterns when designing!
- Most important content is top and to the left
- Make each page as if the person using it has never been trained on subject guides, libguides, or libraries before.
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.