Illegible font sizes reported for invisible text

[luciole75w]

FAQ

• Yes, my issue is not about variability or throttling.
• Yes, my issue is not about a specific accessibility audit (file with axe-core instead).
• Yes, my issue is not answered by other FAQs.

URL

https://luciole75w.github.io/demo/google-lighthouse/legible-font-size-issue.html

What happened?

In mobile mode / best practices category, Lighthouse reports "Document doesn't use legible font sizes" whereas the text in question is set invisible using css "visibility: hidden" (preferred over "display: none" due to transition issues).

The failed audit is reported only with more than ~40% of text considered illegible.

What did you expect?

Audit not failed since the "illegible" text is not exposed to users, neither through screen nor screen readers.

What have you tried?

Hiding the text with "display: none" instead of "visibility: hidden" works, but this css rule prevents transition effects (unless also relying on @starting-style which has limited browser support).

How were you running Lighthouse?

PageSpeed Insights, Chrome DevTools, web.dev

Lighthouse Version

12.2.1

Chrome Version

129

Node Version

No response

OS

No response

Relevant log output

No response

[adamraine]

As I understand it, you are using visibility: none; font-size: 0 to create text that visually looks the same as display: none but will respond to CSS animations. Is that correct?

I think an exception for invisible text makes sense, but I've never seen this use case before.

[luciole75w]

Sorry if my use case is not clear. The two properties have independant purposes actually.

I'm using font-size: 0 to produce a folding/unfolding animation on click. Since this property is inherited, it's a convenient way to animate a whole sub-hierarchy. My demo uses only 2 levels for simplicity but a typical use case would be a deeper navigation menu.

And visibility: hidden lets hide the descendants of folded parents from screens and screen readers like display: none, with more or less the same layout when coupled with font-size: 0, but without breaking the transitions, you're right. Since both these css rules are clean and accessible ways to hide content, the mentionned audit should have a consistent behavior in both cases IMHO.

[luciole75w]

@adamraine "needs-discussion" with? about?

[adamraine]

Discussed briefly. We will adopt this and filter out any nodes which are invisible.

We will need to add visibility to the list of computed styles to look at here.

[luciole75w]

Cool, thanks for your feedback!