User request: additional color labels [a11y]

[oliver-phet]

I wanted to pass along some feedback as a teacher on the Color Vision simulation. This tool is a great way to help students explore how colors of light interact, but I have had many students struggle with it due to having a lack of normal color vision. It would be great if you could add an option to the simulation to turn on text labels for the various colors as they appear, so that students who cannot detect the color themselves can tell what is going on.

Tagging responsible designer @DianaTavares

[DianaTavares]

I find this task interesting, useful, but at the same time hard.

For the Single Bulb screen, with the filters, I think we can add a percentage of intensity, like in bending Light:

but obviously, this issue is more related to RGB screen. Once, a teacher told me that this screen needed a number indicator in the sliders because it is hard for students to communicate how they create a specific color. For example, this color is created with almost half blue and almost all red?

Then a number in the sliders that indicate the % of color intensity will support communication.

But a label for the color created, with RGB user can create “all colors”. It is hard for me to know what label to use. In the example above, is it pink or purple? or will the use of one of the colors codes be enough?

@terracoda, do you have information about how to make colors in this simulation more accessible?

[terracoda]

For reference, a Description Design Document was started for this sim. It's in the Sim Design folder. ADDING: But the description design is no longer being actively worked on.

@Matthew-Moore240 and I got a fair amount of object names and help text drafted for the controls on screen 1.

We didn't get to the second screen. That said, the controls on screen 2 are way simpler than the ones on screen 1.

Two big challenges for screen 2 are:

1. coming up with a list of color names including a qualitative range for shades, and
2. a qualitative range for light intensity coming from the Red, Green and Blue Bulbs, assuming it is “light intensity” that the sliders are controlling.

There seem to be solutions for auto-converting color codes to color names out there, so maybe this is not a huge lift, but it would still need dev and design time to try a solution in the sim.

https://www.w3schools.com/colors/colors_converter.asp

Tagging @kathy-phet, @brent-phet , @marlitas for prioritization.

[Luisav1]

In the above commits I added a number indicator to the sliders as seen below.

In a slack conversation with @DianaTavares, adding these number labels was the easiest to implement and a most-necessary solution.

[Luisav1]

Assigning @amanda-phet to review if these changes look alright design-wise.

[amanda-phet]

Should the three colors also be labeled Red, Green, and Blue, to help address the initial user suggestion? I recognize that it's difficult to name the color mixtures, but the link @terracoda shared seems very useful: https://www.w3schools.com/colors/colors_converter.asp

I've been checking in with @ariel-phet at times for this sim since Kathy isn't accessible as a lead designer. @ariel-phet can you advise on what should be done for this issue? Should we explore naming the color mixtures? Should we label the RBG sliders? And is it helpful to add the quantities to the sliders?

[terracoda]

Chiming in, even if we are not able to name the color mixes, I think it is indeed very useful, even required to name the sliders as red, green, and blue OR maybe even Red Light, Green Light, Blue Light. Since they are flashlights, I would say, Red Light, Green Light, Blue Light until we have the opportunity to identify them as flashlights in a different way.

For the slider value, what is each slider controlling? For example, what is the unit of light, or what is the unit of colored light?

Digital colors have a range from 0-255. I do not know if that range is relevant here.

[DianaTavares]

Like this?:

For the slider value, what is each slider controlling?

and about this question, my suggestion was "intensity" 0% to 100% of the intensity of the light of that color. I think that a more advanced way to do it is for the sliders to go from 0-255, and if we include to display the real value of RGB, we have the code of the mix of color. I can mock up this option.

[DianaTavares]

From the website that @terracoda share:

[amanda-phet]

I think 0-100 makes a lot of sense. Since we didn't have labels before, they were more like "qualitative" sliders, but to achieve the goal of describing the mixture, 0-100 makes a lot of sense.

If we go ahead with labeling the mixture, I would put it inside the thought bubble. It feels advanced to go up to 255 in my opinion.

I would need to look at the learning goals of this sim to weigh in on big changes like this, but my guess is that if we get really quantitative it might take away from the learning goals.

[ariel-phet]

@DianaTavares @terracoda @amanda-phet

I definitely do not think going 0-255 is a good idea, although that is a fairly common way of thinking about things in graphic design/computer graphics it will seem super arbitrary to a young user. I do think going 0-100 on the scale allows students to communicate to each other or a teacher what color mixture they used.

I would also not have some sort of "RGB values" option, again, I just don't think that fits with the learning goals of this sim.

I would also just label each slider "Red" "Green" and "Blue" -- I personally don't think the word "light" is needed there in terms of the text label.

It seems the original concern in this issue was that as students who are color blind play with the sim, they do not necessarily see how changing the RGB colors is affecting the perception of the person.

