WAI-ARIA: aria-atomic (Property)
WAI-ARIA: aria-atomic (Property)
Description
Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
Both accessibility APIs and the Document Object Model [dom] provide events to allow the assistive technologies to determine changed areas of the document.
When the content of a live region changes, user agents SHOULD examine the changed element and traverse the ancestors to find the first element with aria-atomic set, and apply the appropriate behavior for the cases below.
- If none of the ancestors have explicitly set aria-atomic, the default is that aria-atomic is false, and assistive technologies will only present the changed node to the user.
- If aria-atomic is explicitly set to false, assistive technologies will stop searching up the ancestor chain and present only the changed node to the user.
- If aria-atomic is explicitly set to true, assistive technologies will present the entire contents of the element, including the author-defined live region label if one exists.
When aria-atomic is true, assistive technologies MAY choose to combine several changes and present the entire changed region at once.
Browser Compatibility For aria-atomic
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaAtomic | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
Screen Reader support For aria-atomic
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey the false value by only announcing content that has changed | partial (1/2) | partial (1/2) | supported | supported | partial (1/2) | partial (1/2) | supported | supported | partial (1/2) | supported | supported |
| MUST convey the true value by announcing all content | supported | supported | supported | supported | supported | supported | supported | supported | partial (1/2) | supported | supported |
aria-atomic Example
HTML Example
<div aria-live="polite" aria-atomic="true">
<h3>the current score is</h3><span>23/0 after 5 Overs</span>
</div>Characteristics
Used in roles
- All elements of the base markup
Value
- True/False
Value representing either true or false. The default value for this value type is False, unless otherwise specified. - False (default)
- Assistive technologies will present only the changed node or nodes.
- True:
- Assistive technologies will present the entire changed region as a whole, including the author-defined label if one exists.
Semantic HTML
No HTML element equivalent.
Reference
- W3C (opens new window)
- A11Y Support
- MDN Web Docs
Hi Raghavendra, great write up. I am facing an issue where the input label is announcing itself each time i enter a character in input field.
label : account number
input field:____________
when i enter one char in input field (example :1 ) the label “account number” announces itself. Again when i enter another char /number in input field ,the label is announced again. any solution ( using Jaws reader 2021) chrome browser
Hello,
I need to investigate code to see what is causing this problem. I do not think a standard input with right labelling should cause this behavior with screen reader. I am using JAWS & do not see the same behavior. Is there a page I can look this up?