WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: WCAG 1.4.11 Non-text Contrast for Previous and Next icons which are disabled by default

for

Number of posts in this thread: 3 (In chronological order)

From: allyssa jessicon
Date: Fri, Jan 06 2023 5:35AM
Subject: WCAG 1.4.11 Non-text Contrast for Previous and Next icons which are disabled by default
No previous message | Next message →

Hello everyone, Good morning!

Is previous (disabled) and next (disabled) components in a pagination
is determined by U/A and not by the author?
WCAG says - Visual information required to identify user interface
components and states, Quote: except for inactive components or where
the appearance of the component is determined by the user agent and
not modified by the author; Quote:
A webpage is having some contents which are included in a single page
view and the previous and next arrow icons are therefore unavailable
which does not have minimum contrast requirement. I'm a bit confused
by the quoted terminology above to determine if this is an actual
failure or not.

I appreciate your response.


Regards,
Alysa.

From: Jonathan C. Cohn
Date: Fri, Jan 06 2023 6:13AM
Subject: Re: WCAG 1.4.11 Non-text Contrast for Previous and Next icons which are disabled by default
← Previous message | Next message →

Essentially what this is saying is that a web designer or content author cannot be blamed for choices that the browser makes or disable components. So, if you change the styling of the next previous buttons at all, then, contrast issues are yours to resolve but if you leave them, with the browser default styling then You can pass this criteria.

Sent from my iPhone

> On Jan 6, 2023, at 7:35 AM, allyssa jessicon < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hello everyone, Good morning!
>
> Is previous (disabled) and next (disabled) components in a pagination
> is determined by U/A and not by the author?
> WCAG says - Visual information required to identify user interface
> components and states, Quote: except for inactive components or where
> the appearance of the component is determined by the user agent and
> not modified by the author; Quote:
> A webpage is having some contents which are included in a single page
> view and the previous and next arrow icons are therefore unavailable
> which does not have minimum contrast requirement. I'm a bit confused
> by the quoted terminology above to determine if this is an actual
> failure or not.
>
> I appreciate your response.
>
>
> Regards,
> Alysa.
> > > >

From: glen walker
Date: Fri, Jan 06 2023 10:47AM
Subject: Re: WCAG 1.4.11 Non-text Contrast for Previous and Next icons which are disabled by default
← Previous message | No next message

Just to be clear, the custom styling and the inactive components are
separate phrases. WCAG is not saying that if you have a custom styled
inactive component. It's saying that if you don't have custom styling
(that is, you're letting the component be styled by the browser, no matter
what state the component is in) OR if the component is inactive (whether
custom styled or not), then 1.4.11 doesn't apply.

Keep in mind that WCAG is a bare minimum baseline and while it might allow
a component to be "accessible", it might not be "usable".

So if you have "next" and "previous" buttons that don't apply in a certain
situation, it's usually best to not have the buttons at all. When a
component is visible and inactive (even with really low contrast), it sort
of implies that something can happen in the interface that would make that
component active. If that component can never be active, it'd be better to
hide the component rather than "tease" the user that they might be able to
do something to activate the component.

If the component can magically become active (hopefully you've conveyed to
the user how that can happen), then even though the inactive component
could have a 1.1:1 contrast ratio, that doesn't mean you should do that. A
higher contrast would be better. But there's definitely a design balance
you need to make. You don't want an inactive component to have so much
contrast that it looks like something you can interact with and then
frustrate the user when they can't click on it (or whatever the interaction
is). But you also don't want an inactive component so low in contrast that
the average user can't see it, even though it's allowed by WCAG.