Skip to content
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

Screen Reader Accessibility / WCAG Compliance #313

Open
stvnbash opened this issue Jun 20, 2022 · 2 comments
Open

Screen Reader Accessibility / WCAG Compliance #313

stvnbash opened this issue Jun 20, 2022 · 2 comments

Comments

@stvnbash
Copy link

Does TypeIt maintain the accessibility of my page for people who use assistive technologies, such as screen readers? I notice each character is split into it's own string inside of a Span element.

@alexmacarthur
Copy link
Owner

Hi, @stvnbash. Thanks for calling this out. I had assumed that even though characters were inserted as individual nodes, screen readers would be able to read correctly. This isn't accurate. A soon-to-be-upcoming version will address this via dynamically updating an aria-label attribute on the root element (this is how I'm currently approaching the problem -- let me know if you have any feedback on that).

@evankford
Copy link

@alexmacarthur I like the aria-label method. I'm just not sure how screen readers re-read as the label updates.

Personally, I think there are two different accessibility challenges:

  1. Pure, non-interactive animations (no change on user input) – if people want accessibility (like me) with a pure script of animating text, they should add an aria-label to the whole element with a full string of the text to animate.
  2. Dynamically updating elements (say something that types a custom message based on a checkbox). I think it makes sense to update the aria-label after .type() finishes typing the whole text.

Because these are so different, should this be something that happens by default or with a setting? I feel like constantly changing aria-label may clutter screen-readers' scripts.

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

No branches or pull requests

3 participants