Method: "Decorative Images" Section of the WCAG 3 vs WCAG 2.x "Pure Decoration"

[lauracarlson]

In WCAG 2.x pure decoration is "serving only an aesthetic purpose, providing no information, and having no functionality". I don't know why we would change it in WCAG 3.

What research is this change based upon?

If the purpose of an image is purely aesthetic or if it is redundant and does not relate to the content of the document, then use a null attribute alt="". If an image has a purpose then the user should be aware that it is there and what its intended purpose is.

A null alt attribute will be completely ignored by assistive technologies and will also prevent a person who is blind from knowing about and sharing the image. The author would be deciding that informing a user that the image on the page isn't important or worthwhile for them to know about, and so by using alt="" that fact is completely hidden from them.

To me, ultimately, it is about treating people with visual disabilities as users who access content differently, but equally. I want to treat them fairly and on an even footing: "deciding" that they likely don't want to know that an image is on the page is a serious decision to be taken - would you for example not include the image, and instead simply provide a link that read "click here to see a picture of a "Someone smiling and eating a salad"? I think not. Please reconsider this example.

Let's try to do our best to treat people with visual disabilities with that same kind of respect - afford them a textual glance of the image that all sighted users will make when the page first loads (and avoid going into too much detail, because few sighted users are going to study the image thoroughly).

So seriously let's consider if an image is purely decorative. If it isn't, authors should try to concisely explain what the image is in the context of the document's purpose without overly duplicating the text in which the image is embedded.

As Eric Bailey, wrote

"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." - @ericwbailey

Thank you, Laura

[bruce-usab]

Thank for pointing to that article! I would note that @ericwbailey is active in our mutual GitHub space, so he might comment directly.

The article has appropriate caveats around the point that, sometimes, alt="" is the well-considered most-accessible choice.

Your Image Is Probably Not Decorative

The reasons for wanting to do this [null alt] are mostly historical.

The other data point I will mention — and what @lauracarlson writes does captures this — is that descriptive identification is very often better and preferred over alt text which is long and with details tangential to the meaning.

[ericwbailey]

Hi @lauracarlson, @bruce-usab. Thank you for mentioning me, and for inviting me to comment.

The main thing I'd hope would be communicated is the act of an abled content author making the determination of what constitutes decorative or not removes agency from the person utilizing assistive technology.

For example, I have encountered a situation where photos of amenities for luxury housing were considered decorative, even though they help communicate the benefits of living at the community.

I would temper that statement with testing with your intended audience to determine their explicit preferences!

[fstrr]

At some point in the not-too-distant past (I noticed it in 2021), the HTML spec introduced the concept of ancillary images:

"Sometimes, an image is not critical to the content, but is nonetheless neither purely decorative nor entirely redundant with the text. In these cases, the alt attribute must be present, and its value should either be the empty string, or a textual representation of the information that the image conveys. If the image has a caption giving the image's title, then the alt attribute's value must not be empty (as that would be quite confusing for non-visual readers)."

I've mentioned this in some of the WCAG 3 work I've been involved in as I think adopting this would be beneficial.

[MakotoUeki]

@lauracarlson Thank you so much for your comment. I'm the Alt Text Sub group lead and the sub group is working on the draft document you provided a link.

In WCAG 2.x pure decoration is "serving only an aesthetic purpose, providing no information, and having no functionality". I don't know why we would change it in WCAG 3.

Could you please tell me which part of the document "Method: Decorative Images" you are commenting on?

What we did so far was just to copy existing W3C/WAI's materials and paste them into the WCAG 3's document template to show how existing SC 1.1.1 will be migrated to the WCAG 3. So we haven't changed anything yet.

The existing materials we've reviewed includes:

• WCAG 2.0/2.1
• Understanding WCAG 2.0/2.1
• Techniques and failures for WCAG 2.0/2.1
• Web Accessibility Tutorials - Guidance on how to create websites that meet WCAG
• Easy Checks
• HTML standard
  • It looks HTML 5 spec is not available on w3.org any more.

