Re: [EXTERNAL] Styling divs with CSS to create graphical objects which convey information

I don't think the solution has any bearing on what SCs it fails. Any solution will have to ensure it passes all failed SCs and whether the solution seems like it more directly addresses the subject matter of one SC than another is immaterial.

To use an extreme analogy, if I've just murdered someone with a gun I don't legally own, it may make sense to convict me of murder and forget about the gun ownership issue, but I've still been guilty of both crimes.

Mark
________________________________
From: Ms J <ms.jflz.woop@gmail.com>
Sent: 25 September 2025 12:06
To: 'w3c-wai-ig' <w3c-wai-ig@w3.org>
Subject: [EXTERNAL] Styling divs with CSS to create graphical objects which convey information

Hello

In the scenario where a <div> and CSS has been used to create little dot icons or markers, with different colours distinguishing types of information, no screen reader alternative.

Firstly, the use of colour failure is independent to this question and perfectly clear and nobody needs to comment on that.

What I am wondering is just from the perspective of screen reading software and how others would align this with the WCAG SC

Particularly, which of these/combinations of these would you consider this to violate


  1.
1.3.1 visual styling is used to convey information which is not programmatically determinable or available in text
  2.
 1.1.1 a cohesive graphic has been constructed using css and html tags which conveys information but does not have an alternative
  3.
4.1.2 a cohesive graphic has been constructed using css and html tags which conveys information but does not have a role (such as img)

follow up question

How about if css and html are used to make slightly more complex graphics - so an example is a progress bar with circled numbers connected by lines and different colours indicating current, completed and incomplete steps... in this case I can totally see the argument for 1.3.1 but I can also see the argument for 1.1.1 - if it was an <svg> with <text> I don't think we would have a hard time thinking of it as a 1.1.1 fail...

I suppose it boils down to the best solution? If the solution is to add semantics such as list mark up or visually hidden text then make it 1.3.1 where as if the solution is to add a role of img and a text alternative then 1.1.1 and 4.1.2?

I'm just interested to hear how others would tend to approach this?

Thanks

Sarah

Sent from Outlook for iOS<https://aka.ms/o0ukef>