typeit
typeit copied to clipboard
Screen Reader Accessibility / WCAG Compliance
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.
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).
@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:
- 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.
- 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.