For many website visitors, beautiful images are vital to creating an appealing browsing experience and help to create awareness of all the services and resources available at the library. However, if a visitor is using assistive technology that reads the screen, those images can hinder the visitor’s ability to quickly understand and navigate the library’s website content. So, how can you design websites that are accessible and easily browsable for all?
Ensuring your website is accessible for patrons, and that the right images have the right alt-text tags, doesn’t mean that images and the visual look and feel of your website isn’t important. Did you know that 50% of our brains are engaged in visual processing? Choosing the right image for your website is vital to create an engaging post. You can find of our 15 top places to find royalty-free images online here, as well as some best practices on image management for your website. However, one easy way you can make your sites more navigable and accessible for all patrons is to ensure that any image you post has the right kind of image alt tags.
Technology and screen readers cannot read an image without additional information added as tags to the image. When using a screen reader, the alt tags tell the device whether it needs to describe the image, or skip it, while someone is browsing the page. For a great look into how a non-sighted user sees the web, and how a JAWS (Job Access with Speech) screen reader can help users navigate a site take a look at this JAWS Screen Reader Demo from Accessible360.
Image alt tags add additional attributes to your images that allow users with assistive devices to gain contextual information about the image they’re browsing. All images require alt text, but ask yourself, is my image informative or decorative?
How do you know if your image is informative or decorative? There are a few questions you can ask yourself about the image to help you determine whether you require alt text or not.
Does the image contain text that the user needs to know about, but that is not covered elsewhere in the textual content or body of the page?
Is knowing what the image contains crucial to understanding the content of the page?
Does the image contain graphs or charts?
If you said yes to any of the above questions then your image is informative and you should add a descriptive alt tag. W3C also provides a decision tree that can be used to help you make these decisions.
Keep in mind that informative images add important information to a page. Think of images that supplement the text information on a page, like a historical photo, a how-to image, or images that help to convey succinct information on a page like a chart, graph or diagram.
This image (above) displays an example image that is informative. The name, date and location of the event are all listed in the image itself, and not reiterated again in the text that is associated with this image. This image should have alt text added to it.
Below is another example of an informative image. This is a historical photo of the University of Hawaii basketball team, and is central to the context of the blog post.
A decorative image doesn’t add additional information to the page that would be helpful to a visitor using assistive devices. Think of images used for visual styling or emphasis, but that supplement the text on the page, while not adding any additional information. A decorative image does not need, and should not have, an image alt tag.
These images (above) show two web cards, one for a blog post, and one for staff list. Both cards have enough descriptive information posted as text that the images are an additional styling to the post, but are not providing new information. These are decorative images and should not have any additional alt text added.
Common examples of decorative images on a library’s website are:
Author headshots or photos
Photos of people doing activities (e.g. a patron checking out a book)
Photos of buildings or branches (interior or exterior)
Photos of books, crafts, or other images designed to draw attention to an event or post.
Read the text aloud: To ensure that what you’ve written accurately describes the information conveyed by the image, have someone else close their eyes and then read aloud the alt-text you’ve written. If they can understand what the image is displaying and what the context is - you’re good! Ensure that you’ve provided enough information and context to describe the information well enough for a user who requires a screen reader.
Keep it short: WCAG suggests that alt-text fields should be 100 characters or less, so even though BiblioWeb will let you add in more than that, keep your descriptions short and ensure you’re being as concise as possible.
Be relevant: Alt-text is used by search engines, such as Google, for SEO (search engine optimization), so use keywords that are relevant to the image and your text to help with site ranking.
Be specific: Similar to keeping it short, you want to make sure that your alt tags accurately describe the image, meaning and content.
Looking for a good short-hand to help you remember what to do with your alt-text? This article from NYC Design offered a great way to explain it.
Remember:
If it’s got text: explain the words
If it’s visual: explain it
If it’s sensory: describe it
If it’s not necessary: leave it
There’s an easy way to add your alt tags to the images you upload to BiblioWeb. When you upload a new image to the Media Library there is a dropdown which allows you to specify if your image is informative or decorative. The default is set to decorative, as most web images fall under that category. If you choose informative for the image, and add in alt text, that text will apply to the image wherever it is used on your site, in any card, post or banners.
When you mark an image as informative, the text you add to the Alternative Text field will be read by screen readers.
Ensuring that the library website is accessible to all patrons is part of the library mandate to serve all citizens in the community, and by creating useful and informative alt text tags you’re ensuring that all patrons can browse the library website with ease, and that all patrons can engage with the library online.
To learn more about informative and decorative images please review these articles from the World Wide Web Consortium Web Accessibility tutorials:
https://www.w3.org/WAI/tutorials/images/
https://www.w3.org/WAI/tutorials/images/decorative/
Every picture tells a story: Image management on your Library Website
Beautiful, free images to jazz up your library website
Beyond Alt-text: Trends in Online Accessibility: CodeMash, an online webinar from our Manager of Software Engineering, Ian Forrest