The images you share on your school website and your school social media make a huge difference. There’s an old Chinese adage that says, “When I hear, I forget. When I see, I remember.” Typically the saying refers to learning something—in this case, I want you to think about it in terms of your school marketing, public relations, and brand. Seeing is remembering. If you’re trying to make an impression on your community and prospective parents, you need to show them something about your school that’s worth remembering.
Pictures and images help your community see your mission and vision in action.We share the importance of good photos for your school website along with some photography tips in a past blog called “You Don’t Always Need a Thousand Words: Just a Few Good Photos.” It’s worth a read if you missed it!
So, because we covered all that previously, we want to focus on something else regarding your school photos.
The American’s with Disabilities Act (ADA) exists to help prevent discrimination against individuals with disabilities. When it comes to your school website, there are many regulations and guidelines in place that will help you provide an equal user experience to individuals with disabilities who use your website. Many of those accessibility guidelines relate to posting and sharing images.
If you’re worried about maintaining ADA compliance and avoiding a complaint filed with the Office of Civil Rights (OCR), then you might be anxious when it comes to sharing your school photos online.
Yes, there are things you need to take into consideration—but don’t let that stop you from reaping the benefits of showcasing your school online! In this blog, we’re going to share some of our best practices and tips for sharing photos in an accessible way.
Photo Accessibility Tips
When you consider sharing images online, there are some clear do’s and don'ts. Here’s a simple breakdown:
Add Alternative Text
All images on your website need to have alternative text. For users who are visually impaired or choose to disable images, the alternative text (or alt text) is what displays and what a screen reader reads to describe the image. Here are two key tips to remember when adding alt text:
- Never start your alt text with a phrase like, “image of” or “a picture of”—the assistive technologies will identify your picture as an image.
- Then, just keep your descriptions short—don’t try to go into a lot of detail. If you’re not sure what to say, pretend you’re on the phone with a friend. What would you say in a sentence or two to describe the image? You might say, “There’s a picture of a teacher with her students working on a lab experiment.” For your alt text, leave out the part where you identify the image as “a picture,” and your alt text would simply read, “A teacher with her students working on a lab experiment.”
Mark Appropriate Images as Decorative
Some images on your website don’t require alternative text. According to the World Wide Web Consortium (W3C), decorative images can be marked as such when they are:
- Visual styling such as borders, spacers, and corners
- Supplementary to link text to improve its appearance or increase the clickable area
- Illustrative of adjacent text but not contributing information (“eye-candy”)
- Identified and described by surrounding text
To mark an image as decorative, you can leave the alternative text blank. Be sure you still include an alt attribute. It will look like this:
Avoid Using Images with Text
If you have created an image with text, you will need to make sure that all the text is available as alternative text. This becomes especially complicated if you’ve posted an event flyer as an image. Consider posting an accessible PDF instead of an image.
In addition to ensuring you implement alt text appropriately, text within images poses other accessibility issues. For example, when a user needs to increase the size of the text on a page by only zooming text, the size of the text within a graphic does not increase. We always recommend adding text as actual text on your web pages.
Check Color Contrast
The Website Content Accessibility Guidelines (WCAG) explain that contrast is a measure between the difference in perceived “brightness” between the foreground color and the background color. This is especially important to users who may have a visual disability such as color blindness. The best advice here is to avoid using text over an image, but if you must, then be sure to check the color contrast.
Include Controls for Image Carousels
First, we do not recommend image controls, as they are typically an accessibility nightmare. Images that scroll, rotate, or change automatically present a problem for some users. In order to be accessible, any script that causes images to automatically advance should include a function that allows the user to stop and play the movement. This function must be accessible to everyone—including keyboard-only users. In other words, you need to be able to stop and play the movement without using a mouse. Additionally, each time new content is loaded, the new content must be presented to everyone—including screen reader users.
Sharing Images Online—Best Practices
Now that you understand the basic guidelines for making your images accessible, let’s talk about where and how to share them.
