How are the number tweakers represented in HTML?

[terracoda]

@jessegreenberg, how are the number tweakers represented in HTML. Are they un-editable spinboxes?

And, I notieced that when I listen with the GFLB sim on phetest right now, I get something very strange.

Instead of hearing about an input or an un-editable input, I get a whole list of the controls that follow (checkboxes and reset).

Just wondering if there might be a code error or a missing closing tag somewhere?

[jessegreenberg]

@terracoda the NumberPickers are represented with

<input id="270-333-402-381-380-379-365" tabindex="0" min="1000000000" max="10000000000" type="number" style="width: 1px; height: 1px;">

When I listen to this with NVDA, I hear
"Spin button, edit, selected 6 billion."

@terracoda is this just on initial readthrough?

[terracoda]

What you hear in NVDA sounds correct, but I am not hearing anything like that in VoiceOver with Safari.

Can you validate the code in the PDOM to see if there are any missing closing tags?

[terracoda]

@jessegreenberg , I was tabbing through, just to hear the interactive items when I got the funny read out.

[jessegreenberg]

@terracoda I just verified it sounds very weird on Safari. Perhaps it is because the number inputs currently have no label?

I did verify the HTML - All I see are warnings that our number inputs should have aria-valuemax and aria-valuemin...but I am not sure if I trust that since we are using a native input element with min and max values already.

[jessegreenberg]

Adding labels fixes the problem...mostly. I have each a label of "Mass Control". Now I am hearing something very weird in VoiceOver. When NumberPicker receives focus, VoiceOver says:

", Mass (misspelled) Contr contents selected, Mass Control, incrementable edit text."

[jessegreenberg]

Here is the HTML

<div tabindex="-1" id="container-270-333-402-381-380-379-365">
    <label tabindex="-1" id="label-270-333-402-381-380-379-365" for="270-333-402-381-380-379-365">Mass Control</label>
    <input id="270-333-402-381-380-379-365" tabindex="0" min="1000000000" max="10000000000" value="2000000000" type="number" style="width: 1px; height: 1px;">
</div>

[jessegreenberg]

While playing with other examples online, I see that the input number text receives selection on focus. I think this is where "selection" is coming from, but we don't want this because direct number input will not be supported by this UI element.

Maybe we should do something more like:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute

EDIT: example from that page:

<div role="number" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">

[jessegreenberg]

Or maybe ARIA spinbutton?
https://www.w3.org/TR/wai-aria-1.1/#spinbutton

[jessegreenberg]

spinbutton role would be perfect. When focus lands on a spinbutton, I hear
"4 billion, Mass control, stepper"

...but VoiceOver doesn't read the new value when aria-valuenow changes. I tried to use aria-valuetext because apparently aria-valuetext is supposed to be read instead of aria-valuenow when specified (according to https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow). But still no luck. I verified this problem outside of the simulation.

Here is the HTML for the spinbutton:

<div id="270-333-402-381-380-379-365" tabindex="0" aria-label="Mass Control" role="spinbutton" aria-valuemin="1000000000" aria-valuemax="10000000000" aria-valuenow="10000000000"></div>

@terracoda do you have any thoughts about how to proceed?

[terracoda]

@jessegreenberg re "having no label" in #62 (comment). Yes, that could easily be the problem. With no label there is no accessible name for the sim control.

@jessegreenberg, yes, we definitely want to use the role "spinbutton". I couldn't remember if it was role "spinbox" or something else. I was going to look it. Thanks for beating me to it.

As for the labeling technique, we do have some on screen text, "Mass 1". aria-label is usually used when there is no on screen text. When there is on screen text, I would lean towards using a traditional label element.

In this case, however, the on-screen content only says "Mass 1", and we likely need more than that, (Mass 1 Size, maybe) so aria-label may be more appropriate.

In any case (label, aria-label, or aria-labelledby), we need an accessible name.

[jessegreenberg]

@terracoda VoiceOver doesn't read any changes to aria-valuenow. When I press arrow keys on the spinbutton, VoiceOver is silent. Should we still use the spinbutton role with this behavior?

[terracoda]

@jessegreenberg, sorry, I meant to say that we may need to do some investigation on what screen reader support is like for the other aria attributes.

If spinbutton and associated roles are not supported, we may not be able to use spinbutton now.

If it is a VoiceOver bug, we should report it.

Or, perhaps, like the input type range and role slider, we just need the right combination of HTML and ARIA. For example, have you tried:

<input id="270-333-402-381-380-379-365" tabindex="0" min="1000000000" max="10000000000" type="number" role="spinbutton" aria-label="Mass 1 Size" style="width: 1px; height: 1px;">

[jessegreenberg]

Sounds good @terracoda, Ill give that a try tomorrow when I have access to VoiceOver.

[terracoda]

Thanks @jessegreenberg.
I can also test with VoiceOver if the code is available on phet test or in a dev link.

[jessegreenberg]

We tried the example @terracoda provided in #62 (comment).

VoiceOver does read the value with that HTML. But aria-valuetext is not supported, so it just reads the value with no units.

[jessegreenberg]

We verified that VoiceOver does not support aria-valuetext with input type=number and role=spinbutton in https://jsfiddle.net/0zo1mp6v/3/.

[jessegreenberg]

We also just verified that aria-valuetext is still broken with VoiceOver when we remove the spinbutton role.

