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

You got me, Mark, though I was really thinking of the widget as a whole
rather than each dot.

 

Then again, the inconsistent usage and definition of 'component'  in WCAG
2.x might permit its application to a single dot after all (check out the
discussions on the topic in the WCAG GIT repos).

 

Perhaps it's a failure of 9.7.3: execrable design & implementation? I use
this one quite a bit .

 

Seriously, however, it does raise the question of which success criterion
would cover a non-interactive bit of a UI that doesn't have a role given the
commonplace understanding of 'control' being associated with performing a
function rather than simply conveying information. 

 

Or are these dots just part of a whole and therefore don't require a role in
themselves?

 

 

 

 

 

 

 

From: Mark Magennis <Mark.Magennis@skillsoft.com> 
Sent: Monday, September 29, 2025 7:01 PM
To: Adam Cooper <cooperad@bigpond.com>; 'Ms J' <ms.jflz.woop@gmail.com>;
'w3c-wai-ig' <w3c-wai-ig@w3.org>
Subject: Re: [EXTERNAL] RE: Styling divs with CSS to create graphical
objects which convey information

 

I don't think this fails 4.1.2 because that SC applies only to user
interface components, defined as "a part of the content that is perceived by
users as a single control for a distinct function". These dots are just
informational, not functional, aren't they?

 

Mark

 

 

  _____  

From: Adam Cooper <cooperad@bigpond.com>
Sent: Saturday, September 27, 2025 00:54
To: 'Ms J' <ms.jflz.woop@gmail.com>; 'w3c-wai-ig' <w3c-wai-ig@w3.org>
Subject: [EXTERNAL] RE: Styling divs with CSS to create graphical objects
which convey information 

 

Hi Sarah,

 

It looks like you've answered your own question . 1.1.1, 1.3.1, and 4.1.2
are the three success criteria that fail on the basis of your description in
both cases.

 

Also, if this component uses the CSS background property, it won't be
visible in Windows High Contrast.

 

 

 

From: Ms J <ms.jflz.woop@gmail.com>
Sent: Thursday, September 25, 2025 9:06 PM
To: 'w3c-wai-ig' <w3c-wai-ig@w3.org>
Subject: 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>