SIA-R69: Consider making non-text content not applicable

[zsofitoth]

Decorative text like | , &, etc. should not be flagged as an issue.

[Jym77]

We can take inspiration from why we do with R14 to filter them out.

[dan-tripp-siteimprove]

I saw this case today:
<span class="txt-wordsp">S<span class="inline-colbullet">•</span>P<span class="inline-colbullet">•</span>I<span class="inline-colbullet">•</span>R<span class="inline-colbullet">•</span>I<span class="inline-colbullet">•</span>T.</span>
This rendered as "S•P•I•R•I•T."
The "•" characters failed the contrast minimum rule and the letters S P I R I T passed.

[dan-tripp-siteimprove]

This is a common case: using the "/" character as a separator for bread crumbs.

[dan-tripp-siteimprove]

Here's another case: a dash character ("-" or "—" and others maybe). I saw this used in a table cell to mean "no" or "not supported". Also, in the same table, I saw "✓" to mean "yes" or "supported".

[Jym77]

Here's another case: a dash character ("-" or "—" and others maybe). I saw this used in a table cell to mean "no" or "not supported". Also, in the same table, I saw "✓" to mean "yes" or "supported".

I would say those do need good contrast 🤔
If users need to be able to differentiate between "-" and "✓" in order to understand the table, these do need good contrast. OTOH, it might more be a 1.4.1 Failure in that case, since it is not text per se.

[dan-tripp-siteimprove]

I agree. And I see that I was confused. I thought that these contrast rules already have a "textual content only" clause in the applicability, like R14 does. But they do not. So it seems to me that this issue is really proposing to change the applicability - not to clarify it or tweak it, it proposes to radically change it. I don't know whether or not that's a good idea or not. Regardless: I think that if we do change this rule to exclude non-text content, then "-" and "✓" should probably be considered non-text content and therefore excluded.

[dan-tripp-siteimprove]

I think that there are two concepts at work here: 1) non-text, and 2) decorative. The title of this issue mentions "non-text" and the opening comment mentions "decorative". This implies that "non-text" is the same as "decorative". But that's not true. We can consider all the combinations:

a) non-text == false and decorative == false.

• This is the common case. No problems here.

b) non-text == false and decorative == true.

• A strange case, but it happens. For example: "cover page of a dictionary has random words in very light text in the background" (https://www.w3.org/TR/WCAG21/#example-20 )

c) non-text == true and decorative == false.

• This is the "-" and "✓" case, where it's necessary to perceive those characters in order to understand the table.
• "/" character as a separator for bread crumbs: might fit into this category. Sometimes "/" is decoration. Other times it isn't, because perceiving the "/" is necessary in order to understand the breadcrumbs. Consider these breadcrumbs:
  ARIA Patterns / Feed
  There are two parts: 1) "ARIA Patterns", which links to a list of all ARIA Patterns, and 2) "Feed", which links to the ARIA pattern called "Feed".) Now consider if, due to poor contrast, a user perceived those breadcrumbs like this:
  ARIA Patterns Feed
  They might think: "There is one link here, and it's called 'ARIA Patterns Feed'. That must be a feed for ARIA patterns. So I can subscribe and get notified when there is a new ARIA pattern". That user was misled, and it was the lack of contrast that misled them.

d) non-text == true and decorative == true.

• This is the "S•P•I•R•I•T." case. Each "•" is both non-text and decorative.

Complicating our lives further: the corresponding ACT rule mentions "decorative" and "human language" in the expectation, and this alfa rule doesn't.

I don't know what the answer is, but I think that to frame the question properly we need to frame it in terms of both "non-text" and "decorative".

[dan-tripp-siteimprove]

Another example of "non-text == true and decorative == false":
The "★★★" in this:
Average customer rating: <span style="color: rgb(255, 230, 100)">★★★</span> (out of 5 stars)

[dan-tripp-siteimprove]

I saw "•" used as a breadcrumb separator today. I put this in the category of "non-text == true and decorative ==(probably, usually)== false".

[dan-tripp-siteimprove]

I saw a case like this today:

<button>
	<span>Add to Cart</span>
	<span style="color: #ddd">•</span>
	<span>$10.00</span>
</button>

I put this in the "non-text == true and decorative == true" category.

[Jym77]

We can take inspiration from why we do with R14 to filter them out.

Let's do that as a first step and ignore text nodes that only contain punctuation and symbols.

[dan-tripp-siteimprove]

I saw a case like this today:

