问题
When creating HTML5 animations, is there a technique that can be used to "synchronize" the alternate text so that screen-readers reads the given element that appears the moment it appears (or triggered by an event / timeline-driven)?
Ideally, something that I could invoke with GSAP (using it as the animation library for my projects).
Or could such a thing just make the screen-reader speak and pause repeatedly too often, ending up sounding more frustrating than actually enhancing the experience of the user? Would I be better off just to paste essentially a "script" of all the animation that is going on, on one line in the alt="..." attribute?
EDIT:
This question is mostly targetted for HTML5 ads - so I'm assuming there has to be a non-invasive way to screen-read the events happening in an animation without requiring the user to actually click the ad to gain focus (which would involuntarily open up the link the ad refers to). At the same time, wouldn't it be some sort of user violation to "force focus" on the ad's dynamic text if the user is in middle of reading an article / only interested to another area of the page? This raises so many other questions!
回答1:
If you create a live region with aria-live like this,
<div role="region" id="announce" aria-live="polite">
And update the content inside with a JavaScript on the right time, screen reader will announce the content whenever it gets updated.
Here's more information on live region.
https://www.w3.org/TR/2008/WD-wai-aria-practices-20080204/#LiveRegions
If you want to hide the content for sited users, you can use this technique.
https://webaim.org/techniques/css/invisiblecontent/
Maybe you can also create a button to turn on/off the announcement, so screen reader users can choose if they want to hear the description in real time or not.
来源：https://stackoverflow.com/questions/34347813/is-there-a-standard-way-to-provide-alt-text-for-screen-readers-on-html5-ads