[css-color] Accessibility of Figures in §4.4 and §5

[matatk]

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

§4.4 Figure 5

• The <img> needs alt text such as "A color swatch, in a grid layout".
• The second part is marked up as a <table> but doesn't seem to be one semantically (it's just placing the text to match the layout of the color swatch above). Suggest applying role="presentation" to the table, to remove the tabular structure semantics (or you could re-code it using <div>s and <span>s). That would have the effect of linearizing the table from a screen reader perspective, but that would likely be less confusing than encountering a "table" without headers.

§5 Figure 6 [doesn't have an id]

• The <img> needs an alt attribute that explains this is a color swatch in a grid formation (as per figure 5) but that circles are imposed on each grid square. The <figcaption> does a great job of explaining the rest.
• As with figure 5, this table should have the table semantics removed (or be re-coded using <div>s and <span>s).

[svgeesus]

Thanks for these helpful comments.

I wonder whether adding row and column numbers/letters (to both the image, and also as headers to the table) would help? So someone could talk about row C, column 4 for example?

A linear list of 24 numbers, as a screen reader presentation, doesn't seem all that helpful.

[svgeesus]

(Sigh, I keep labelling commits with the wrong issue number, there are two very similar. sorry!)

[matatk]

Yes, I agree; the headers you've added are helpful. Part of accessibility is helping to give people an equivalent frame of reference, so they can collaborate—so this sort of coordination (literally) is spot-on.

In theory you shouldn't need the scope attribute on the table header cells, and I just tested in the latest Firefox and Chrome, with NVDA and JAWS, and there was no problem with them interpreting which were column and row headers, so the markup you have is fine.

[svgeesus]

Given that, I will apply the same fix to the other figure.

[svgeesus]

@matatk is this issue now resolved to your satisfaction in the Editor's Draft?

[matatk]

@svgeesus your changes are great; thanks. I haven't closed this issue with this comment though, because when I visit figure 5 in the Editor's Draft the changes to the images don't show up for me (have tried hard-refreshing).

[svgeesus]

That sounds like a local cache issue to me. Could I suggest directly viewing

https://drafts.csswg.org/css-color-5/images/macbeth-roundtrip.svg

and then doing a hard refresh on that?