Categories
HTML Accessibility

ALT TAG EMPTINESS

'Say ALT TAG AGAIN' says Adrian, replete with mouse cursor tattoo below his eye, looking menacingly out of a mug. White Mug, yellow inside and handle.
Adrian is displeased, as he dislikes people referring to a HTML attribute as something it clearly is not

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:

test cases

If you are keen, you can run through the test cases with your favourite browser/screen reader

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

4 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”?

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

Leave a Reply

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