--- title: Ensuring Images on Your Library Website are Accessible | BiblioCommons description: Beautiful images are vital to creating an appealing experience in your library website, but they can hinder the ability to quickly understand the content for those using assistive screen reading technology. Learn ways to overcome this. image: https://blog.bibliocommons.com/hubfs/Blog/Blog%20Posts/2020-06-12%20Ensuring%20Images%20on%20Website%20are%20Accessible/BiblioCommons_Social_Blog_Ensuring-Images-are-Accessible.jpg --- [Partner Portal](https://partnerportal.bibliocommons.com/hc/en-us) [Support](https://partnerportal.bibliocommons.com/hc/en-us/requests/new) [Careers](https://www.bibliocommons.com/careers) [![BiblioCommons\_logo\_RGB](https://blog.bibliocommons.com/hs-fs/hubfs/Logos/BiblioCommons_logo_RGB.png?width=2000&height=586&name=BiblioCommons_logo_RGB.png)](https://www.bibliocommons.com/) Why BiblioCommons? ## Featured Resources [![64cc72825ae66c58460a5783\_BiblioCommons\_Resource\_Video-Story-Lawrence-Polli\_Thumb](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc72825ae66c58460a5783_BiblioCommons_Resource_Video-Story-Lawrence-Polli_Thumb.jpeg?width=600&height=350&name=64cc72825ae66c58460a5783_BiblioCommons_Resource_Video-Story-Lawrence-Polli_Thumb.jpeg) Lawrence Public Library Creates Personalized Readers Advisory Services to Connect with Patrons](https://resources.bibliocommons.com/access-granted-video-lawrence-public-library-creates-personalized-readers-advisory-services-to-connect-with-patrons) [![Library 2.0: Why Everyone’s Talking About Digital Accessibility-Everyone-Is-Talking-Digital-Accessibility\_Thumb](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc728108678fffccadf55e_BiblioCommons_Resource_Blog_A11y-Everyone-Is-Talking-Digital-Accessibility_Thumb.jpeg?width=600&height=350&name=64cc728108678fffccadf55e_BiblioCommons_Resource_Blog_A11y-Everyone-Is-Talking-Digital-Accessibility_Thumb.jpeg) Library 2.0: Why Everyone’s Talking About Digital Accessibility](https://blog.bibliocommons.com/blog/library-2.0-why-everyones-talking-about-digital-accessibility) [See all resources](https://www.bibliocommons.com/resources) ## Why BiblioCommons? [Success Stories Hear how Library Partners are making an impact in their communities](https://www.bibliocommons.com/success-stories) [Our Story A better online catalog was just the beginning](https://www.bibliocommons.com/our-story) [Libraries We Work With Take a look at all the Partner Libraries that subscribe to BiblioCommons](https://www.bibliocommons.com/libraries-we-work-with) [News Stay up-to-date on the latest company updates with news articles, press releases, and announcements](https://www.bibliocommons.com/news) Solutions ## Featured Resources [![How EPL Makes All Formats Easily Discoverable on Its Online Catalog](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc7283a40d493701247bda_BiblioCommons_Resource_Video-Story-EPL-BiblioCore_Thumb.jpeg?width=600&height=350&name=64cc7283a40d493701247bda_BiblioCommons_Resource_Video-Story-EPL-BiblioCore_Thumb.jpeg) How EPL Makes All Formats Easily Discoverable on Its Online Catalog](https://resources.bibliocommons.com/access-granted-video-how-epl-makes-all-formats-easily-discoverable-on-its-online-catalog) [![Library 2.0: Inclusive Images and Text Take Your Website Beyond Technical Compliance](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc728263171ef951dfe9fe_BiblioCommons_Resource_Blog_A11y-Inclusive-Images-and-Text_Thumb.jpeg?width=600&height=350&name=64cc728263171ef951dfe9fe_BiblioCommons_Resource_Blog_A11y-Inclusive-Images-and-Text_Thumb.jpeg) Library 2.0: Inclusive Images and Text Take Your Website Beyond Technical Compliance](https://blog.bibliocommons.com/blog/library-2.0-inclusive-images-and-text-take-your-website-beyond-technical-compliance) [See all resources](https://www.bibliocommons.com/resources) ## Solutions [![Discovery Layer](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a211ced7fa857343a5cf_biblio-core-round.svg) Discovery Layer Accurate search results, easier borrowing, and endless discovery pathways](https://www.bibliocommons.com/solutions/bibliocore) [![Discovery Layer Add-Ons](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a211ced7fa857343a5cf_biblio-core-round%20(1).svg) Discovery Layer Add-Ons Unlock more ways to engage with patrons](https://www.bibliocommons.com/solutions/bibliocore-add-ons) [![Mobile App](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a2113ed2327dd1a577c3_biblio-apps-round.svg) Mobile App Deliver engaging content and promote discovery wherever your patrons are](https://www.bibliocommons.com/solutions/biblioapps) [![Website Builder](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a2119e3caf2ea2a27417_biblio-web-round.svg) Website Builder Showcase the best your library has to offer with a fully integrated CMS and webpage builder](https://www.bibliocommons.com/solutions/biblioweb) [![Events Calendar](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a211fe53659fbd9b0c10_biblio-events-round.svg) Events Calendar A patron-friendly way to manage and promote your library's programs and events](https://www.bibliocommons.com/solutions/biblioevents) [![Email Marketing](https://blog.bibliocommons.com/hubfs/BiblioCommons%20rebrand%202023/Images/6442a2118a7ef86b347b5dae_biblio-email-round.svg) Email Marketing Email Marketing That’s Personalized, Automated, and Integrated](https://www.bibliocommons.com/solutions/biblioemail) Services ## Featured Resources [![Library 2.0: How Accessible Is Your Mobile App? (Tips to Make It Happen!)](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc72835ae66c58460a58ad_BiblioCommons_Resource_Blog_A11y-Mobile-App_Thumb.jpeg?width=600&height=350&name=64cc72835ae66c58460a58ad_BiblioCommons_Resource_Blog_A11y-Mobile-App_Thumb.jpeg) Library 2.0: How Accessible Is Your Mobile App? (Tips to Make It Happen!)](https://blog.bibliocommons.com/blog/library-2.0-how-accessible-is-your-mobile-app) [![Creating Focused Emails That Will Delight Library Patrons](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc7280d4d4629cd9c4467a_BiblioCommons_Resource_Blog_Email-Structure_Thumb.jpeg?width=600&height=350&name=64cc7280d4d4629cd9c4467a_BiblioCommons_Resource_Blog_Email-Structure_Thumb.jpeg) Creating Focused Emails That Will Delight Library Patrons](https://blog.bibliocommons.com/blog/creating-focused-emails-that-will-delight-library-patrons) [See all resources](https://www.bibliocommons.com/resources) ## Services [Professional Services Support your library’s team with professional services](https://www.bibliocommons.com/professional-services) [Training and Support Comfort in knowing you're always supported](https://www.bibliocommons.com/training-and-support) Resources ## Featured Resources [![Email Marketing Planning](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc727f70e1ef2a2b0a928b_BiblioCommons_Resource_Template_Email-Marketing-Planning_Thumb.jpeg?width=600&height=350&name=64cc727f70e1ef2a2b0a928b_BiblioCommons_Resource_Template_Email-Marketing-Planning_Thumb.jpeg) Email Marketing Planning](https://resources.bibliocommons.com/template-email-marketing-planning) [![64cc7284d4d4629cd9c44a5b\_BiblioCommons\_Resource\_Blog\_Mktg-PR-to-Visionary\_Thumb](https://blog.bibliocommons.com/hs-fs/hubfs/BiblioCommons%20rebrand%202023/Images/64cc7284d4d4629cd9c44a5b_BiblioCommons_Resource_Blog_Mktg-PR-to-Visionary_Thumb.jpeg?width=600&height=350&name=64cc7284d4d4629cd9c44a5b_BiblioCommons_Resource_Blog_Mktg-PR-to-Visionary_Thumb.jpeg) Library Marketing: From Building Public Relations to Becoming Visionary Storytellers](https://blog.bibliocommons.com/blog/library-marketing-public-relations-to-visionary-storytellers) [See all resources](https://www.bibliocommons.com/resources) ## Resources [All Resources Access all types of resources like guides, templates, videos, and reports to learn best practices and get new ideas](https://www.bibliocommons.com/resources) [Webinars Register to attend upcoming live webinars and get access to on-demand webinar recordings that cover a variety of topics](https://www.bibliocommons.com/webinars) [Blog Dive into our blog to read about library trends, expert opinions, fresh ideas, and practical tips that you can use in your day-to-day](https://www.bibliocommons.com/blog) [Newsletters Sign up to receive the latest in public library topics, new product features, and upcoming events in your inbox](https://www.bibliocommons.com/newsletters) [BiblioCon Learn from public library staff and leaders that are experts in creating unforgettable, fresh, and engaging experiences](https://www.bibliocommons.com/bibliocon) [Contact Us](https://www.bibliocommons.com/contact-us) # Ensuring Images on Your Library Website are Accessible [June 12, 2020](https://blog.bibliocommons.com/blog/2020/6/3/decorative-or-informative-ensuring-images-on-your-library-website-are-accessible) 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](https://www.bibliocommons.com/blog/01/10/2020/towards-web-accessibility) 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](https://neomam.com/interactive/13reasons/) 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](https://www.bibliocommons.com/blog/2020/6/3/the-best-things-in-life-are-free-beautiful-free-images-to-jazz-up-your-library-website), as well as some [best practices on image management for your website](https://www.bibliocommons.com/blog/2020/6/2/every-picture-tells-a-story-image-management-on-your-library-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](https://youtu.be/ztCXCqt-2-M). 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](https://youtu.be/Q1gHxM1nP00) 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?    ### **Informative vs. 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](https://www.w3.org/WAI/tutorials/images/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. ![open mike night image.png](https://blog.bibliocommons.com/hs-fs/hubfs/Imported_Blog_Media/open%20mike%20night%20image.png?width=383&name=open%20mike%20night%20image.png) 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. ![Univeristy of hawaii basketball team.jpg](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/Univeristy%20of%20hawaii%20basketball%20team.jpg) 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. ![decorative image example.png](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/decorative%20image%20example.png) 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. ### **How to Write an Effective Alt Tag for Informative Images** 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](https://www.w3.org/WAI/GL/WCAG20/tests/test3.html) 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](https://medium.com/nyc-design/how-to-write-effective-alt-tags-for-images-9f888f36992f) 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   ### **How does BiblioWeb Support Alt-text Tags?** ![Screen Shot 2020-06-03 at 1.24.37 PM.png](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/Screen%20Shot%202020-06-03%20at%201_24_37%20PM-1.png) 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. ![Screen Shot 2020-05-29 at 11.15.28 AM.png](https://blog.bibliocommons.com/hubfs/Imported_Blog_Media/Screen%20Shot%202020-05-29%20at%2011_15_28%20AM.png) 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/) [https://www.w3.org/WAI/tutorials/images/decorative/](https://www.w3.org/WAI/tutorials/images/decorative/) [https://www.w3.org/WAI/tutorials/images/informative/](https://www.w3.org/WAI/tutorials/images/informative/) [https://www.w3.org/WAI/tutorials/images/tips/](https://www.w3.org/WAI/tutorials/images/tips/) --- ### Learn more: [Every picture tells a story: Image management on your Library Website](https://www.bibliocommons.com/blog/2020/6/2/every-picture-tells-a-story-image-management-on-your-library-website) [Beautiful, free images to jazz up your library website](https://www.bibliocommons.com/blog/2020/6/3/the-best-things-in-life-are-free-beautiful-free-images-to-jazz-up-your-library-website) [Beyond Alt-text: Trends in Online Accessibility: CodeMash](https://www.pluralsight.com/courses/codemash-session-09), an online webinar from our Manager of Software Engineering, Ian Forrest --- ### Interested in learning more about how BiblioWeb can help you build, create and upkeep an engaging library website? [Request a demo](https://www.bibliocommons.com/request-a-demo-biblioapps) Tagged: [BiblioWeb](https://blog.bibliocommons.com/blog/tag/biblioweb), [Content Creation](https://blog.bibliocommons.com/blog/tag/content-creation), [Accessibility](https://blog.bibliocommons.com/blog/tag/accessibility) Share - [Tweet](https://twitter.com/share) Newer Post [Email Marketing Fundamentals for Public Libraries](https://blog.bibliocommons.com/blog/email-marketing-fundamentals-for-public-libraries) Older Post [Beautiful, Free Images to Jazz Up Your Library Website](https://blog.bibliocommons.com/blog/2020/6/3/the-best-things-in-life-are-free-beautiful-free-images-to-jazz-up-your-library-website) [![BiblioCommons](https://blog.bibliocommons.com/hubfs/BiblioCon%202023/white-logo.svg)](https://www.bibliocommons.com/) Join the *Love Your Online Library* newsletter to stay up to date on features and releases. Newsletter Sign Up ### Why BiblioCommons? - [Success Stories](https://www.bibliocommons.com/success-stories) - [Libraries We Work With](https://www.bibliocommons.com/libraries-we-work-with) - [Our Story](https://www.bibliocommons.com/our-story) - [News Articles](https://www.bibliocommons.com/news) ### Solutions - [Discovery Layer](https://www.bibliocommons.com/solutions/bibliocore) - [Discovery Layer Add-Ons](https://www.bibliocommons.com/solutions/bibliocore-add-ons) - [Mobile App](https://www.bibliocommons.com/solutions/biblioapps) - [Website Builder](https://www.bibliocommons.com/solutions/biblioweb) - [Events Calendar](https://www.bibliocommons.com/solutions/biblioevents) - [Email Marketing](https://www.bibliocommons.com/solutions/biblioemail) ### Services - [Professional Services](https://www.bibliocommons.com/professional-services) - [Training and Support](https://www.bibliocommons.com/training-and-support) ### Resources - [All Resources](https://www.bibliocommons.com/resources) - [Blog](https://www.bibliocommons.com/blog) - [Webinars](https://www.bibliocommons.com/webinars) - [Newsletters](https://www.bibliocommons.com/newsletters) - [BiblioCon](https://www.bibliocommons.com/bibliocon) [Follow BiblioCommons on Facebook (Opens in a new window)](https://www.facebook.com/BiblioCommons/) [Follow BiblioCommons on X (Opens in a new window)](https://twitter.com/bibliocommons) [Follow BiblioCommons on LinkedIn (Opens in a new window)](https://www.linkedin.com/company/bibliocommons) © 2024 BiblioCommons. All rights reserved. [Privacy and Cookie Policies](https://www.bibliocommons.com/privacy-policy)