New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make output fields readable by screen readers #3583

Closed
ebruchez opened this Issue May 10, 2018 · 3 comments

Comments

Projects
1 participant
@ebruchez
Collaborator

ebruchez commented May 10, 2018

@ebruchez

This comment has been minimized.

Show comment
Hide comment
@ebruchez

ebruchez Jun 11, 2018

Collaborator

With NVDA, on Windows, the following markup:

<output
    id="fr-view-component≡section-1-section≡grid-2-grid≡control-3-control≡≡c⊙1"
    class="xforms-output-output"
    aria-labelledby="fr-view-component≡section-1-section≡grid-2-grid≡xf-746"
    aria-describedby="fr-view-component≡section-1-section≡grid-2-grid≡xf-747"
    tabindex="0"
    role="textbox"
    aria-readonly="true">42</output>

produces the following results with:

  • Microsoft Edge:
    • [LABEL] edit 42 readonly
  • IE11
    • column 3 [LABEL] edit readonly
  • Chrome
    • [LABEL] edit readonly 42
  • Firefox
    • [LABEL] edit readonly 42

The only browser causing a real problem is IE11. It is unable to read the value at all as it doesn't know <output> at all. I thought that aria-valuetext might help, but no.

Remaining tasks:

  • not all <xf:output> should be focusable
    • → make only the ones that have a label
  • non-repeated <output>: also need aria-labelledby?
    • It doesn't seem to matter in the cases that I have tested so far.
  • handle new iterations
  • test that this works ok with the test forms
Collaborator

ebruchez commented Jun 11, 2018

With NVDA, on Windows, the following markup:

<output
    id="fr-view-component≡section-1-section≡grid-2-grid≡control-3-control≡≡c⊙1"
    class="xforms-output-output"
    aria-labelledby="fr-view-component≡section-1-section≡grid-2-grid≡xf-746"
    aria-describedby="fr-view-component≡section-1-section≡grid-2-grid≡xf-747"
    tabindex="0"
    role="textbox"
    aria-readonly="true">42</output>

produces the following results with:

  • Microsoft Edge:
    • [LABEL] edit 42 readonly
  • IE11
    • column 3 [LABEL] edit readonly
  • Chrome
    • [LABEL] edit readonly 42
  • Firefox
    • [LABEL] edit readonly 42

The only browser causing a real problem is IE11. It is unable to read the value at all as it doesn't know <output> at all. I thought that aria-valuetext might help, but no.

Remaining tasks:

  • not all <xf:output> should be focusable
    • → make only the ones that have a label
  • non-repeated <output>: also need aria-labelledby?
    • It doesn't seem to matter in the cases that I have tested so far.
  • handle new iterations
  • test that this works ok with the test forms
@ebruchez

This comment has been minimized.

Show comment
Hide comment
@ebruchez

ebruchez Jun 14, 2018

Collaborator

Mac OS with VoiceOver:

  • Chrome
    • 42 [LABEL] text
  • Safari
    • doesn't stop on output field; but option is selected in Safari
  • Firefox
    • VoiceOver doesn't do anything at all
Collaborator

ebruchez commented Jun 14, 2018

Mac OS with VoiceOver:

  • Chrome
    • 42 [LABEL] text
  • Safari
    • doesn't stop on output field; but option is selected in Safari
  • Firefox
    • VoiceOver doesn't do anything at all

@ebruchez ebruchez closed this Jun 14, 2018

Orbeon Forms 2018.1 automation moved this from In Progress to Done Jun 14, 2018

@ebruchez

This comment has been minimized.

Show comment
Hide comment
@ebruchez

ebruchez Jun 14, 2018

Collaborator

Done, with limitations. See above.

Collaborator

ebruchez commented Jun 14, 2018

Done, with limitations. See above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment