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

. not sure I get your analogy, but no mind. 

 

From: Mark Magennis <Mark.Magennis@skillsoft.com> 
Sent: Monday, September 29, 2025 7:14 PM
To: Ms J <ms.jflz.woop@gmail.com>; 'w3c-wai-ig' <w3c-wai-ig@w3.org>
Subject: 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 <mailto:ms.jflz.woop@gmail.com> >
Sent: 25 September 2025 12:06
To: 'w3c-wai-ig' <w3c-wai-ig@w3.org <mailto: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>