@terracoda based on this, what HTML do you think we should use? If we cannot use input type=number, and we cannot use role=spinbutton, does that leave us with something custom that uses aria-live?

[terracoda]

On first thought, yes, but does it work in NVDA and JAWS?

Could you add aria-orientation="vertical" to see if that helps at all?

I'm going to email the wai-w3c ig group mailing list to see if anyone has any advice.

[terracoda]

@jessegreenberg, I played with the JS fiddle and added all the aria-attributes like this:

<input id="270-333-402-381-380-379-365" tabindex="0" aria-label="Mass 1 Size" role="spinbutton" min="1000000000" max="10000000000" aria-valuemin="1000000000" aria-valuemax="10000000000" aria-valuenow="10000000000" aria-valuetext="9000000000 kilograms" type="number" >

And I get the value, the units, the label, the role as "stepper", when I place focus on the input. Then the number values only are read out when I increase and decrease the value with the arrow keys. This sounds pretty good to me.

Did you try all ARIA attributes with the HTML input, or just aria-valuetext?

I haven't emailed the WAI interest group yet. I think it would be better to reach out to the ARIA group. They need an example of an accessible spinbutton in their resources (See issue: w3c/aria-practices#125). We might be able to collaborate with some folks there to solve this problem.

[terracoda]

@jessegreenberg, I am reassigning to you to for comment and/or iteration.

[terracoda]

@jessegreenberg, here are the two examples I tested over in the a11y-research repo: spinbutton examples.

[terracoda]

@jessegreenberg, I added the label type:bug, but I am not sure that's the best label.

Please re-assign to me if you have more questions.

[jessegreenberg]

Using valid HTML is quite critical for consistency across AT, so could you please re-implement with a div element?

@terracoda yes I can do this, but just to clarify, this will make it impossible to discover the element with the virtual cursor (at least on NVDA). In this case, valid HTML is not supported by the AT. Are you OK with this?

[terracoda]

@jessegreenberg, do you mean that

1. <div role="spinbutton">Mass 1</div> is not discoverable and perceivable with the Arrow keys at all?, or
2. the spinbutton is not operable and therefore not editable with arrow keys when aria-readonly="true" is added to the element?

For case 1, this has to be an NVDA bug.

[jessegreenberg]

I do mean case 1, and I agree it is an NVDA bug.

[terracoda]

That is the weirdest bug, and I would think it would be high-priorty.
I just got an email from Quentin from NVDA today.

How do you normally submit bugs?

And regarding your question, since this sim is slated for release asap, it might be better to go with a button, but we need to make it clear that this is not a solution we can rely on, and that we have to watch it and do a maintenance release as soon as we can fix it.

I am going to reach our to the WCAG list for advice.

[jessegreenberg]

Ahh, @terracoda it looks like this was a problem in NVDA 2017.4, but not in NVDA 2018.1.1, which was released last week! Latest NVDA does support this! In that case it is definitely best to use a div.

[terracoda]

@jessegreenberg , awesome news!

[terracoda]

Would you mind trying out the aria-readonly attribute if you haven't already. If it only prevents text-editing capabilities, I think it is worth implementing.

If it causes any other headaches, I can get clarification from an ARIA expert.

[jessegreenberg]

Sure Ill give it a try! I am running into an issue with VoiceOver now, VoiceOver doesn't read the inner content on the <div role="spinbutton">Mass 1 Control</div>. @terracoda should we have a duplicate accessible name for VoiceOver? Actually, I think that is what you were suggesting above:

<h3 id="mass-01-spinbutton-label">Mass Control 1</h3>
    <div id="mass-01-spinbutton" tabindex="0" aria-readonly=”true” role="spinbutton"  min="1" max="10" aria-valuenow="2" aria-valuetext="2 billion kg" aria-labelledby="mass-01-spinbutton-label">billion kg</div>

[jessegreenberg]

Using aria-labelledby makes it sounds nice in VoiceOver @terracoda.

[jessegreenberg]

I tried aria-readonly with NVDA and Firefox. the attribute doesn't change how the element is announced, but it does change how the AT enters forms mode. With aria-readonly the only way to change the value is by pressing insert+n+spacebar to force forms mode. Without aria-readonly, NVDA enters forms mode on tab focus, and after pressing "enter" if navigating with the virtual cursor.

@terracoda thoughts?

[terracoda]

@jessegreenberg, this required forcing of forms mode does not seem so user friendly. I think it is likely better for users if we leave that off for now, and see what users do with the spinbutton. We'll have to keep an eye on how JAWS users interpret the default JAWS help text about editing the text. Hopefully, that information will not get in the way of their interaction. If and when it does we can reconsider things.

[terracoda]

@jessegreenberg, I am going to use the code in #62 (comment) as a possible a11y design pattern.

Does that make sense to you?

[jessegreenberg]

@terracoda working on this now, going to test it everywhere just to make sure. I think that sounds good (minus the use of aria-readonly).

[jessegreenberg]

Got the above working, sounds excellent in VO with Safari, NVDA and JAWS with FF 60! No longer using aria-live as a workaround. Great work @terracoda! I am going to commit it here soon.

[jessegreenberg]

@terracoda can you please give it a listen? If all sounds well I think this issue can be closed.

[terracoda]

@jessegreenberg thanks! I'll test and report back tomorrow.

[jessegreenberg]

Number tweakers have been generally implemented and fixed up in phetsims/area-model-common#150, I think this issue can be closed.