Skip to content

LG-7817 Ensure that screen reader maintains user's place on the page.#7487

Closed
eileen-nava wants to merge 10 commits intomainfrom
em/7817-screen-reader
Closed

LG-7817 Ensure that screen reader maintains user's place on the page.#7487
eileen-nava wants to merge 10 commits intomainfrom
em/7817-screen-reader

Conversation

@eileen-nava
Copy link
Copy Markdown
Contributor

🎫 Ticket

Screen reader tab order

🛠 Summary of changes

If the user searches for an address on the "Select a location to verify your ID" page.....
[ ] the screen reader will maintain the user's place on the page
[ ] the screen reader will follow the hierarchy of the page
[ ] the screen reader will only read the word "back" once (Due to an issue that existed before this PR, the screen reader would read "back" 2x when it read the back button component)

📜 Testing Plan

  • Navigate to the "Select a location to verify your ID" page
  • Turn on Voiceover (Command + F5 on macs)
  • Enter an address in the search box and watch the screen reader do its thing

👀 Screenshots

Screen capture below

Screen.Recording.2022-12-14.at.11.51.07.AM.mov

Copy link
Copy Markdown
Contributor

@allthesignals allthesignals left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

<AddressSearch onAddressFound={handleFoundAddress} registerField={registerField} />
)}
</div>
<div role="status">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would make the region a live region, meaning I'd expect a screen reader to read the entire contents of this region at the first opportunity. Is that expected? Since there's quite a lot of location content, would we want to let the user navigate this themselves, since it's not really a "status" text?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that was the screen reader behavior that I expected. I had interpreted these portions of the ticket  

I want the screen reader to read out the correct order of the search page experience

and

Flow of the reader should follow the hierarchy of the page

to mean that the screen reader should read the about text and then the locations text.

You’re right that it is a lot of content, and I don’t personally use a screen reader, so I could be missing something. I will check in with product/design about your concerns and then get back to you.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already verbally talked about this in a meeting yesterday. However, for posterity’s sake, I wanted to note that I checked in with design/product yesterday and there is a new ticket for the updated screen reader implementation.

<p>{t('in_person_proofing.body.location.location_step_about')}</p>
{locationsContent}
<BackButton onClick={toPreviousStep} />
<div aria-live="polite">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain why we're making this a live region? I'm not sure I follow from the ticket or pull request description how this is related to screen reader hierarchy.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I see some of the references in the ticket to an earlier Slack thread. In my mind, I might expect there to be some announcement of a change in the page content, but more brief in terms of "Page updated" or "X results found", not announcing all of the new page content as live content.

@eileen-nava
Copy link
Copy Markdown
Contributor Author

I am closing this PR because we made a new ticket with the preferred screen reader behavior. The new PR is #7500.

@eileen-nava eileen-nava deleted the em/7817-screen-reader branch December 20, 2022 16:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants