Your Image Is Probably Not Decorative — Smashing Magazine

Quick summary ↬

Image placement on the modern web is highly intentional, helping to communicate the overall purpose of a page or view. This means that nearly every image you declare needs to have an alternate description.

The img element’s alt attribute 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:

This image has been nulled.

This image has not been 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.

Decorative does not mean that the image contains content that is considered as decoration.

For example, a website that sells wallpaper will want to have alternate descriptions for wallpaper samples:


Small red and white illustrated umbrellas on a teal background.

Another example could be a museum website, where presenting a piece from their collection could benefit from both an alternate description and a caption:


A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border.
View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds.

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 consistent layout across different operating systems, browsers, and browser versions. The most common example of this was a spacer.gif, a 1×1 transparent pixel that was stretched to different sizes to push content into place.

Three stretched spacer.gifs used to create an outer margin for the text, “Welcome to my homepage.” (Large preview)
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 box-shadow, 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 9-slice scaling, a term that refers to the 9 sections of content you would need to create.

The 9-slice scaling technique (Large preview)
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.

More after jump! Continue reading below ↓

Redundant Announcements

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.

Supplemental Icons

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:

Note that a visible text label is the preferred technique. A visible text label can be translated and communicates purpose more directly.

I have no idea what this button does.Contemporary Use

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.

The picture Element

The picture element 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.”

The picture element is a container for source and img elements. Use the img element’s alt attribute to provide an alternate description for the parent picture element.


A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue.

Background Images

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 background-image to place an image in such a way where the developer will not have control over the size of the image someone uploads. background-image, combined with other properties such as background-size will ensure that content of an unknown size is displayed without breaking the design.

See the Pen [Background Image As Foreground Image Example](https://codepen.io/smashingmag/pen/OJprPwK) by Eric Bailey.
See the Pen Background Image As Foreground Image Example by Eric Bailey.In a scenario like this, our old friend spacer.gif might be helpful again!

Inline SVG

SVG can be displayed by either linking to it via the src attribute in an img element, or by placing the SVG code inline in the page or view.

If you are using inline SVG, you need to use SVG’s title (and potentially desc) element in place of an alt attribute.

Bookmark.

Equivalent Experience

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:

(vf, il)

Typed at

Share your love

5 Comments

  1. Billig städfirma Göteborg
    Billig städfirma Göteborg

    youu arе in point of fact a excellent webmaster. Тhe website
    loading speed іs incredible. It sort of frels tһat you’re doing any distinctive
    trick. Moreoveг, Ƭhe ϲontents aгe masterwork.
    ʏou һave dߋne a ɡreat task оn this matter!

  2. Billig städfirma Göteborg
    Billig städfirma Göteborg

    I gⲟt what yоu intend,bookmarked, very decent site.

  3. COLLAGEN ANTI-WRINKLE EYE PATCHES
    COLLAGEN ANTI-WRINKLE EYE PATCHES

    Ηеllo, aftеr reading tһiѕ remarkable paragraph і am t᧐o delighted tօ
    share my knoԝ-һow here with friends.

  4. Billig städfirma Göteborg
    Billig städfirma Göteborg

    Hello very coool site!! Μаn .. Excellent ..
    Superb .. І’ll bookmark your blogg ɑnd tawke tһe feeds aⅼso…I am glad tⲟ find sօ many սseful informatiߋn right һere ᴡithin the
    put uр, we need develop more techniques in this regard,thanks fοr sharing.

  5. Billig städfirma Göteborg
    Billig städfirma Göteborg

    You maԁe varioᥙs nice poіnts there. Ι did a search
    on thе subject matter and f᧐und a good number οff people wіll consent with your
    blog.

Leave a Reply