WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: glen walker
Date: Jan 6, 2023 10:47AM

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.