alt=""
empty, null
<img src="decor.jpg" alt="">
With the alt
attribute you can provide a text alternative to represent the meaning of the visual content in an <img>
in the context of its use or to signify the img can be safely ignored.
In a context where the image is considered decorative or contains information provided in text elsewhere in the same context, the alt
attribute may be empty.
equivalents can be confusing
In modern browsers (except Firefox):
alt=""
is mapped to role="presentation|none"
alt=""
on an <img>
has the same effect as:
alt
role="presentation"
aria-hidden="true"
Which means that the img
element is removed from the accessibility tree, (except in Firefox where alt/alt=""
results in the img
being present in the accessibility tree with an accessible name =""
)
no alt
is equivalent to
aria-label=""
aria-labelledby=""
title=""
Which means that the img
element is present in the accessibility tree but has an accessible name =""
(except for Firefox where the accessible name=null
for alt
, aria-label=""
, and aria-labelledby=""
)
What’s it all mean?
If you have an img
that you consider decorative all of the following are methods that will have the desired effect of hiding the img
from screen readers: alt
, alt=""
, role="presentation|none"
, and aria-hidden="true"
and will conform with WCAG Success Criterion 1.1.1 Non-text Content:
Decoration, Formatting, Invisible
If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
while no alt
, aria-label=""
, aria-labelledby=""
, title=""
will not.
no alt
, aria-label=""
, aria-labelledby=""
, title=""
are not sufficient methods to conform to WCAG Success Criterion 1.1.1 Non-text Content requirements for decorative images.
alt=""
and alt
are the only methods that conform with the requirements of the HTML spec.
where alt
works
The alt
attribute provides an accessible name on <img>
, <input type="image">
and <area>
elements. It does nothing when used with or without role="img"
, on any other elements.
<div role="img" alt=""></div>
alt
does nothing, with or without role="img"
, on any other elements.
when is an image decorative?
Difficult question, the subject of much debate, sometimes accompanied by third party anecdata from a blind person who may want all images described or some or none…
Some resources which may be helpful:
- Text descriptions and emotion rich images
- A purely decorative image that doesn’t add any information
- An image not intended for the user
- Images that enhance the themes or subject matter of the page content
- An alt Decision Tree
test cases
If you are keen, you can run through the test cases with your favourite browser/screen reader
- ALT TAG EMPTINESS
- ALT TAG EMPTINESS with links
- ALT TAG EMPTINESS with links and text
- ALT TAG EMPTINESS with links and aria-label
Motorcycle Emptiness
Motorcycle emptiness – Lyrics
Culture sucks downwards Itemize loathing and feed yourself smiles Organize your safe tribal war Hurt, maim, kill and enslave the ghetto Each day living out a lie Life sold cheaply forever, ever, ever Under neon loneliness Motorcycle emptiness Under neon loneliness Motorcycle emptiness Life lies a slow suicide Orthodox dreams and symbolic myths From feudal serf to spender This wonderful world of purchase power Just like lungs sucking on air Survival's natural as sorrow, sorrow, sorrow Under neon loneliness Motorcycle emptiness Under neon loneliness Motorcycle emptiness All we want from you are the kicks you've given us All we want from you are the kicks you've given us Under neon loneliness Motorcycle emptiness Drive away and it's the same Everywhere death row, everyone's a victim Your joys are counterfeit This happiness corrupt political shit Living life like a comatose Ego-loaded and swallow, swallow, swallow Under neon loneliness Motorcycle emptiness Under neon loneliness Everlasting nothingness Source: Musixmatch Songwriters: Bradfield James Dean / Moore Sean Anthony / Edwards Richard / Jones Nicholas
6 replies on “ALT TAG EMPTINESS”
Thanks Steve for the neat explanation and thorough testing. It’s interesting to note the general change away from falling back to the image’s filename.
We did a bit of Mac testing (on macOS 11 Big Sur and macOS 12 Monterey) with Safari (only), and found that VoiceOver announces an image by its filename when the image lacks an `alt` attribute.
alt=”” does nothing at all on other elements that have role=”img”? That’s something new I learned.
So, if you want a decorative it’s better to use aria-hidden=”true”?
Right, use
alt
on elements that support it, otherwise usearia-hidden=true
.Always worth a note: decorative images are presentational elements. CSS is for presentation, HTML for content. Whenever possible stick to a clean separation of concerns. Expecially for imags in a theme, used by the layout and so on
[…] ALT TAG EMPTINESS […]
[…] ALT TAG EMPTINESS […]