Thank you in advance for your time!

[bruce-usab]

I agree that the 2.x definition for pure decoration sets I high bar. I read @lauracarlson and @ericwbailey to say WCAG3 should retain that high bar (and I agree).

@MakotoUeki — I read @lauracarlson concern to be that Decorative Images is broader than Pure Decoration and that we should be careful not to conflate those two. Is there a better title for the WCAG3 method? What if this particular method were labeled as Meaningless Images?

It looks HTML 5 spec is not available on w3.org any more.

That is correct. It is an interesting story, but not one that I was following closely enough!

[MakotoUeki]

@bruce-usab Thank you for your comment.

I'd like to hear from Laura at first. But if that is the point, we will need to think about the proposal to change the name of the type "Decorative". It came from one of the 7 types introduced in the "Web Accessibility Tutorials - Guidance on how to create websites that meet WCAG". We didn't change anything.

7 types of images are:

• Informative Images
• Decorative Images
• Functional Images
• Images of Text
• Complex Images
• Groups of Images
• Image Maps

[lauracarlson]

Hi @bruce-usab, @ericwbailey, @MakotoUeki, and all,

Bruce, Yes. I am concerned that "Decorative Images" is broader than "Pure Decoration" and that we should be careful not to conflate those two. If it is changed to "Decorative" or "Ancillary", that should be based on research. Do we have any data? Differences exist between purely decorative images (that need no text alternative) and "decorative" ones.

I agree with Eric that:

"The act of an abled content author making the determination of what constitutes decorative or not removes agency from the person utilizing assistive technology."

Makoto, the specific part of the Method that contributes to this is: "Illustrative of adjacent text but not contributing information (eye-candy)" and the example.

Null alt text is a hangover from spacer gif era. Decorative (eye-candy) and alt="" is too often used as an excuse for lazy authors not providing a text alternative.

[MakotoUeki]

@lauracarlson Thanks for clarification. That part came from the 3rd paragraph of "Decorative Images". https://www.w3.org/WAI/tutorials/images/decorative/

We did copy the part and paste it to the Method document. We didn't change anything. If this part is the issue, we should discuss it with the authors of this tutorial document. We can send our comments following the instructions at the bottom of the page.

And I do understand your concern that "alt="" is too often used as an excuse for lazy authors not providing a text alternative." I agree with that point.

Plus, one of the things I (and Alt Text Subgroup) would like to suggest in the near future is that providing text alternatives for decorative images can be benefit, in some cases, for users who are blind or who have visual impairments, especially for those who have lost their sight some years after birth. It would allow them to picture the image in their minds. It should be a user who can decide if it is meaningless or not.

[jake-abma]

@lauracarlson wrote:

I am concerned that "Decorative Images" is broader than "Pure Decoration" and that we should be careful not to conflate those two. If it is changed to "Decorative" or "Ancillary", that should be based on research. Do we have any data?

Data is not always available or righteous and it will be up to the user, so will probably end up very subjective depending on what each user want.

As an example:

I've created an example page for Reflow some time ago:

https://www.w3.org/WAI/WCAG21/working-examples/css-fitting-images/

The images have an empty alt <img class="img-responsive" src="surf02.jpg" alt="">

When we did a sanity check before publishing Jon @mraccess77 mentioned that he would like to see the alt text present for the need of understanding those images.

Bottom line, some people want alternative text, others might want to skip the images. A judgement call may not be the best thing to do here.

[bruce-usab]

If this part is the issue, we should discuss it with the authors of this tutorial document.

Fair enough, I suggested an edit. I am okay with the four examples from that page as-is.

Differences exist between purely decorative images (that need no text alternative) and "decorative" ones.

I would note that need no text alternative is distinct from (what should be) the highly intentional act of providing a null alt attribute. Missing alt attributes, in my experience, is a bigger problem than over use of null alt. That might be a bias on my part, and it well could be that over use of null alt is nowadays the issue that needs attention. I do agree null alt is overused.

It is probably a sampling bias, but I encounter more low-information alt attributes which seem to be attempts at textual equivalence, when descriptive identification would be more functional. I am hoping that our Silver guidance reflects this perspective as well.

My understanding is that, for the Silver method, the goal was distinguish between 2.x pure decoration and aesthetic/decorative images. I suggest we add more examples to the Silver method rather than change the current ones.

[MakotoUeki]

@jake-abma

Bottom line, some people want alternative text, others might want to skip the images. A judgement call may not be the best thing to do here.

I agree with you on this point. Users are different and users' preferences are different. On the other hand, it depends on the author's intent to determine if it is "pure decoration" or not. The example you shared is the case. I'd say it is okay to provide text alternatives to "decorative images" and "pure decoration". But we must address the issues of "Missing alt attributes" and "over use of null alt" as Bruce mentioned.

@bruce-usab

Fair enough, I suggested an edit. I am okay with the four examples from that page as-is.

Thank you so much for your suggestion!

@lauracarlson Should we send comments to authors of the Tutorial (EOWG)? It looks it'll take long time for WCAG 3 will become the W3C recommendation. People will refer to the Tutorial to provide more appropriate alt text for images until then. If there is the issue in the "Decorative Images" document of the Tutorial, it is the issue of the Tutorial. we should contact EOWG and modify it at first. And then we can copy and paste it to the Method document for "Decorative Images".

[lauracarlson]

Hi @bruce-usab, @MakotoUeki, and all,

Bruce, that's a good start. Thank you. I suggest 3 more edits per the WCAG 2 definition.

1. Change the text "or the image might be included to make the website more visually attractive" to "or the image is purely aesthetic and provides no information"
2. Remove example number 3 as it does provide information. Alternatively, that example could be moved to the informative section and use something such as alt="lush green foliage".
3. Change "Decorative" to "Purely Decorative" wherever it appears (and bring into line with the definition whenever it wavers).

Makoto, I strongly agree with you when you wrote:

…one of the things I (and Alt Text Subgroup) would like to suggest in the near future is that providing text alternatives for decorative images can be benefit, in some cases, for users who are blind or who have visual impairments, especially for those who have lost their sight some years after birth. It would allow them to picture the image in their minds. It should be a user who can decide if it is meaningless or not.

Adding that to WCAG 2 and WCAG 3 would be great. Thanks.

Another area to consider is adding information on text alternatives for emotionally rich images. Check:

• Text descriptions and emotion rich images
• Writing great alt text: Emotion matters

[Myndex]

Just some comments that are hopefully not too tangential.

From a design point of view, what does "pure decoration" actually mean? That term as stated seems to imply that decorative embellishments have no meaning, but at least in a classical design sense you never put something into a design without a purpose or without a reason, even if that reason is hard to articulate lexically.

The purpose of adding a flourish is among other things, to convey a mood or a tone or an emotion.

But — from a practical standpoint, how should these be described?

• The alt for #1 is "flourish"

• The alt for #2 is "a curvilinear flourish design element that implies an essence of floral leafs"

And let's say there are many on the page (such as a page for a wedding reception) — the question I'm posing is not if flourishes should be labeled, but to what degree? As I try to use voiceover on MacOS more often for body text, I find it challenging to deal with all the extraneous elements on the page when I really just want to hear the main content text.

And then there is the issue of things like the use of dingbat fonts or flourish fonts — something that voiceover seems to stumble on, not sure about other screen readers.

And here's another example:

At first glance one might say that's a decorative background... except that paisleys came from the development of the Jacquard Loom which used what were essentially a series of punch cards to control the loom to create these intricate patterns. As such, it would actually be best for an alt text to say something like "an image of a paisley patterns made possible by early automated loops, using a forerunner to punchcards."

