[css-color] Accessibility of examples in §2.2 and §3.6

[matatk]

This comment is from the APA WG and relates to our review of CSS Color Module Level 5.

Example 2

• This example has a figure with a descriptive caption. The <img> element lacks an alt attribute. The alt text should mention that the image shows three colours (the two inputs, and the mixed output) on a plane with two axes. The axes are labelled "a" and "b" and cross at the origin, which is in the centre of the plot. We are looking down the L axis onto an ab plane.
• An <img> that has alt text in Example 22 (in §3.6) refers to this plane as the CH plane. This seems to be conventional, but it may be helpful for people who are not familiar with color spaces to mention it in the document's text.
• For someone who struggles to see the color, or low-contrast colors, it would be helpful to label the colors on the chart ("peru", "palegoldenrod" and "mixed" for the mixed color, in this case). (You could perhaps do this with numbers, to save space, and keep the layout simple, in the diagram, as long as they match up to numbers, color previews, and coordinates in the text below.)

Example 3

The above three issues apply here too.

Example 22

In the spirit of the issue reported above, we don't feel this needs extensive alt text (though describing the axes and general situation would be helpful). However, it would be particularly helpful to ensure that the different colors can be identified on the plot, e.g. via labelling.

[svgeesus]

By the way its a shame that putting a description in the SVG <desc> element is wasted effort from an accessibility point of view, it seems screen readers ignore it and also ignore that the text in SVG is actual text: they just say "image".

Here is the <desc> for the SVG in figure 5:

<desc>Show the L=50 plane of the CIE Lab color space.
      Two colors to be mixed are visualized on this plane,
      with an arc to show where the intermediate colors lie.
      peru lch(62.253% 54.011 63.677) rgb(80.39% 52.16% 24.71%) lab(62.253, 23.95015324432121, 48.41051828449609)
      lightgoldenrod lch(91.374% 31.415 98.821) rgb(93.33% 90.98% 66.67%) lab(91.374, -4.8174283819125385, 31.043431008590908)
      40% mix is lch(79.7256% 40.4534 84.7634) rgb(87.41% 76.03% 47.64%) lab(79.7256, 3.69213016556943, 40.28455965255785)

</desc>

[svgeesus]

• 98a1d5b
• 914dbfb
• 46aa862

[svgeesus]

However, it would be particularly helpful to ensure that the different colors can be identified on the plot, e.g. via labelling.

There are three colors: the origin color, the hue-rotated color, and the gamut mapped version of the hue rotated color.

On the diagram, these are labelled:

1. origin color
2. rotated out of gamut color
3. gamut mapped

In the figure caption, these are all identified:

<figcaption>
This diagram shows the sRGB gamut, in the CIE ab plane.
Small circles indicate the primary and secondary color.
The <span class="swatch" style="--color: rgb(86.1% 33.4% 97.6%)"></span>
origin color, shown as a large circle, is in gamut for sRGB;
but becomes <span class="swatch oog" style="--color: #AAA"></span> out of gamut (shown as a grey fill and red border)
when the LCH hue is rotated -120°.
The gamut-mapped <span class="swatch" style="--color: rgb(0% 64.2% 66.3%)"></span> result has much lower chroma.
</figcaption>

Help me understand what labeling is missing, please.

[matatk]

I checked the Editor's Draft and see the updated SVGs in which you've labelled the colours on the plots with their names; this is great! Example 2 (Editor's Draft) is very clear.

I also see that these are SVGs now (as opposed to <img> elements in the version we reviewed), and can be explored with a screen reader. I was not able to find the description yet, as you mentioned, but I think I may be missing something; I'll check on this and get back to you. One way to surface the contents of the <desc> may be to point to it using aria-describedby on the <svg>, but I'll do a bit of asking around/research, as I want to suggest the simplest possible changes for you.

[svgeesus]

They were SVG before, but indeed pointed to by an <img>. I changed it to <object> to allow the use of external web fonts.

Please do let me know about the aria-describedby.

[svgeesus]

From Using ARIA to enhance SVG accessibility by Léonie Watson:

Testing across recent browsers indicates that the title and desc elements, and the role of the SVG element, are not represented consistently in browser accessibility APIs.

It seems things have not improved much since that 2013 article :(

[svgeesus]

@matatk any update on aria-describedby which is needed to close off this issue?

[matatk]

Unfortunately the Editor's Draft is still down, so I can't check with the latest changes you made. I did find that if you have an <svg> with a <title> as first child, then that title gets exposed as its accessible name (with the latest Firefox and Chrome). I also found that keeping the role="img" is needed for that association to work in some browser + screen reader combos.

I also found that both <desc> and any explicit aria-describedby on an <svg> are ignored, so it seems there is no concept of an accessible description for images.

The only way to tell how much of this transfers to the use of <object> is to test it, though, which doesn't seem to be possible at the moment.

Update: It's odd that I couldn't get the description stuff to work; it seems some things may even be less well supported now than when Léonie did all that testing back in 2013. I found this proposed ACT page about accessible names for SVGs.

[svgeesus]

Closing as the one remaining sub-issue, aria-describedby is unsupported so adding it will not help.