Are whitespace visible?

[Jym77]

Is (text) content composed only of whitespace visible?

As per the current definition of visible, content which is composed only of whitespace is not visible (because it can be made transparent without changing the rendered content). (this assumes that we are not using a font where whitespace have rendered content, of course). This is pointed out in this PR.

(same goes for newline and many other control characters, but let's focus on whitespace)

So far, so good.

Are whitespace visible?

According to the definition, no. They can be made fully transparent without altering the rendered content. Note that the interior of the letter "O" can be made fully transparent without altering the rendered content, but it does not, by itself, convey information so it does not qualifies as content and we only consider content for visibility.

While whitespace can be non-visible but part of visible text, they do convey important information, of course.

Why do we care?

Take a rule like Visible label is part of accessible name. It checks something about the visible text content which is text elements that are visible.

Now, the first nitpicky point is that in

<div role="link" aria-label="next page">next page</div>

it is not clear that the space in the middle is part of the visible text content because it is not visible. The rule need to consider it otherwise the visible text content ("nextpage") would not be included in the accessible name ("next page").

On a less nitpicky level, we can push the example as

<div role="link" aria-label="next page">
  <span id="next">next</span>
  <span id="space"> </span>
  <span id="bases" style="position: absolute; top: -9999px">All your bases are belong to us!</span>
  <span id="page">page</span>
</div>

I think that this should pass the rule. I think that in this case what we want to call the "visible text content" is "next page" and everything is good.

But… it makes it a bit hard to properly define the "visible text content" and how it is computed.

• If we first gather all the text content ("next All your bases are belong to us!page") and then remove the non-visible content, then the space should also be removed as not visible and the rule should fail since the visual text content would be only "nextpage", not included in the accessible name.
• If we first remove the non-visible nodes and then gather the text content, then space is not a visible not and is removed, the visible text content is again "nextpage".

What to do?

Do we want whitespace to be considered visible? That seems like a reasonable thing to do. If so, we need to change the definition of visible. This may ripples a bit, but I do not think that any rule was relying on whitespace being invisible, except for the work on #444.

We may also want to improve the definition of "visible text content" to explain a bit more how it is gathered (probably by first removing invisible stuff and then gathering the rest).

[Jym77]

@WilcoFiers here are "tutorials" and generators for rainbow text that put each individual character (including spaces) into a separate span (or font, some of these are obviously pretty old), so "real life examples" that are hit by this issue do exist (rainbow text is probably bad for a lot of reasons, of course).

https://rainbowcoding.com/2011/12/02/how-to-create-rainbow-text-in-html-css-javascript/
https://www.pagetutor.com/html_tutor/roller_rainbow.html
http://rainbow.arch.scriptmania.com/tools/rainbow_text/
https://www.stuffbydavid.com/textcolorizer

[kasperisager]

This really needs to be dealt with and might involve settling on a definition of "run of text", which we need for other purposes as well.

[Jym77]

Another "fun" consequence of the current definition of "visible": https://css-tricks.com/snippets/css/gradient-text/

<style>
.invisible {
  background: red;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
<div class="invisible">Foo</div>

the div is visible, but its text content is not (it's already fully transparent)…

[Jym77]

Another fun one:

<p style="background: #white; text-shadow: black 0 0 0px">
  <span style="color: rgba(0,0,0,0); ">Some text in a human language</span>
</p>

The span is invisible (it is already transparent…) The p is visible. It's easy to argue that the text is visible (it's a bit blurry but definitely readable), even though with our definition only its shadow is visible (and thus there is no visible text content).