3

Recently I've been playing around with a lot of WebGL and <canvas> and I was wondering if there were best practices to making these accessible? Specifically if I have some fancy text animations that fly in and out, is there a way to let screen readers pick that information up dynamically?

I was thinking of using <aria-live> attribute and timing/injecting the appropriate text into a <div> to let screen readers know what is going on (similar to what was mentioned in this question) but I was uncertain if there were better practices for this?

I know <canvas> itself has accessibility issues that w3 is trying to address.

Currently I'm using three.js to play around with things if people want context.

Community
  • 1
  • 1
aug
  • 11,138
  • 9
  • 72
  • 93
  • Here is a dupe, without answer, but the comment section may give you some points :http://stackoverflow.com/q/34347813/3702797 apparently, none of screen readers do support canvas tag so you might be able to just append your text content in its innerHTML won't work for tts on usual browsers though. – Kaiido Apr 06 '16 at 23:34
  • Ahh hmm yeah that does seem very similar. I was specifically curious about WebGL though (but I guess you can bundle that with animation) and not sure if there are specific practices for that? I may or may not close this as a duplicate in favor of that question. – aug Apr 06 '16 at 23:39
  • You can't there is no answer... But both webGL and 2dcontext have the same issues with this yes. – Kaiido Apr 06 '16 at 23:41
  • Was there ever a resolution to this? – abritez Mar 15 '17 at 15:51
  • @abritez unfortunately no :( I never had a chance to play around with it either. Feel free to upvote if you are interested in an answer as well though. I do think `aria-live` is the best way to go considering. – aug Mar 16 '17 at 19:04
  • i just found this library https://github.com/pmndrs/react-three-a11y which try to bring a set of tool to include hidden information for screen reader. I have not personally tested but seams to be a good approch. – Yanis-git May 31 '21 at 14:40

0 Answers0