All About Decorative Images and Accessibility

On the modern web, image placement is highly intentional. It communicates the overall purpose of a page, so almost every image you declare should have an alternate description.

person_typing_on_a_laptop_computer

You can “null” the img element’s alt attribute. “Nulling” is the act of setting it to an empty string rather than a text description. By nulling an alt description, you are saying there is no information between the opening and close quotes. However, if there is an empty space, it is not considered nulled.

Nulled image: <img alt=”” src=”/images/food.jpg”/>

Not Nulled Image: <img alt=” ” src=”/images/food.jpg”/>

What Does Decorative Mean?

When you null an image, you indicate that it is for decorative purposes only, meaning the image doesn’t visually communicate information essential for understanding the page’s purpose. Although it may sound like it, decorative doesn’t mean that the image contains content that is just considered a decoration.

Why Would You Make an Image Decorative?

Making an image decorative makes it so assistive technology will skip over a nulled image and not announce their presence. There are multiple reasons for making images decorative, but they are primarily historical.

Old Layout Techniques

Early website development techniques traditionally relied on images to guarantee consistent layout across operating systems and browsers. The most common example was a spacer.gif, a transparent 1×1 pixel stretched to various sizes to push content into its place. This technique used many spacing images to create the desired visual design. Unfortunately, these spacing images would overwhelm and clutter what assistive technology would announce, which made it confusing and time-consuming to navigate web content. Therefore, a way to silence these images was necessary.

Old Design Techniques

Before CSS properties like box-shadow, developers were forced to use techniques that would use repeating background images for content with a flexible height or width. This was called 9-slice scaling, a term that refers to the nine sections of content you had to create. Similar to spacing images, 9-slice scaling utilized multiple images to achieve the desired visual effects. The only way to remove the clutter of these images was to also mark them as decorative.

Redundant Announcements

Sometimes, an image is repeated on a page, but the repeated image placement doesn’t supply any additional context or information. You have to be careful about marking an image as decorative in this scenario because the lack of an announcement for a viable image could be confusing for someone with low vision that is using a screen reader.

Supplemental Icons

Buttons and links that contain icons should always have an accessible name that communicates their function. If the design also has an icon, the icon’s design doesn’t have to be communicated, but if the component only utilizes an icon, the image should be used to create the accessible name. The preferred technique when dealing with icons is a visible text label because it can be translated and communicate its purpose directly.

Contemporary Use

Because of modern CSS layout and styling techniques, image placement is now very intentional. If an image is used, it is more than likely going to need an alternate description. Alternate descriptions need to communicate the purpose of the image. Not only does it include the content of the image, but also it should include why it is on the page. For this reason, alternate image descriptions will never be fully automated.

Other Ways to Display Images

There are a couple of other ways to display images on a page, and it is important you provide an alternate description if the image contains meaningful content, regardless of which technique you use.

Picture Element

The picture element does not have a specific role. This means its presence communicates no purpose to assistive technology.

The picture element is a repository for img and source elements. Using the img element’s alt attribute provides an alternate description for the parent picture element.

Background Images

You use CSS when declaring an image as a background on an HTML element. Most often, this is used to add a sense of texture.

Another popular technique is to use a background-image to place an image so that the developer won’t be able to control the size of an image someone uploads. When you combine background-image with other properties like background-size, you will make sure that content of unknown size is displayed without breaking the design.

Inline SVG

You can display SVG by linking to it via the src attribute in an img element. You could also place the SVG code inline on the page.

If you use inline SVG, you have to use SVG’s title element instead of an alt attribute.

Conclusion

Displaying an image is highly intentional, especially in modern website design and development. Therefore, alternate descriptions are essential to explaining the content of an image and communicating why it is worth including on your page.

Announcing the presence of an image is crucial to an accessible website. It allows anyone, regardless of their abilities or circumstance, to fully understand the digital experience you are providing them.

A global team of digerati with offices in Washington, D.C. and Southern California, we provide digital marketing, web design, and creative for brands you know and nonprofits you love.

Follow us to receive the latest digital insights:

Remarketing campaigns allow you to reconnect with visitors who have previously interacted with your website but didn’t complete the desired action, such as making a purchase. But how do you...

Businesses are constantly seeking ways to improve efficiency, especially in capturing and managing leads. One of the most effective solutions is a Salesforce integration of its webforms with WordPress. This...

Businesses need to stay connected with their audience more than ever. Social listening tools allow you to track and analyze online conversations around your brand, competitors, or industry. By leveraging...

The rise of AI-powered solutions is reshaping the landscape of customer service, support, and automation. For organizations ranging from nonprofits to national associations and large enterprises, creating seamless customer experiences...

Ready for more?

Subscribe to our newsletter to stay up to date on the latest web design trends, digital marketing approaches, ecommerce technologies, and industry-specific digital solutions.

Name