In this Issue:
It's been a busy summer here at Springy HQ, and we've spent a significant amount of development time on accessibility updates.
But web accessibility is a group effort. To that end, there are loads of things you can do to ensure that your LibGuides pages are as accessible as possible.
And remember, an accessible LibGuide benefits all users, not just your patrons with disabilities.
So enjoy this edition of LibGuides Tips and Tricks and ask yourself, do you know your accessibility issues ABC's?
If you're not aware, we employ many accessibility practices behind the scenes such as ARIA tags, alt attributes, proper heading nesting order, use of landmarks, and hidden skip navigation for the hard-coded elements on your LibGuides pages.
If you're in an accessibility state-of-mind, you might want to consider installing some (or all!) of the tools below to see how your LibGuides content holds up.
Writing effective alternative text for images is like learning how to properly cite resources. It's challenging at first and may be a new skill, but with practice, you'll master it in no time. But, good news, you're already on the path to writing more effective alt text because you're reading this article! Kudos to you!
Alright, let's dig in. First, let's cover the basics.
"Alternative text provides a textual alternative to non-text content in web pages."
In layman's terms, if you're adding images to your LibGuides they should contain properly constructed alternative text conveying the meaning or content of that image.
Now that you know the what and the why of alternative text, let's cover the how.
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.
Something to consider is whether an image actually adds value to what you're writing.
Remember, users with a variety of visual issues as well as mobile users often find too many images problematic. And for users who have inverted the contrast of a webpage or users who employ magnification, too many images can affect the readability of your copy.
So, when adding an image ask yourself, "Does it add value"?
Writing good alternative text sounds easier than it is. And context is everything. "Alternative text for one image may be vastly different based upon the context and surroundings of the image itself." - WebAIM, Alternative Text.
Not only can the exact same image on separate LibGuides pages have completely different alternative text, but two separate authors might use different alternative text for the same image. Why? Because writing alternative text is a matter of personal interpretation.
- Taken directly from WebAIM, Alternative Text
Step one in determining the appropriate alternative text for an image depends upon whether the image presents content and if the image has a function.
Can you identify which images need alt text and which ones don't?
This image does not need alternative text.
The surrounding copy, including the box title, provides context and added alternative text will just duplicate that copy when read out loud.
Verdict: alt=" ".
This image serves a function because it contains a link. Also, there is no surrounding copy, either in the box title or in the caption, to provide content and there aren't any other hyperlinks to the same webpage, so this image does need alternative text.
Verdict: alt="Wade Davis"
Does the copy surrounding the image provide sufficient context? In this case, not entirely. Try and succinctly convey what's in the image.
Verdict: alt="don't believe everything you read on the Internet just because there's a picture with a quote next to it"
Writing good alternative text can be a tricky endeavor. And every image and surrounding copy will need a judgment call on your part.
But, here are some Springy suggestions to get you started.
Just to be clear, when we state that the alt text is not needed that does not mean that the alt attribute isn't needed. The HTML alt attribute should still be included, but with a null value.
Depending on the screen reader, it will either 'skip' over the image entirely or it will just say "image". Someone who is fully sighted would easily skip over a decorative image, therefore a null alt text value allows someone with a screen reader to accomplish the same thing.
To create an empty or null alt attribute, simply don't put anything in the alternative attribute field. Leave it completely blank.
This will automatically generate an empty null attribute.
Your school colors are yellow and orange, and you want to show your school spirit on your LibGuides. So you navigate over to Admin > Look & Feel > Header/Footer/Tabs/Boxes to customize your box and tab colors to be orange with yellow text.
Not only does it demonstrate school spirit, but your matching your LibGuides system to the institutional color brands. Makes total sense, right?
Well, actually - not really. Yellow copy on an orange background is incredibly difficult to read. Don't believe us, try reading the below.
All squinting aside, sufficient contrast between the foreground text and the background is extremely important for both low vision, colorblind users, users with cataracts, and senior users.
And remember, a high contrast ratio makes it easier for your mobile users to read on their palm-sized small devices.
Additionally, for smaller font-sizes you'll need to have stronger contrast.
Actually, not really! Black (#000000) on white (#ffffff) creates a very strong contrast ratio of 21:1. This can be extremely overwhelming for users and cause glare. And for users with epilepsy, this strong contrast ratio might trigger an episode.
To lessen the contrast, try using soft whites for the background. And navy, dark gray, or dark maroon for your copy.
High Contrast GOOD |
Low Contrast Bad |
Color-Blind Inaccessible Bad |
Not Enough Contrast Bad |
If you have perfect vision, lucky you, there are exercises you can employ to check and see if the color contrast on your LibGuides is adequate.
And remember, effective color utilization and appropriate color contrast can help all users who access your content, from users who have epilepsy which can be triggered by brightly colored webpages to sleep-deprived patrons who suffer temporary side-effects like blurry vision.
Properly-structured URLs can not only help with accessibility, but also with SEO, universal design, and more. Let's check out some key principles.
Embedded hyperlinks make sense when used in context, so using non-informative phrases is unnecessary.
Additionally, screen reader technology allows the patron to jump from link to link on a webpage without reading all the text around the link. So, if a patron jumps to a link titled 'Click Here' - they won't have any idea what it means or where it goes. Protip: sighted users tend to scan pages this same way, looking for links, so keep your text to a minimum.
Avoid these phrases with embedded links:
In our January 2017 edition of SpringyNews, we highlighted the importance of properly formatting friendly URLs for your LibGuides. Not only do properly-formatted friendly URLs help with the SEO of your LibGuides, but they can also impact the 'readability' of your friendly URLs.
URLs are not always human-readable or even screen reader friendly. And, if you don't give your LibGuide and individual pages within your LibGuides a friendly URL, then the combination of numbers, dashes, and ampersands will make even less sense to your users.
Even if you are adding in friendly URLs to all your LibGuides pages, are they descriptive enough when read on their own? If you sent a patron a link to a LibGuide inside an email or tweet, would they be able to decipher the context of that webpage by reading the friendly URL alone?
Are your URLs 'hackable'? Can patrons move to higher levels of your LibGuides' architecture by hacking off the end of the URL?
Example |
Reasoning |
|
---|---|---|
Bad |
springylib.libguides.com/c.php?g=716158 |
Does not contain a friendly URL. Unreadable to both patrons and screen readers. Not descriptive of the content within. |
Better |
springylib.libguides.com/esl |
Contains friendly URL. Readable to patrons and screen readers. Semi-descriptive of the content within. Not 'hackable' back to group-level content. Should contain group-level URL. |
Better & 'Hackable' |
springylib.libguides.com/adult-learners/esl/citizenship |
Contains friendly URL at the guide and page levels. Readable to patrons and screen readers. Semi-descriptive of the content within. Hackable URL from the page > LibGuide > Group > Site Homepage. |
Best |
springylib.libguides.com/adult-learners/english-second-language/usa-citizenship |
Contains friendly URL at the guide and page levels. Readable to patrons and screen readers. Extremely descriptive of the content within. Hackable URL from the page > LibGuide > Group > Homepage. |
When we first released LibGuides version 2 in December of 2013, we added the gallery box type. It allows you to create nifty rotating image carousels. And boy did you guys take to it! Building amazing LibGuides with beautiful, rotating image carousels.
Flash forward to 2016, and we pushed out a bunch of updates to the gallery box that not only made it more accessible but also enabled you to add Books from the Catalog assets, LibCal calendar events, database assets, and more to your carousels.
And just last week, we did another round of accessibility updates to the gallery box.
Gallery Box Example
From our end, the gallery box is a robust, accessible, and awesomesauce tool - ready and able to meet your back-to-school needs.
But, tools are only as good as their user. So here are some tips for you to consider when using the gallery box type.
Lots of Springy clients use LibGuides to create an archive or digital repository. In fact, watch Jason Henderson's 2015 SpringyCamp presentation on creating a digital archive using LibGuides CMS.
As a suggestion, we would not recommend using the gallery box type to upload scans of book or articles. And here's why:
Users with motor skill issues, hand/eye coordination issues, slower/ESL readers, visually-impaired users, and mobile users will have a difficult time reading and manipulating your gallery box if the rotation speed is too fast.
Our suggestion? Turn off the auto-rotation feature entirely. The default setting is off, so leave the default as-is. Or, if you want to turn it on, keep the speed at 3000 milliseconds or higher.