SpringyNews: Return of the Student

1. Recommended Accessibility Tools & Springy Assistance

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. 

Suggested Browser Plugins (Free!)

• WAVE Extension for Firefox and Chrome - Evaluate web content for accessibility issues. 
• Tota11y bookmarklet for Chrome - Helps you visualize how your site performs with assistive technologies. 
• Siteimprove Accessibility Checker - Highlights detected accessibility issues right on the page.

Springy Help Documentation & Training Sessions

• Accessibility and LibGuides Help Documentation
• Best Practices for Building LibGuides and Accessibility Tips
  • Wednesday, October 18. 10:00am - 11:15am US ET
  • Wednesday, November 15. 1:00pm - 2:15pm US ET
  • Can't attend the live training? Watch a recording.

2. How to Write Effective Alternative Text

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.

What is alt text?

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.

Why you should add them

1. Screen Readers: For visually or cognitively-impaired users, the alternative text is read outloud by screen reader software.
2. Mobile-Users/Slow Bandwidth: Not everyone has LTE or high-speed internet. For users who choose to disable images from loading on web pages due to bandwidth issues, the alternative text displays instead and provides context. 
3. Helps Your SEO: Properly-formatted alternative text provides "semantic meaning and description to images which can be read by search engines." - WebAIM, Alternative Text.

Now that you know the what and the why of alternative text, let's cover the how.

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.

Are you adding value?

Something to consider is whether an image actually adds value to what you're writing.

• Why are you adding an image?
• Does it add to the content?
• Is it merely decorative? And if yes, why add it?

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"?

The importance of context

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.

How do I determine when I should add alt text or when to leave the alt attribute empty?

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. 

• Function - Does the image contains a link? Is it a button? Is it an image map?
  1. If yes, then then image provides a function and should contain alternative text. 
  2. If no, see content below.
• Content - Does the image present content? Is there text around the image that conveys that content?
  1. If the image presents content that is not communicated by text around the image, then you must add alternative text. 
  2. If the image presents content that is communicated by text around the image, then you do not need to add alternative text. Create an empty/null alt attribute: Alt=" ". 
  3. If the image does not present content and is considered decorative, then you do not need to add alternative text. Create an empty/null alt attribute: Alt=" ". 

Let's look at some examples

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.

Tips for Alternative Text for Specific Types of Images

• Purely decorative image - If the image is purely decorative and the surrounding copy explains the image, then alt text is most likely not needed. (e.g. alt= " ")
• Images that are screenshots - If the image is a screenshot of a database or catalog, with annotations, it is strongly encouraged that you add descriptive copy around the image. Leave the alt text empty. (e.g. alt= " ")
• Images that contain copy - If your graphic contains copy, be sure to either add in descriptive copy around the image or repeat that copy in the alt text.

How do I create an empty/null alt tag?

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. 

3. Color Contrast - Setting Up an Optimal Display

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.

Well, then I'll just make everything black copy on white background. Problem solved!

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.

Color contrast examples

Do my LibGuides colors have a high contrast ratio?

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. 

• Color Contrast Checker - Run your LibGuides colors through the WebAIM Color Contrast Checker.
  • WCAG 2.0 level AA requires a contrast ratio of at least 4.5: 1 for normal text and 3:1 for large text.
  • WCAG 2.0 level AAA requires a contrast ratio of 7:1 for normal text and 4.5: 1 for large text.
    * Large text = 18px and bold or larger
• Adjust Your Monitor - Turn down the contrast on your monitor and see if you can still read your LibGuides. 
• Look Through Tissue/Tracing Paper - If you're using an LCD monitor or laptop, hold up a tissue or piece of tracing paper and see if you can read the words on your LibGuide.
• Try the Spectrum Chrome Extension - View your website's colors through the eyes of colorblind users with this simple extension.

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.

4. Are Your Links Descriptive?

Descriptive & Readable Friendly URLs

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? 

Let's check-out some illustrative examples

5. Make Your Content as Stellar as the Gallery Box!

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.

Book/Article Scans Should Find a New Home

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:

1. Alt Text Would Be Looooooong - In order for that image of a book/article scan to appear for screen readers, you would need to retype the entire copy into the alt text. And nobody has time for that!
2. Not OCR-Designed - Since uploaded scans are considered images, the LibGuides search can not search the body of the scan in search results. 
3. #SpeedReadingFail - If you've turned on the auto-advance, there's a good chance your users can't read the scan fast enough before it advances.

Slooooowww Down

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.

​