Your image may not be decorative
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.
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:
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.
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.
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.
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.
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 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 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
img Elements. use the
alt Attribute to provide an alternative explanation for parents
<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>
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.
In a scene like this, our old friends
spacer.gif Can be helpful again!
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
<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>
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.