At the top of many pages is the text "Browser Bupport" followed by a list of browser versions. However, the browser itself is indicated only via CSS generated content.

Example page: https://web.dev/blog/font-size-adjust?hl=en

Use this XPath to see the specific "browser support" list items:

//*[@class="wd-browser-compat"]//li[@data-browser]

The HTML in use:

<li data-browser="firefox" data-support="yes">3</li>

The CSS (elided):

.wd-browser-compat [data-browser="firefox"]::before {
  background-image: url("data:image/svg+xml[...]");
}

For a screen reader user, some WHCM mode users, and any user that experiences a failure to load CSS, the browser is not conveyed. The name is not part of the code; there is no programmatic way to convey it to users.

The simplest approach, IMO, would be to replace the CSS generated content background image with a standard <img> element and appropriate alt text naming the browser.

First noticed by Stéphane Deschamps because his browser (extension?) blocked the CSS for the page (he includes screen shots): https://piaille.fr/@notabene/112840606247382114

Confirmed by Patrick Lauke (also includes screen shots): https://mastodon.social/@patrick_h_lauke/112840725730496394

And I confirmed it as well.

Issue 355141764

Links (11)

Issue metadata