phetsims / color-vision

"Color Vision" is an educational simulation in HTML5, by PhET Interactive Simulations.
http://phet.colorado.edu/en/simulation/color-vision
GNU General Public License v3.0
1 stars 7 forks source link

Add accessible names to the pdom #153

Closed Luisav1 closed 2 months ago

Luisav1 commented 3 months ago

@amanda-phet suggested it might be good to add accessible names to CV and @marlitas confirmed that sims are now generally doing that so we'll be adding these before QA testing.

Luisav1 commented 2 months ago

@terracoda I've added accessible names in the commits above to the Color Vision sim. Could you please review these changes and let me know any thoughts or suggestions you may have? Thanks!

Luisav1 commented 2 months ago

@amanda-phet volunteered to review these accessible names since @terracoda will be going on vacation soon. Thanks @amanda-phet!

amanda-phet commented 2 months ago

I took a quick peek and I like how there are headings for the different controls, that seems nice. I'm a little confused, but Taliesin might have a good idea about this:

  1. There is nothing in the Play Area. I know this is a simple sim, but I'm curious pedagogically if these things are all actually the play area, and only the pause/step and reset all buttons should be in the control area?
  2. Will the Flashlight button read out something about it being on/off?
  3. Will the Filter button say something about it being a toggle switch? I assume that is the case, but wanted to be sure. In the PDOM these things just look like buttons and I don't always know how they will be read out.
terracoda commented 2 months ago

Oh, interesting, I think perhaps the old-style process for adding Alternative Input was done before any descriptions were added.

Regarding Amanda's questions:

  1. I agree with Amanda, most of the objects need to be in the Play Area. Only the Time Controls and the Reset All button should go in the Control Area.
  2. The Flashlight is implemented as a toggle button which only announces it's state on focus - not on a change. On focus, a screen reader reads out "toggle button," when not pressed and "toggle button, selected" when pressed.
  3. The Filter button is implemented as an On/Off switch which does automatically announce "on" and "off" when toggled in addition to providing these states on focus: "Filter, on, switch" and "Filter, off, switch."

Even though they look different, I think it makes sense to implement them both as on/off switches. Unfortunately, the switch design pattern may not be working on iOS VoiceOver, due to an apple accessibility bug. For now it might be best to implement them both as regular toggle buttons - THIS NEEDS VERIFICATION by QA on the latest iOS.

About the Descriptions...where did they come from? They look different than the ones in the Interactive Description Design Document located in the Sim folder.

I think it is great that descriptions were created. I am not suggesting we change them to match the initial ideas in the design document. I recommend 1 update though. Unless there is a good reason not to, I would change:

Or change this in the future when more context is added through help text. Your decision.

terracoda commented 2 months ago

I reviewed and unassigned myself. The critical thing to do is the organizational change to move all controls except the Timing Controls and the Reset All button into the Play Area while preserving the same Tab order.

Luisav1 commented 2 months ago

In the commit above I implemented those changes. All controls except the Timer Controls and the Reset All button are now in the Play Area in the same Tab order and 'Flashlight Bulb Color' is now 'Bulb Color'.

terracoda commented 2 months ago

The Play Area and Control Area look good to me. Nice work Luisa!

amanda-phet commented 2 months ago

I lost my comment here from an impromptu design meeting yesterday. I asked the Physics folks to weigh in on some of the names, and here are the changes that we would like to see:

Colored Light --> Monochromatic Light

Photon --> Photons

Brain view options --> Viewer representation

terracoda commented 2 months ago

And just as an aside, I tried screen 1 and 2 with VoiceOver. The Accessible Names and other description provide a lot of very useful context that support understanding of the sonifications. For example, I can play with the bulb color and the filter color. The sonification tells me when no light is getting through the filter and comparing the values on the bulb color and filter color sliders tell me why.

Luisav1 commented 2 months ago

Thanks @terracoda and @amanda-phet! I've made those rename changes now too. I believe this issue be ready to be closed now unless there are other next steps here.

terracoda commented 2 months ago

@Luisav1, are you sure you got all the name changes? I still see Hide Brain and Show Brain, but maybe mine is an old version on master.

Screenshot 2024-07-12 at 14 34 38

Luisav1 commented 2 months ago

@terracoda Ah yes, I think it might be an old version on master as this is what I see here: image

amanda-phet commented 2 months ago

Looks good to me! Thanks @Luisav1 !

Luisav1 commented 2 months ago

Awesome! I just added the strings to the a11y strings so now I believe this is ready.

Luisav1 commented 2 months ago

I missed two strings, ‘Bulb color’ and ‘Filter color’. I wasn’t sure about duplicating them in the a11y section, but @jbphet confirmed in our standup meeting that it might be a good idea to repeat them since they are only two, just in case the a11y strings are separated out in the future. I have added them in the commit above. This issue is now ready to be closed. Thanks, everyone!

Luisav1 commented 2 months ago

Removed the duplicate a11y strings in the commit above since in dev meeting today the consensus was that it's fine to use non-translatable strings.