This guide provides instructions and information about Stanford Web Services Jumpstart platform, based on Drupal 7.
We've released our new Stanford Sites on Drupal 8 (D8) platform — the new framework for Stanford Sites in 2020 and beyond. Check out our new User Guide to help you set up your website on the D8 platform.
Having good imagery on your site that truly serves the purpose of your content can actually improve the overall accessibility of your site. Here's a snippet on this topic from the Web Accessibility in Mind (WebAIM) website:
Some people think that graphics are bad for accessibility. The truth is that graphics can be of great benefit to the accessibility of a web page by providing illustrations, icons, animations, or other visual cues that aid comprehension for sighted individuals. Too often we forget that when we design for people with disabilities, we are not designing only for the blind. We must consider disabilities of all types. Graphics can be especially useful to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.
Using imagery to enhance the accessibility of your content can be a big win for you and your visitors. Think strategically about how images can make the content of your site more accessible. A wall of text is not necessarily the most accessible format for your content.
Purposeful imagery can greatly improve accessibility of your content, but we will also want to make sure that the images we add are accessible in and of themselves. By considering things such as alternative (alt) text, long descriptions, color and contrast, minimizing text within your images, and avoiding images that can cause seizures, you can make sure that the imagery on your site is accessible to visitors with disabilities (e.g. low vision, color-blindness, or blindness) or those who have turned off images in their browser. Working to make your images accessible also helps search engines better index the content on your site, which can improve your SEO (Search Engine Optimization).
I'm going to go into a little detail here on each of these image accessibility considerations.
Alternative text (or the
alt attribute on the image tag, e.g.:
<img alt="alternative text here" />) is used to explain the purpose of an image to those who are using screen readers or have images disabled in their browser. Unfortunately, we don't necessarily always want alternative text. To better understand this, I like to use this handy decision tree (below) to decide whether my image needs alt text. I've added some examples into the decision tree below to hopefully make it a little more useful.
altattribute to communicate the destination of the link or action taken
altattribute to include the communicative text of the image (not text included for visual effect)
altattribute should briefly describe the image in a way that conveys that meaning.
alttext is unknown at the time of publication (for example on a photo upload site): provide a caption for the image.
alttext to provide?
When your image is too complex to describe in short alternative text—for example, if the image is of a chart, graph, or infographic—you will want to provide a longer description of the contents of the image in addition to the short alternative text. A long description should provide all the information available through the complex graphic, but in text form. For example, if your graphic shows a chart tracking growth over time, your long description should describe what the chart is showing and list the values of growth for each unit of time. The reason we want this kind of detail for a complex graphic is that our graphic in this case is conveying critical information. The chart itself contains data that the user should be able to access. If they are blind or have other disabilities, we need to give them another way to access that data.
There are a couple ways to provide long descriptions:
longdescattribute, which can be added to the
To learn more about each of these methods, visit the WebAIM page on long descriptions.
Similar to the long description, when we have critical information being conveyed through our graphic (in this case maybe a chart or infographic), we want to consider disabilities such as color blindness and low vision. Make sure there is sufficient color contrast in your image so those with low vision can distinguish important information. The best tool for analyzing color contrast and also taking into consideration color blindness is The Paciello Group's Colour Contrast Analyser. By entering in your custom color values, you can make sure you are using sufficient color contrast in your graphics and simulate how those colors will look to those with color-blindness. The way the analyser tool (and others like it) checks for sufficient color contrast is by looking for a color contrast ratio of 4.5:1 for normal text (for level AA of WCAG 2.0). For larger text, a contrast ratio of 3:1 is acceptable under AA standards.
Now, when you go to download and install this handy program, don't be intimidated by their wall of text (maybe they should add some images?). Instead, skip to the Downloads section and grab the version that's right for your operating system. Once you open the Colour Contrast Analyser, you'll see it's very easy to use.
Users may need to scale up the size of a webpage to view it at an accessible size to accomodate for low vision. When this happens, graphics can become fuzzy and hard to read. When we put text inside our graphics, this text becomes harder to read if the user has scaled their browser. Although we can use alternative text to describe the text inside an image, instead, we will want to try to avoid putting text inside our graphics as much as possible to minimize the risk of it being inaccessible. Common cases where we do need to use text inside an image might be for logo or trademarks, and complex button graphics using special fonts. That said, nowadays we can more than ever find more accessible solutions using web fonts and floating the text over a background graphic. Again, we will want to make sure that there is sufficient color contrast so that the text is legible.
OK, this might seem obvious, but it's worth stating. Flickering visuals that create a strobe-like effect may cause seizures in some individuals. Now, I don't recommend that anyone use animated graphics on their site without a very good reason, but in particular we want to avoid high contrast, strobe-like animation effects, even if you think your "Warning!" message warrants it. The WebAIM site gives some examples and goes into greater detail about this particular accessibility consideration.
Images can greatly improve the accessibility of your site's content, but we need to be careful to make our images accessible to everyone by including appropriate alternative text, long descriptions, and making sure they use appropriate color contrast. I hope this post has been a helpful introduction to understanding some of the accessibility considerations you should balance when adding an image to your site. At the very least, I hope the alt text decision tree can be a useful tool! Remember, it's better to do a little bit than nothing at all, so if you're feeling overwhelmed, just start with the small stuff.