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

In all seriousness a better example of what I mean is this:

You have a button which when you press it, triggers a dialog to open which looks like a modal dialog but does not limit the access of screen readers to the dialog contents. The dialog content is inserted programmatically directly after the button. For a screen reader user, this therefore acts as thought it were an 'accordion' button or expandable region. There are two possible ways you could fix this - you could put an aria-expanded on the button and leave the dialog to not limit focus. Screen reader users won't know it looks visually like a dialog, for them, it's arguably in an alternative format (an expandable region). Alternatively, they could limit the access of sr software to the dialog contents. Then the button would not need an aria-expanded. Depending on which solution you deem most appropriate, you may align it with different sc, but not both. So, for arguments sake, say you align the first case with 4.1.2 and the second one with 1.3.1. If I wanted the solution to be fit them to limit the access of sr software then I wouldn't fail it for 4.1.2 because that implies it needs an aria-expanded...

So that's what I mean when I say it depends on the solution

Sarah

Sent from Outlook for iOS<https://aka.ms/o0ukef>
________________________________
From: Ms J <ms.jflz.woop@gmail.com>
Sent: Tuesday, September 30, 2025 8:50:29 AM
To: Mark Magennis <Mark.Magennis@skillsoft.com>; 'w3c-wai-ig' <w3c-wai-ig@w3.org>
Subject: Re: [EXTERNAL] Styling divs with CSS to create graphical objects which convey information

Hi Mark

I think working out the solution helps to identify the problem.

In your analogy, if the solution would be to put the guy in prison, then you convict of murder, if the solution is to put him in a psychiatric hospital then you convict of manslaughter with diminished responsibility, but not both 😉

Sarah

Sent from Outlook for iOS<https://aka.ms/o0ukef>
________________________________
From: Mark Magennis <Mark.Magennis@skillsoft.com>
Sent: Monday, September 29, 2025 10:13:32 AM
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>
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>