[csswg-drafts] [css-color] Accessibility of Figures and Examples in §4.4 and §5 (#7691)

matatk has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color] Accessibility of Figures and Examples in §4.4 and §5 ==
*This comment is from the APA WG and relates to [our review of CSS Color Module Level 5](https://github.com/w3c/a11y-request/issues/29#issuecomment-1236389445).*

**[§4.4 Figure 5](https://www.w3.org/TR/2022/WD-css-color-5-20220628/#fogra51-roundtrip)**

* 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.

**[§4.4 Example 33](https://www.w3.org/TR/2022/WD-css-color-5-20220628/#ex-fogra39-fallback-mq)**

Color previews are missing.

**[§5](https://www.w3.org/TR/2022/WD-css-color-5-20220628/#device-cmyk) 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).

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7691 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 4 September 2022 18:30:28 UTC