Fix: Seperate IDs for prefix/suffix and aria-describedby added for suffix (fixes #143)

[joe-allen-89]

#143

Fix

• Seperate IDs for prefix/suffix and aria-describedby added for suffix (fixes Prefix and Suffix Labels Not Being Read by Accessibility Tools #143)

ref:
https://webaim.org/techniques/forms/advanced#describedby

[oliverfoster]

Could you describe how this reads with the screen readers and why you're using both aria-labelledby and aria-describedby please?

aria-labelledby
aria-describedby

https://benmyers.dev/blog/aria-labels-and-descriptions/

It is possible to have more than one id in aria-labelledby:

aria-labelledby={[prefix && `${_id}-${index}-aria-prefix`, suffix && `${_id}-${index}-aria-suffix`].filter(Boolean).join(" ")}`

[joe-allen-89]

Could you describe how this reads with the screen readers and why you're using both aria-labelledby and aria-describedby please?

aria-labelledby aria-describedby

https://benmyers.dev/blog/aria-labels-and-descriptions/

It is possible to have more than one id in aria-labelledby:

aria-labelledby={[prefix && `${_id}-${index}-aria-prefix`, suffix && `${_id}-${index}-aria-suffix`].filter(Boolean).join(" ")}`

@oliverfoster when adding both to aria-labelledby the suffix is read out before the content of the textInput (either placeholder or user answer), by adding describedby it reads out the suffix after the content of the text input which seemed like a more logical order.

[oliverfoster]

Does it do that with all of the screen readers? (nvda, voiceover and jaws in firefox, safari and chrome?) I can't see it defined that way in any of the specs. Do you have a reference we can pin on the pr?

[joe-allen-89]

I've tested with Jaws on Chrome, Firefox and Edge. I shall have a look for a reference.

[joe-allen-89]

@oliverfoster - https://webaim.org/techniques/forms/advanced#describedby

"Screen readers will typically read the label, then read the input type (text box, checkbox, etc., plus any necessary properties, such as if the field is required), and then read the description."

Whilst this doesn't say 100% will read the description after the input that's the typical behaviour.

[cahirodoherty-learningpool]

👀

[kirsty-hames]

When testing this using VoiceOver on Mac, the placeholder "Enter answer here" aria-label isn't read when a prefix is set. Looks like aria-labelledby replaces aria-label.

aria-labelledby takes precedence over all other methods of providing an accessible name, including aria-label, , and the element's inner text.
ref: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby

I don't have access to test Windows screen readers to see if this is a global issue.

[joe-allen-89]

@kirsty-hames I've added the placeholder to the aria-labelledby so it will always be included as aria-describedby doesn't take precedence over aria-label.

I've also updated both to reflect the changes made to the slider to remove the attribute by setting it to null when not in use - adaptlearning/adapt-contrib-slider@41976c6

[kirsty-hames]

Thanks for the updates @joe-allen-89. On retest, the placeholder text doesn't read. aria-describedby requires the id of an element, rather than passing in the placeholder text. We may have to create a separate label containing the placeholder text instead and reference this by id. For example:

            <div className="textinput-item__textbox-container">
              <input
                className="textinput-item__textbox js-textinput-textbox"
                type="text"
                placeholder={placeholder}
                data-id={`${input}-${index}`}
                id={`${_id}-${index}`}
                aria-labelledby={(prefix) ? `${_id}-${index}-aria-prefix ${_id}-${index}-aria-placeholder` : null}
                aria-describedby={(suffix) ? `${_id}-${index}-aria-suffix` : null}
                aria-label={placeholder}
                defaultValue={userAnswer}
                disabled={!_isEnabled}
              />
              <div
                className='textinput-item__placeholder aria-label'
                id={`${_id}-${index}-aria-placeholder`}
                aria-hidden='true'>{placeholder}
              </div>
              <div className="textinput-item__state">
                <div className="textinput-item__icon textinput-item__correct-icon" aria-label={_globals._accessibility._ariaLabels.correct}>
                  <div className="icon" aria-hidden="true"/>
                </div>
                <div className="textinput-item__icon textinput-item__incorrect-icon" aria-label={_globals._accessibility._ariaLabels.incorrect}>
                  <div className="icon" aria-hidden="true" />
                </div>
              </div>
            </div>

Note, I've set .textinput-item__placeholder to aria-hidden to prevent this from reading twice.