IssueTracker

Alt for first image: a list that reads...

Browser Support

• 127
• 127
• 3
• 16.4

Alt for second image: The "Browser Support" on a web.dev article, with Chrome Developer Tools showing the icon is just a CSS background svg and there's no alternative text / hidden text anywhere.

I have http://cl/655910755 open that hopefully fixes this.

The CL was submitted. See the attached screenshot for details.

I appreciate the speed with which this was addressed and deployed. I understand the fix is live so I checked the page referenced: https://web.dev/examples/browser-compat

Some notes:

1. Because it uses aria-label, there is a set of users who will not get it when the rest of the page is auto-translated. Ref: https://adrianroselli.com/2019/11/aria-label-does-not-translate.html

2. The value of the aria-label is not exposed in the following combinations whether navigating by virtual cursor, read-all, list item, or explore-by-touch (I did not text macOS, iOS, iPadOS):

   • JAWS/Chrome
   • NVDA/Firefox
   • NVDA/TalkBack

3. When navigating by list (L), JAWS/Chrome & NVDA/Firefox both treats lists 1 & 3 (the lists that have non-numeric entries) as three-item lists. I don't know why and I am not wading into it any more deeply.

I encourage you to test this solution across screen reader / browser combinations and also to account for users who rely on machine translation.

Alternatively, replace the CSS generated content background image and the ARIA with a standard <img> element and appropriate alt text naming the browser. For the non-numeric contexts ("no support", "behind flags", "TP" also represented by CSS), do the same.

So:

<ul>
 <li>
  <img src="..." alt="Edge">
  <img src="..." alt="Not supported">
 </li>
 <li>
  <img src="..." alt="Firefox">
  <img src="..." alt="behind a flag">
 </li>
 <li>
  <img src="..." alt="Safari">
  <img src="..." alt="Technology Preview">
 </li>
</ul>

Oops, forgot to add #4...

4. The solution as it stands now still does not account for users where the CSS has been lost for whatever reason. The code I offer addresses them by putting the image into the page.

Will try to rework the widget so it uses standard alt with images. This may take a bit.

Since I have you, could you please suggest alt texts for all cases at https://web.dev/examples/browser-compat? There was a comment about my ARIA labels being too verbose. Thank you!

If there's no support, the li is empty:

<li
    data-browser="safari"
    data-support="preview"
    aria-label="Supported in Safari Technology Preview."
></li>

This needs fixing at the source of the widget.

Since I have you, could you please suggest alt texts for all cases at https://web.dev/examples/browser-compat?

My comment with the fake HTML was an attempt at that.

I made an HTML list for each of the four examples and added one example after each for how a screen reader might announce it. Some announce "image", some "graphic", some before, some after.

First list:

<ul>
 <li>
  <img src="..." alt="Chrome"> 74
 </li>
 <li>
  <img src="..." alt="Edge"> 79
 </li>
 <li>
  <img src="..." alt="Firefox">
  <img src="..." alt="Not supported">
 </li>
 <li>
  <img src="..." alt="Safari">
  <img src="..." alt="Technology Preview">
 </li>
</ul>

A user might hear: "Image Safari image Technology Preview"

Second list:

<ul>
 <li>
  <img src="..." alt="Chrome"> 75
 </li>
 <li>
  <img src="..." alt="Edge"> 79
 </li>
 <li>
  <img src="..." alt="Firefox"> 63
 </li>
 <li>
  <img src="..." alt="Safari"> 13.1
 </li>
</ul>

A user might hear: "Graphic Firefox 63"

Third list:

<ul>
 <li>
  <img src="..." alt="Chrome">
  <img src="..." alt="Not supported">
 </li>
 <li>
  <img src="..." alt="Edge">
  <img src="..." alt="Not supported">
 </li>
 <li>
  <img src="..." alt="Firefox">
  <img src="..." alt="behind a flag">
 </li>
 <li>
  <img src="..." alt="Safari">
  <img src="..." alt="Not supported">
 </li>
</ul>

A user might hear: "Image Chrome image Not supported"

Fourth list:

<ul>
 <li>
  <img src="..." alt="Chrome"> 79
 </li>
 <li>
  <img src="..." alt="Edge"> 79
 </li>
 <li>
  <img src="..." alt="Firefox"> 75
 </li>
 <li>
  <img src="..." alt="Safari"> 11.1
 </li>
</ul>

A user might hear: "Edge image 79"

Be sure there is white space between the images when there are two images in a list item. This will help ensure the alt text is not concatenated and announced with the browser name and part of the following alt as a single word.

I have opened https://critique.corp.google.com/cl/657133110 in another attempt to fix this. It's inspired by Adrian's HTML structure, but due to some constraints, I had to modify the markup a bit. See the attached screenshots for the HTML and the accessibility tree the browser generates based on it.

This fix is now live. Check out all possible combinations in https://web.dev/examples/browser-compat.