Your image may not be decorative

  • Home / Web Development / Your image may…

Your image may not be decorative

Quick Summary

The requirement of an image on the modern web is very deliberate, which helps to communicate the overall purpose of a page or view. This means that almost every image you advertise needs an alternative description.

img Elements alt The attribute can be “nulled” by setting it to a blank string instead of a text description. Canceling Alt’s description means there is no information between opening and close quotes. If there is a vacancy, it will not be considered canceled:

  <img alt="" src="https://www.smashingmagazine.com/images/cat.jpg" />
This image has been deleted.
  <img alt=" " src="https://www.smashingmagazine.com/images/dog.jpg" />
This image has not been deleted.

What does “decorative” mean?

Canceling an image indicates that it is for decorative purposes only.

In this context, decorative means image Does not communicate weakly To understand the purpose of this page or view, and why it is necessary to include the icon as part of it.

Decorative does not mean that the image contains material that is considered decorative.

For example, a website that sells wallpapers would like to describe alternatives to wallpaper patterns.

<a href="https://www.smashingmagazine.com/products/umbrella?variant=73849024783051">
  <img 
    alt="Small red and white illustrated umbrellas on a teal background."
    src="/images/73849024783051.png" />
</a>

Another example might be the museum’s website, where offering a piece from their collection can benefit from both alternative explanations and titles.

<figure 
  role="figure"
  aria-label="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.">
  <img
    alt="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."
    src="https://www.smashingmagazine.com/collection/w0895/2005-1057.png" />
  <figcaption>
    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.
  </figcaption>
</figure>

Make sure your alternative description includes punctuation!

Why would you want to make a picture decorative?

Institutional Technology will release the groove images and will not announce their presence. The reasons for wanting to do so are mostly historical.

Old layout technique

Early web development techniques rely on images to guarantee this. Permanent setting In different operating systems, browsers and browser versions. The most common example of this was one spacer.gif, A 1 × 1 transparent pixel that was spread out in different places so that the content could be placed in different places.

The three spreadsheets used to create the outer margin in the text. gifs, “Welcome to my homepage.” (Large preview)

This technique is commonly used by many Interval images Ltd. to create visual design. Without paving the way for their presence to be silenced, these images will be thrown into the chaos of what auxiliary technology has announced and the tangled time and effort required to access and process web content.

Old design techniques

Before CSS features existed box-shadow, Developers had to use techniques that cut out the decorative style to make it work with content of inappropriate height or width. This technique was called 9-slice scaling, a term that refers to the 9 pieces of material you have to create.

Text,

9 Slice Scaling Techniques (Large Preview)

Like Spacer Images, 9 Slice Scaling used multiple images to create the desired visual impression. And, like most spacer images, there’s only one way Remove clutter These images were created to mark them as decorative.

After more jumps! Continue reading below

Useless announcements

There is rarely a scene where the image is repeated on a page or scene and its repetition does not provide additional context in places. You should be careful about making an image a decorative mark in this situation, as the lack of an announcement of a visible image can be confusing for someone with low vision who is using a screen reader.

Additional icons

Links and buttons that use icons should always have an accessible name that describes the functionality. If the design includes an icon, the design of the icon does not need to be specified.

<button type="button">
  <img src="https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/icon-print.svg" alt="" />
  Print
</button>

If the component uses only one icon, the image should be used to create a self-accessible name:

<button type="button">
  <img src="https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/icon-print.svg" alt="Print." />
</button>

Note that a visible text label is the preferred technique. A visible text label can be translated and communicated more directly than intended.

Modern use

Modern CSS layout and styling techniques mean that image placement is now excellent. This means that if an image is used, it most likely needs an alternative explanation.

Alternatives should be explained State the purpose of the image. It also includes the content of the image, but it may also include the reason for the context in the page or the reason for its inclusion. This is one reason why alternative imagery will never be able to happen automatically.

Other ways to display images

There are other ways to display an image on a page or view. It is important to make sure that an alternative image is provided if it contains an alternative image Meaningful content – Regardless of the technique used

picture Element

picture The element does not have a complete role, which means that its presence does not speak to the supporting technology for any purpose. This means that it cannot be used to describe the presence of an image.

picture There is a container for the element source And img Elements. use the img Elements alt Attribute to provide an alternative explanation for parents picture Element

<a href="https://www.smashingmagazine.com/product/9091866/color/3">
  <picture>
    <source 
      srcset="https://www.smashingmagazine.com/9091866-3.avif" 
      type="image/avif" />
    <img 
      alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue."
      src="9091866-3.png" />
  </picture>
</a>

Background images

We can use CSS to declare an image as background on an HTML element. It is mostly used to incorporate textures into a design.

However, another popular technique is to use background-image Placing an image where the developer has no control Image size Someone uploads. background-image, Combined with other features background-size This will ensure that any unknown size material is displayed without breaking the design.

See pen [Background Image As Foreground Image Example](https://codepen.io/smashingmag/pen/OJprPwK) by Eric Bailey.

See the background image of the pen as a foreground image, such as Eric Bailey.

In a scene like this, our old friends spacer.gif Can be helpful again!

Online SVG

The SVG can be displayed either by linking to it src I have an attribute img By embedding the SVG code in the element, or page or scene.

If you are using inline SVG, you need to use SVG title (And possibly) desc) In place of the element alt Description.

<svg 
  role="img" 
  aria-labelledby="icon-bookmark-desc"
  xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <title id="icon-bookmark-desc">Bookmark.</title>
  <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/>
</svg>

Equal experience

In modern web design and development, displaying an image is a very deliberate process. Alternative explanations allow us to define the content of the icon, and in doing so, Why is it possible to add conversations?.

Just because an image shows something doesn’t mean it can’t be described. Announcing its presence ensures that anyone, regardless of qualifications or circumstances, fully understands your digital experience.

Further reading On SmashingMag:

Breaking the editorial(vf, he)

Write a Comment

Your email address will not be published. Required fields are marked *

x