can be “nulled,” which is the act of setting it to an empty string instead of a text description. Nulling an alt description means there is no information between the opening and close quotes. If there is an empty space, it will not be considered nulled:
What Does “Decorative” Mean?
Nulling an image indicates that it is for decorative purposes only.
In this context, decorative means that the image does not visually communicate information that is important to understanding the purpose of the page or view, and why the image is included as a part of that.
For example, a website that sells wallpaper will want to have alternate descriptions for wallpaper samples:
Another example could be a museum website, where presenting a piece from their collection could benefit from both an alternate description and a caption :
Make sure that your alternate description includes punctuation , as well!
Why Would You Want To Make An Image Decorative?
Assistive technology will skip over nulled images and not announce their presence. The reasons for wanting to do this are mostly historical.
Old Layout Techniques
Early web development techniques relied on images to help them guarantee
across different operating systems, browsers, and browser versions. The most common example of this was a
, a 1×1 transparent pixel that was stretched to different sizes to push content into place.
This technique would typically use many spacing images to create a visual design. Without a way to silence their presence, these images would clutter up what assistive technology announced and make it confusing and time-consuming to navigate and take action on web content.
Old Design Techniques
Before there were CSS properties such as
, developers had to use techniques that chopped up the decorative styling to make it work with content of indeterminate height or width. This technique was called
, a term that refers to the 9 sections of content you would need to create.
Much like spacer images, 9-slice scaling used multiple images to create the desired visual effect. And, much like spacer images, the only way to remove the clutter these images created was to mark them as decorative.
There is the rare scenario where an image is repeated on a page or view, and it’s repeat placements don’t supply any additional context. You should be careful about marking an image decorative in this situation, as the lack of an announcement for a visible image may be confusing for someone with low vision who is using a screen reader .
Links and buttons that use icons should always have an accessible name that communicates functionality. If the design also incorporates an icon, the icon’s design does not need to be communicated.
If the component only uses an icon, the image itself should be used to create the accessible name:
Modern CSS layout and styling techniques means that image placement is now highly intentional. This means that if an image is used, it is most likely going to need an alternate description.
Alternate descriptions should communicate the image’s purpose . That includes the image’s content, but may also include the reason it is included in context on the page or view it has been included in. This is one of the reasons why alternate image descriptions will never be able to be fully automated .
Other Ways Of Displaying Images
There are a few other ways to display an image on a page or view. It is important to ensure an alternate description is provided if the image contains meaningful content — regardless of the technique utilized.
does not have
an implicit role
, meaning that its presence does not communicate any purpose to assistive technology. This means it can’t be used to semantically describe the presence of a “picture.”
element is a container for
elements. Use the
attribute to provide an alternate description for the parent
We can use CSS to declare an image as a background on an HTML element. This is most often used to add a sense of texture to a design.
However, another popular technique is to use a
to place an image in such a way where the developer will not have control over the
size of the image
, combined with other properties such as
will ensure that content of an unknown size is displayed without breaking the design.
In a scenario like this,
our old friend
might be helpful again
SVG can be displayed by either linking to it via the
attribute in an
element, or by placing the SVG code inline in the page or view.
If you are using inline SVG, you need to
in place of an
In modern web design and development, displaying an image is a highly intentional act. Alternate descriptions allow us to explain the content of the image, and in doing so, communicate why it is worth including .
Just because an image displays something fanciful doesn’t mean it isn’t worth describing. Announcing its presence ensures that anyone, regardless of ability or circumstance , can fully understand your digital experience.
Further Reading on SmashingMag:
- Accessibility In Chrome DevTools
- A Complete Guide To Accessibility Tooling
- Accessible Images For When They Matter Most
- Accessible SVGs: Perfect Patterns For Screen Reader Users
- Designing With Reduced Motion For Motion Sensitivities
- Read more articles on accessibility , usability and UX .