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.
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.
