typeit icon indicating copy to clipboard operation
typeit copied to clipboard

Screen Reader Accessibility / WCAG Compliance

Open stvnbash opened this issue 2 years ago • 2 comments

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.

stvnbash avatar Jun 20 '22 01:06 stvnbash

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 avatar Jul 10 '22 22:07 alexmacarthur

@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.

evankford avatar Aug 03 '22 18:08 evankford