title: How to make WebGL and <canvas> accessible with dynamic content?
body: <p>Recently I've been playing around with a lot of WebGL and <code>&lt;canvas&gt;</code> 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? </p>
  
  <p>I was thinking of using <code>&lt;aria-live&gt;</code> attribute and timing/injecting the appropriate text into a <code>&lt;div&gt;</code> to let screen readers know what is going on (similar to <a href="https://stackoverflow.com/questions/3670570/getting-screen-reader-to-read-new-content-added-with-javascript">what was mentioned in this question</a>) but I was uncertain if there were better practices for this? </p>
  
  <p>I know <a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas" rel="nofollow noreferrer"><code>&lt;canvas&gt;</code> itself has accessibility issues that w3 is trying to address</a>. </p>
  
  <p>Currently I'm using three.js to play around with things if people want context.</p>