duo-labs / webauthn.io

The source code for webauthn.io, a demonstration of WebAuthn.
https://webauthn.io
BSD 3-Clause "New" or "Revised" License
645 stars 120 forks source link

Accessibility on webauthn.io #82

Closed Y-Kelly closed 1 year ago

Y-Kelly commented 1 year ago

Issue being reported by the Microsoft Edge team.

Steps to reproduce:

  1. Turn on NVDA (or any screen reader like Narrator)
  2. Navigate to https://webauthn.io using Microsoft Edge
  3. Click/Activate the Register button on the page
  4. Observe the error message is not announced by the screen reader

Our developer investigated and found that this issue reproduces with all screen readers because the web page has not marked the error box with the aria-live=polite attribute and the browser doesn’t fire a live region changed event to notify the screen readers that some piece of content was modified.

Here's more info about ARIA live regions: [ARIA live regions - Accessibility | MDN (mozilla.org)

MasterKale commented 1 year ago

@Y-Kelly Thank you for reporting this, I'll keep this on my radar as I personally try to be mindful of accessibility. I'll admit live regions are a new one for me, I'll give that MDN link a thorough read-through.

I can't commit to an ETA though, as I work on this When I Can 😅

MasterKale commented 1 year ago

@Y-Kelly I just merged and deployed #86, which should resolve this issue. I tested with macOS' VoiceOver and noticed it reporting the alerts as they appeared. Can you retest with https://webauthn.io on your end and let me know if it fixed it for you all over there too?

Y-Kelly commented 1 year ago

@MasterKale I just tested with Narrator and it looks fixed for me too! Thanks!

I'll let the team know and reach out if there is anything else.