But This example is here for another point: as shown, in an actual page it would probably be as a background image, and at present those don't accept alt text, though that seems like a property that needs to be added. The use of background images as an image container is useful for responsive design in a way the regular img tag is not.

[bruce-usab]

I love those flourish examples @Myndex and I agree with @ericwbailey that "displaying an image is a highly intentional act". We should expect just as much intentionality for every use of alt="". With regard to your two flourish examples, please ask a few people who use screen reading software as their default UI as to what they would recommend as the value for the alt attribute or Accessible Name with those two examples.

From a design point of view, what does "pure decoration" actually mean?

It is the label (e.g., title or shorthand name) given to a specific concept and term of art from WCAG. Nothing less, nothing more. Please do not overthink it, even if you are a designer! Please reference the glossary definition.

...it would actually be best for an alt text to say something like "an image of a paisley patterns made possible by early automated loops, using a forerunner to punchcards."

That sort of detail belongs in plain text in the footer, or maybe on an "about" page. It is compelling trivia that needs to be available to everyone, not hidden in an alt attribute, and which is not repeatedly forced on only those visitors who happen to be using screen reading software. The text equivalent is the graphical text (and probably, in actual practice, just the text). The actual alt attribute value you provided (in your comment above) is better than what you suggest "would actually be best": A Brief History of Computer Punch Cards on a paisley background

[mraccess77]

Id' add that flourishes are often used as separators and so whether it needs an alternative may depends on whether there is some other semantic separator present.

[patrickhlauke]

And I would contend that there are situations where visual flourishes etc. are intended to primarily convey a certain feel/mood, and that in those cases I'd posit that as long as the prose/text of the page has the same sort of tone and style, then that is an acceptable alternative in itself already as well...but here we start getting more into heavily subjective territory.

At the other extreme end, of course one could make the argument that every single non-text piece of information must be conveyed in text - not just saying what a certain image/background/flourish is, but going into great detail about the choice of colours, sizing, etc not just for any images, but the entire CSS of the page itself - because again, surely the designer had a reason for making those decisions? but that would of course be completely untenable/unfeasible. so yes, at some point there must be a pragmatic cut-off point where we (subjectively) make a judgement call on what non-text information must be conveyed to make sure no essential information is lost for non-sighted users.

[Myndex]

Hi @bruce-usab

With regard to your two flourish examples, please ask a few people who use screen reading software as their default UI as to what they would recommend as the value for the alt attribute or Accessible Name with those two examples.

I've been trying to climb the learning curve of Voiceover, the screen reader on MacOS, as I'm having an increasingly difficult time with just basic reading — so far, all I can say is OMG this is frustrating! If I'm still atound by the time I'm done with the APCA project, I think I'm gonna need to start a screen reading project LOL...

From a design point of view, what does "pure decoration" actually mean? It is the label (e.g., title or shorthand name) given to a specific concept and term of art from WCAG. Nothing less, nothing more. Please do not overthink it, even if you are a designer! Please reference the glossary definition.

It was a rhetorical question really... 😎

.."an image of a paisley patterns made possible by early automated looms, using a forerunner to punchcards."

_That sort of detail belongs in plain text in the footer, or maybe on an "about" page. It is compelling trivia that needs to be available to everyone, not hidden in an alt attribute, and which is not repeatedly forced on only those visitors who happen to be using screen reading software._

This was also sort of my point — this would probably be (or should be) a caption to the image... Or a pop-up perhaps...

And it brings up a thing I sometimes talk about relating to inclusivity, that sometimes is misunderstood, so I'll try to tread carefully here. Among the thought experiments I have going on, one is the "how can wider adoption be encouraged" relating to the general gestault of accessibility. The answer I keep circling back to is broadening scope. At the moment, scope as I understand it is largely centered on providing descriptions for screen readers, so that those that can't see the image have at least a description. At the moment, AFAIK, the technology isn't there for some thoughts relating to broadened scope BUT:

