

One way around this would be to first clear all the contents of the live region (in this case, set the innerHTML of both and to be empty), and then inject the new content. For instance, when the clock changes from "17:33" to "17:34", assistive technologies will only announce "34", which won't be very useful to users. On subsequent calls, only the parts of the content that changed compared to the previous content will be announced. The first time the function executes, the entirety of the string that is added will be announced. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".' } } function renderPlanetInfo ( planet ) /* first run */ updateClock ( ) /* update every minute */ setInterval (updateClock, 60000 ) It is named after the Roman goddess of love and beauty.' } ,ĭescription : 'Earth is the third planet from the Sun and the only object in the Universe known to harbor life.' } ,ĭescription : 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury.

It is named after the Roman deity Mercury, the messenger to the gods.' } ,ĭescription : 'Venus is the second planet from the Sun. Basic example: Dropdown box updates useful onscreen informationĭescription : 'Mercury is the smallest and innermost planet in the Solar System. As such, it can be extremely annoying and disruptive and should only be used sparingly.Īs aria-live="off" is the assumed default for elements, it should not be necessary to set this explicitly, unless you're trying to suppress the announcement of elements which have an implicit live region role (such as role="alert"). Generally, a change to an assertive live region will interrupt any announcement a screen reader is currently making. The screen reader will speak changes whenever the user is idle.Īria-live="assertive" should only be used for time-sensitive/critical notifications that absolutely require the user's immediate attention. Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. Normally, only aria-live="polite" is used. This attribute is by far the most important. A live region is explicitly denoted using the aria-live attribute.Īria-live: The aria-live=POLITENESS_SETTING is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off, polite or assertive. Simple content changes which are not interactive should be marked as live regions. Dynamic content which updates without a page reload is generally either a region or a widget.
