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.
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.
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 :).