Cognitive and Understanding

We've been talking about about the purpose and intent of some decorative elements on a page. Sometimes these may be cultural and not immediately understood by all. Or for those that have other visual issues, such as Prosopagnosia they may benefit from a more detailed lexical description. Or other cognitive issues that interfere with understanding context of a given image. Not to mention the usefulness in "reader mode" and in conditions where the image is missing due to bandwidth or device issues...

These are other good reasons to have alternate text — only for the most part, the alt text is not itself accessible outside of screen reader use, though I can be with an extension, but not as a standard user agent feature.

The inclusivity point: if a standard aspect of alt text was readable via a pop up like a tool tip, or other accessibly means, it would find a larger audience. A broadening of scope that would be helpful to a larger group, and such broadening of scope increases the need and the demand. Increased demand means increased adoption.

[bruce-usab]

Just a couple quick replies to OT trivia...

I've been trying to climb the learning curve of Voiceover ... I think I'm gonna need to start a screen reading project LOL...

There is some history on that front, none of it well documented AFAIK. That really would be a Sisyphean task.

The inclusivity point: if a standard aspect of alt text was readable via a pop up like a tool tip, or other accessibly means, it would find a larger audience.

What you describe is the default early behavior from IE. It was nice at first, but then it quickly became a huge liability (and for years and years). This IE misbehavior caused authors to use ALT for tool-tips, which made accessibility much worse as compared to early web content. Eventually, we got the TITLE attribute, which gave some segregation for the text but not enough, and ALT misuse remained as problematic as missing ALT. I think things only really started to improve because phones (i.e., the touch UI) did not provide a good means for exposing tool tips. At that point, use of ALT reverted to its intended function.

[Myndex]

I've been trying to climb the learning curve of Voiceover ... I think I'm gonna need to start a screen reading project LOL... There is some history on that front, none of it well documented AFAIK. That really would be a Sisyphean task.

Sounds brutal, I'm in...

What you describe is the default early behavior from IE. It was nice at first, but then it quickly became a huge liability ...I think things only really started to improve because phones (i.e., the touch UI) did not provide a good means for exposing tool tips. At that point, use of ALT reverted to its intended function.

That is super useful to know...

Tangent: is there a flag for when an image already has a descriptive caption that can instruct the alt text to refer to the caption so there is not duplicated material?

[mraccess77]

@bruce-usab I personally found that alt text tooltip allowed me to learn things about the image that I could not visually distinguish or that I would have missed. Essentially it was like audio description for movies - little important nuances that people with low vision miss visually.

[bruce-usab]

@mraccess77 — no doubt I am overstating the deleterious impact of IE visually exposing ALT. I mean some ALT (inserted by a human author) is almost always better than missing ALT, even if the author was thinking tool-tip rather than descriptive identification. And visually testing pages for ALT was pretty easy and reliable for a couple years. Regardless, I think we are better off nowadays with Accessible Name and Accessible Description, as compared to when ALT being treated as tool-top.

[mraccess77]

@bruce-usab I understand alt was misused for captions - captions and alt text are different as I think we agree. Accessible name and description are good - but still a user agent issue exists as these items are not displayed to users who do not use screen readers. There remains a user agent challenge - although it can be solved by extensions it would be best addressed by the user agent or by better design. For example, the extended description of an image can benefit more than just screen reader users. Today captions are available to everyone - not just people who are deaf.

[bruce-usab]

Suggestion considered and declined for current tutorial per conversation in https://github.com/w3c/wai-tutorials/pull/635 which I am okay with. @lauracarlson can we close this issue?

[lauracarlson]

Hi Bruce @bruce-usab,

Thank you for your efforts. I suggest that we keep the issue open for the full AG Working Group to consider. Although EO decided not to correct the definition in the tutorial, I don't think WCAG 3 should perpetuate the issue with including the incorrect examples.

Kind Regards, Laura