2

I am creating an image slider for a site, and I am confused on how to successfully meet wcag requirements. Below is an example that conveys the idea of what I am creating.

Image Comparison Slider example

I have read a couple articles on accessiblity (WebAIM's contrast explanation and w3.org's explnation for sufficient color contrast). After reading, it has led me to these questions:

  1. What is considered essential to understanding the information and functionality in the image slider? Is it the circle in the middle of the slider that one uses to drag between the two images? Or does the vertical divider between the images also count as essential?
  2. How does one ensure sufficient contrast with the slider and the images behind it? If the images in the component were unpredictable, how can you design the component in a way that ensures sufficient contrast with any image? Is good contrast between the inner arrows of the slider and the background enough? (For example, the middle circle in the slider component would have white inner arrows with a blue background).

There does not seem to be any talk of this online that I have found as well.

2
+50

1.) What is considered essential to understanding the information and functionality in the image slider? Is it the circle in the middle of the slider that one uses to drag between the two images? Or does the vertical divider between the images also count as essential?

The applicable WCAG specifications for the visual design are:

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

  • User Interface Components Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

  • Graphical Objects Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Per SC 1.4.11--The circle is the interactive element of the slider so that is definitely required to have sufficient color contrast. The circle would need to stand out against the background by 3:1 contrast ratio. And the arrows inside the circle need to have a minimum of 3:1 contrast ratio against the circle background.

The guidelines are a bit vague when it comes to the dividing border between the graphics, so there's an element of interpretation. Think of it this way: is it merely decorative or does it serve a purpose to help understand the meaning/intention? If you remove it, will this feature lose any usability or understanding?

I think the border is necessary, and for that reason might be considered essential. It helps distinguish the two images (mostly because the rendering is so well-executed. If it was a black-and-white sketch, I might think differently.)

And per SC 1.4.1--You might want to consider labeling each side in some way so that the border and graphics alone aren't the only thing that convey information. (Even if someone can't see it, they will know that there is a photo on one side and a rendering on the other.)

2.) How does one ensure sufficient contrast with the slider and the images behind it? If the images in the component were unpredictable, how can you design the component in a way that ensures sufficient contrast with any image? Is good contrast between the inner arrows of the slider and the background enough? (For example, the middle circle in the slider component would have white inner arrows with a blue background).

You're off to a good start in thinking about filling the circle with a solid color. The inner arrows need to be 3:1 contrast ratio against the circle background color. Since the images behind the cirlce are unpredictable, you might consider putting a border around the circle (also with a 3:1 contrast against the circle background) to further distinguish it from the graphics behind it. That way the images will always contrast with either the border or the circle, ensuring the interactive element is distinguishable 100% of the time.

Can you also add a border on the left and right side of the dividing line?

Here is a quick and unelegant mockup I created to try to illustrate my explanation: enter image description here

There are also keyboard interactions that need to be considered for this type of element, so make sure that's on the radar. (But out of my wheel-house to advise.)

Glad you're thinking about accessibility! Hope this helps.

5
  • +1 Very clear and comprehensive answer to the question! I assume you've had a little bit of experience with WCAG and accessibility in general? Thoughts on WCAG 3.0? :)
    – Michael Lai
    Mar 23 at 6:01
  • 1
    I've been fortunate to work closely with accessibility experts over the past few years, so I've become very familiar with WCAG and thinking about accessibility. I didn't know there was a 3.0! It looks interesting and different from the previous versions. I like the idea of simplifying the wording to make it easier for everyone to understand the guidelines and how to implement them, though I'm not sure I like "Outcomes" better than "Success Criterion." I'm also concerned that the new conformance model may have unexpected results. A pass/fail model is much easier to sell changes to a team.
    – MRL
    Mar 23 at 15:24
  • There are lots of accessibility questions on UXSE so it would be great to get someone with lots of experience to contribute (plus other topics too of course)! I do like the changes introduced in WCAG 3.0 and the direction that they want to head towards :)
    – Michael Lai
    Mar 23 at 23:14
  • Thorough, clear, and very helpful. Thank you! I will include the divider as essential after your explanation. Adding borders to the circle/dividing line are things I am able to do. I think your suggestion is a great idea! Do the borders become the new "background" of the slider? So in your example (black circle with white border), does the black circle ignore the contrast with the background images and only worries about the white border? It seems that wcag says this happens with text, but I couldn't find anything conclusive for graphics.
    – frownyface
    Mar 24 at 0:26
  • The simplest rule is that a foreground must have 3:1 contrast against background (unless it's text, which then needs to be 4.5:1.) If you can't do that, then adding a border/margin, etc. introduces a third color. So now you have foreground, middle, background. I've seen this applied two ways: 1.) foreground and middle do not have 3:1 contrast, but middle and background do. 2.) foreground and middle DO have 3:1 contrast, but middle and background do not. The correct application depends on the scenario.
    – MRL
    Mar 24 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.