Provide an accessible alert method for content changes that occur without explicit user knowledge

Media Type Web > ARIA and Dynamic Content
State Active
Advisory No

Many dynamic applications update content based on the timing or indirect triggering of user interface elements such as those found in forms. For example, making a selection in a combo box (drop down field) may cause content in a div located somewhere else on the page to be updated. Another example is when incoming instant messages arrive but the user is focused in the "text to send" field. Many users of assistive technology including users of screen readers and screen magnifiers may not be aware of the update content elsewhere on the screen. When users are unaware of the changes, users may miss the updated content or the features that it contains.

Compliant Example

<!-- compliant code snippet for playing audio beep when new instant message arrives
-->
<script type="text/javascript">
...
function displayIncoming()
{
  ...
  document.getElementById("beep').src="beep.wav";
}
...
</script>
...
Incoming messages will be display in the conversation history window following the Send
button, Use your browser's modifier key plus 'k' to move focus to the conversation
history. <br />
<label for="entry">Enter Message:</label> <input
id="entry" type=text /> <button
onclick="...">Send</button>
<bgsound src="#" id="beep" autostart="TRUE">
<div title="conversation history" accessKey="k" tabIndex=0
id="IncomingMessages" style="border:solid; border-width:thin;
border-color:blue;">
<span id="msg1"></span>
<span id="msg2"></span>
...
</div>
...

<!-- Example 2 
An application that updates a non-adjoining div area when a selection is made in a combo
box (drop down list) and provides an alert method to alert users of this change and
relationship. -->
<script type="text/javascript">

...
function updateAvailability() {
// AJAX call to server for availability, full code not shown
o = xmlHttp.responseXML.documentElement.getElementsByTagName("cars");
for (i=0,i<o.length,i++) {
 if (o[i].firstChild.nodeValue > 0) {
document.getElementById("availability").innerHTML = o[i].item(1).nodeValue; }}
}
...
</script>
...
When a vehicle type is selected from the drop down list, the availability of the vehicle
type will appear in the availability field which can be accessed your browser's modifier
key and 'k'.
<select
onchange="updateAvailability();"><option>Sedan</option><option>SUV</option><option><mini-van</option></select>
...
<div accessKey="k" tabIndex=0 title="Availability List"
id="availability" style="border:solid;border-width:thin;
border-color:blue;"></div>
...

<!-- ARIA EXAMPLE -->

<style type="text/css">
.offScreen {
  position: absolute;
  left: -1000px;
  top: 0px;
  overflow:hidden;
  width:0;
}
</style>

<script type="text/javascript">
...
function updateAvailability()
{
  ... //Code that updates the availability of vehicle type based on the selection from the
combobox 
  
  //The alert informs that an update was made. 
  document.getElementById('al').style.display='block';
}
...
</script>

<div id="al" role="alert" aria-live="polite"
style="display:none" class="offScreen">The availability number has
been updated. Use your browser's modifier key and 'K' to access the updated
field.</div>
<select
onchange="updateAvailability();"><option>Sedan</option><option>SUV</option><option><mini-van</option></select>
...
<div accessKey="k" tabIndex=0 title="Availability List"
id="availability" style="border:solid;border-width:thin;
border-color:blue;"></div>

Non-Compliant Example

<!-- Non-compliant code snippet for playing audio beep when new instant message arrives
-->
<script type="text/javascript">
...
</script>
...
Enter Message:<input id="entry" type=text /> <button
onclick="...">Send</Button>
<div id="IncomingMessages" style="border:solid; border-width:thin;
border-color:blue;">
<span id="msg1"></span>
<span id="msg2"></span>
...
</div>
...

<!-- example 2 
An application that updates a non-adjoining DIV area when a selection is made in a combo
box (drop down list).  No alert method is providing alerting the users of this change or
relationship. -->
<script type="text/javascript">

...
function updateAvailability() {
// AJAX call to server for availability, full code not shown
o = xmlHttp.responseXML.documentElement.getElementsByTagName("cars");
for (i=0,i<o.length,i++) {
 if (o[i].firstChild.nodeValue > 0) {
document.getElementById("availability").innerHTML = o[i].item(1).nodeValue; }}
}
...
</script>
...
<select
onchange="updateAvailability();"><option>Sedan</option><option>SUV</option><option><mini-van</option></select>
...
<div id="availability" style="border:solid;border-width:thin;
border-color:blue;"></div>
...

Developers should alert users of screen readers of content changes that occur without the user explicitly pressing enter, space, tab or shift+tab . This can be accomplished using on-screen text, the title attribute in conjunction with off-screen text to indicate that a content change will occur, what triggers it, and how the user can reach the change via the keyboard. For example, when a user receives an incoming instant message, in addition to the message visually appearing the user might hear a sound indicating a new message. In this case focus should not automatically move to the new message area as the user may want to enter a message. Additionally, instruction text should also be added telling the user that incoming messages will appear in a specific area and that a particular hotkey/shortcut key can be used to move focus to that area to review the messages.

In addition, when pressing enter, space, tab, or shift+tab and focus is not shifted such as when sending an instant message (the focus remains in the send text field), the user should also be alerted through both a visual and auditory way that content has changed (i.e the message was successfully sent).

This can also be achieved through an ARIA live region or the "alert" special live region: role="alert". If an alert is not appropriate, the ARIA controls attribute aria-controls can be used to inform users of assistive technology that this element controls another region on the screen. Assistive technology such as screen readers provide a keystroke to move to that area that is controlled by the current element.

In some contexts, such as the spontaneous appearance of a session timeout warning dialog, the movement of focus to the dialog can be supplemented with playing a system beep or other appropriate audio file. This would better call the user of assistive technology's attention to the dialog, particularly if a timely response is required. This can also be done using the ARIA role="alertdialog" which is a dialog that would announce the alert message and require the user to respond.

Organization Standards

§ 508-1194.22 Web Sites and Applications
- (l) Ensure scripts are accessible
- (n) Ensure electronic forms are accessible
Section 508 and 255 (Revised 2017)
- Chapter 3: Functional Performance Criteria
  - 302.2 With Limited Vision
  - 302.1 Without Vision
WCAG 2.0 Level A
- 4.1.2 Name, Role, Value
WCAG 2.1 Level A
- 4.1.2 Name, Role, Value

Other Mapped Standards

§ 508-1194.21 Software Applications and Operating Systems
- (l) Ensure usability of electronic forms
§ 508-1194.22 VA Testing Checklist - Web Sites and Applications
- (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
  - (l.2) Is keyboard focus visually and programmatically discernable?
    - (l.2.a) If there are forced focus changes, are they clearly indicated to users of assistive technology?
§ 508-1194.31 VA Testing Checklist - Web Functional performance criteria
- (a) At least one mode of operation and information retrieval that does not require user vision shall be provided, or support for assistive technology used by people who are blind or visually impaired shall be provided.
  - (a.13) If visual alerts are provided, are they also available in an auditory manner?
§ 508-1194.31 Functional performance criteria
- (a) Ensure access for blind and visually impaired
- (b) Ensure access for low vision users
47 CFR 14. Advanced Communication Services
- 47 CFR 14.21 Performance Objectives
  - (b) Accessible
    - (b)(2) All information necessary to operate and use the product
      - (b)(2)(i) Availability of visual information
BITV 2.0 (Priority I)
- 4.1.2 Name, Rolle, Wert
EN 301 549 v3.2.1 [beta]
- Chapter 9: Web
  - 9.4 Robust
    - 9.4.1 Compatible
      - 9.4.1.2 Name, role, value
HHS HTML 508 Checklist (Pre 2019)
- HHS Web 508 Checklist (p)
  - (16.2) Is the functionality of the content predictable, i.e. will a user experience contextual changes when unbeknownst to them?
KWCAG
- 4-1 - Ensure plug-ins are directly accessible
  - 4-1-1 - Ensure that the embedded content itself is accessible
NFB Certification
- Client Side Content Changes
Telecommunications Act Accessibility Guidelines
- 1193.43 Output, display, and control functions.
  - (a) Availability of visual information. Provide visual information through at least one mode in auditory form.
WCAG 1.0 Priority 1
- 08.1 Ensure programmatic elements such as scripts and applets are accessible
WCAG 1.0 Priority 2
- 06.5 Ensure dynamic content is accessible.
WCAG 2.2 Level A
- 4.1.2 Name, Role, Value

Severity
8 (red)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
in range of 1 to 10
Noticeability
7 ()
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
in range of 1 to 10
Tractability
7 ()
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
in range of 1 to 10

Provide an accessible alert method for content changes that occur without explicit user knowledge

Compliant Example

Non-Compliant Example

Organization Standards

Other Mapped Standards

Severity

Noticeability

Tractability