<a href="#' aria-label="previous page" style="color: #ddd">«</a>

I put this in the category of "non-text == true and decorative == false".

[dan-tripp-siteimprove]

I came across this case today:

<button style="font-size: 1em" title="switch to normal text" aria-label="switch to normal text">
A
</button>
<button style="font-size: 1.5em" title="switch to bigger text" aria-label="switch to bigger text">
A
</button>
<button style="font-size: 2em" title="switch to biggest text" aria-label="switch to biggest text">
A
</button>

It's not immediately clear to me how this should be categorized. It's definitely decorative == false. But is it text or non-text? The customer in question reported a false positive report for it, but they didn't make an explicitly "non-text" argument.

Here is my argument for considering this "text": It's strange text, because the text alone - each "A" - doesn't convey much meaning on its own. The meaning is conveyed by each "A" in relation to the other two "A"s, and that relative meaning - which is most of the meaning - is not contained in the text. But there's still text there - the "A" - because the letter "A" meets WCAG definition of human language . Even if - again - that letter "A" isn't the important thing that the page is trying to communicate to the user.

[dan-tripp-siteimprove]

I came across this case today (the "/" character):

<p> 
	<span style="color: black">Japan</span> 
	<span style="color: rgb(159, 159, 159)">/</span> 
	<span style="color: black">日本語</span> 
</p> 

I put this "/" character in the category of "non-text == true and decorative == false".

[Jym77]

I came across this case today:

<button style="font-size: 1em" title="switch to normal text" aria-label="switch to normal text">
A
</button>
<button style="font-size: 1.5em" title="switch to bigger text" aria-label="switch to bigger text">
A
</button>
<button style="font-size: 2em" title="switch to biggest text" aria-label="switch to biggest text">
A
</button>

It's not immediately clear to me how this should be categorized. It's definitely decorative == false. But is it text or non-text? The customer in question reported a false positive report for it, but they didn't make an explicitly "non-text" argument.

Here is my argument for considering this "text": It's strange text, because the text alone - each "A" - doesn't convey much meaning on its own. The meaning is conveyed by each "A" in relation to the other two "A"s, and that relative meaning - which is most of the meaning - is not contained in the text. But there's still text there - the "A" - because the letter "A" meets WCAG definition of human language . Even if - again - that letter "A" isn't the important thing that the page is trying to communicate to the user.

I think this is one of the examples of non-text, but I can't find if it's in an Understanding document or somewhere else 🙈
OTOH, that would need to pass 1.4.1, I think.

[dan-tripp-siteimprove]

I think this is one of the examples of non-text, but I can't find if it's in an Understanding document or somewhere else 🙈

Was it this non-text "i" example?

OTOH, that would need to pass 1.4.1, I think.

1.4.1 Use of Color? I don't see the connection. Please explain, if convenient. The "three letter As" example that I mentioned earlier had the same colors (background and foreground) for all three As, and the foreground color was low contrast compared to the background color. Here is a more accurate version of that example, where I've replaced the buttons with links, and added colors:

<span style="color: #aaa; background-color: #fff" >
<a style="font-size: 1em" title="switch to normal font size" aria-label="Switch to normal font size">
A
</a>

<a  style="font-size: 1.5em" title="switch to bigger font size" aria-label="Switch to bigger font size">
A
</a>

<a  style="font-size: 2em" title="switch to biggest font size" aria-label="Switch to biggest font size">
A
</a>
</span>

[dan-tripp-siteimprove]

Today I saw a case like this:

<span>Last Updated:</span>
<span>Apr 15, 2020</span> 
<span style="color: #aaa">|</span>
<span>Views:</span> 
<span>55</span>

[Jym77]

I think this is one of the examples of non-text, but I can't find if it's in an Understanding document or somewhere else 🙈

Was it this non-text "i" example?

No, I remember specifically something about letters of different sizes to indicate "change font size" buttons.

OTOH, that would need to pass 1.4.1, I think.

1.4.1 Use of Color? I don't see the connection.

My bad, I meant 1.4.11.

[dan-tripp-siteimprove]

Today I saw a case like this:

<p>The Top Technology <span style="color: #ddd">&</span> Innovation Companies in 2023</p>

I put this "&" character in the category "non-text == false and decorative == false".

Currently it fails the rule, which is good. If this issue gets implemented then it will probably have to pass the rule, which will be unfortunate but arguably worth it. It will be a case of introducing a false negative in order to get rid of some false positives.