If I were going to add an element, I think it would be a qualitative element, like showing the color spectrum next to the "thought bubble" with an indicator arrow (or indicator circle) showing where the perception occurs. Then even a color blind person should be able to recognize that as the RGB values are changed, the perceived color is shifting. Of course, such a representation is a bit complex and might need to be more like a color value "wheel" -- colors like "pink" are an imaginary color and do not appear in the normal spectrum.

[terracoda]

If you want to be qualitative with the color names, for the bubble you need to determine a color scale and an intensity scale to describe the perceived color, e.g. light red, red, dark red, light pink, pink, dark pink, light magenta, magenta, dark magenta. And for the sliders you need an intensity amount scale, "tiny bit of red", "a little bit of red"..."a lot of red".

Maybe you can use AI to generate a qualitative color name from the actual percentage-based color code? That would be interesting to try.

Making a color wheel is an interesting idea, but it makes the sim even more difficult to describe.

@arial, since the red, green and blue is actually light and not buckets of paint, I think the sliders should be labeled, "Red Light", "Green Light", and "Blue Light". You could add a heading in the PDOM that describes the sliders as "Flash Lights," but we are not doing full description, so why not just add "Light" to the slider's name?

[terracoda]

Oh, the RGB color code is not percentage based.

[emily-phet]

No one asked, but thought it might be helpful to note that I think the perspective being expressed by Taliesin is rooted in awareness of what full interactive description and/or Voicing for this sim needs to entail, and suggesting solutions in alignment with that. This approach could decrease work / revisions needed in the future and help support users with diverse needs in the interim before further description is added. For example, naming sliders "Red Light" as opposed to "red" in the code e.g., their accessible name, would read out to screen readers and provide some further clarity of what the objects are. It's good practice to have the object's visual label match the object's accessible name (or at least to have thought through any differences) so choosing the visual label for many users/access contexts.

[amanda-phet]

Discussion 6/13/24:

• Like the 0-100 scale... Keep intermediate tick marks, move labels to ends and just show 0% and 100%. Similar to Greenhouse slider.

• Remove the RGB checkbox- this is more qualitative, and the new tick marks will make it easier to communicate someone's color mixture

• We might be able to fit the label on the flashlight on a semi-transparent white background.

• Do we need "light" in the label? Agreed that "light" is extra information that is implied with the context of the sim. The slider thumb (the thing that gets focus) should have an accessible name of "red light slider" or something more to that effect.

• We aren't exactly addressing the initial user concern... can we achieve this?

  • This is similar to the spectrum used in illustrator:
  • 
  • Like how the circle is "continuous"
  • would go in upper-left corner of the sim
  • This work would not be funded... and it's unclear how much designer and developer time is needed to achieve this.

With respect to this issue, we will defer until we have funding to add the color-blind support.

For the changes to the flashlight labels and sliders, I'll open another issue for @Luisav1 to commit against, then we can close that issue when that work is complete.

[amanda-phet]

@Luisav1 I will leave this assigned to you since you did make some commits. When you're done reverting them you can leave this issue unassigned.

[terracoda]

Sorry I was not available for design meeting today.

In case it is not obvious to the entire team, “slider” is never part of the accessible name. “Slider” is the role of the object and is read out along side the accessible name and current value when accessed by screen reader software. For example, 45%, Red, slider, then 22%, Green, slider, 19%, Blue, slider.

The visibly displayed name and the accessible name need to match. It's a WCAG success criteria. It is more relevant for users of voice activation software like dragon naturally speaking than to blind learners accessing only the description in the PDOM.

If it is Red, Green, Blue on the screen it needs to be Red , Green and Blue in the PDOM.

The concept of Light can be described in other parts of the PDOM in the future, but until then screen reader users can and may access these sliders without that additional context.

Auto-name generation and sonification are other solutions that can be explored when funding is available.

[kathy-phet]

@terracoda - I see examples where it is also considered to comply if it accessible name "starts" with the visible label. See "Examples" in this doc.

Accessible name matches visible label: The accessible name and visible label of a control match. Accessible name starts with visible label: The accessible name "Search for a value" begins with the text of the visible label, "Search".

So maybe visible label as "Red" and accessible name as "Red Light" works OK? It seems like we may often want the accessible name to be longer than the visible name.

[terracoda]

Yes, @kathy-phet, thanks for pointing out that it still passes SC 2.5.3 if we put "Red Light", "Green Light", and "Blue Light" in the PDOM as the accessible names for the sliders.

Hopefully, that is what the team decided to do.

[Luisav1]

All the commits to this issue are reverted. Leaving this issue unassigned.

[terracoda]

What were the decisions for this sim? Adding accessible names, even if you do not add visual names to the sliders is a useful thing to do.

[Luisav1]

@terracoda Yes, I have added the accessible names to the sliders in the format of "{{color name}} light" such as "red light".