aria-atomic & aria-relevant on aria-live regions

Description

This test case demo is used to make screen reader users aware of the message input format restrictions of 280 characters or less (as an example... like tweet limits). The characters remaining count updates visually as the user types text so we use WAI-ARIA Live Regions to "speak" the remaining character limits to screen reader users also. The test case uses the defaults then explores advanced options of Live Regions with the aria-atomic and aria-relevant attributes.

OS/UA/AT Support

Support Notes

Works as expected in VoiceOver for OS X. E.g. aria-relevant=additions prevents an entire live region with aria-atomic=true from being announced.

NVDA/Firefox & JAWS/IE does not respect aria-relevant=additions, it will not override aria-atomic=true and instead announces the entire region.

VoiceOver on iOS ONLY works with ASSERTIVE live regions :(

aria-relevant=additions does not override aria-atomic=true in VO iOS but it does work correctly in VO OS X

Windows 7 + Firefox 29.0.1 + JAWS 14 is BUGGY where JAWS announces the entire accessible name for the input each time an event fires rather than just announcing the aria-live region.

Android 4.4.2 + Chrome 34.01847.114 + TalkBack 3.5.1 does NOT respect aria-atomic or aria-relevant, instead TalkBack speaks the entire live region each time the event fires.

Notes

aria-relevant's default value is "additions text" so removals are not spoken by default

Firefox for Android does not fire onchange or onkeyup events to make the character count change while the user is typing so you have to use the oninput event which should be "device independent". IE 8 and below don't work with oninput so you have to use their proprietary event onpropertychange unless you only care about IE 9 and above :).

Message input info uses aria-live=polite only





Characters remaining: 280

Message input info uses aria-live=polite, aria-atomic=false





Characters remaining: 280

Message input info uses aria-live=polite, aria-atomic=true





Characters remaining: 280

Message input info uses aria-live=polite, aria-atomic=true, aria-relevant=additions





Characters remaining: 280

Message input info uses aria-live=assertive





Characters remaining: 280

Message input info uses aria-live=assertive, aria-atomic=true, aria-relevant=additions





Characters remaining: 280

Message input info uses aria-live=polite then switches to aria-live=assertive at 25% characters remaining





Characters remaining: 280