Mangfold i mai
Eric Eggert
📍 Wissen, Germany 🇩🇪
Live regions are a way to give users feedback on actions they have taken through the accessibility API.
Assistive technology has to be built to work with live regions.
Currently: Only screen readers.
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
change in content that is not a change of context, and that provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors
See the Pen Minimal Form by Eric Eggert (@yatil) on CodePen.
No need for live regions if the page reloads (as it is a change of context).
See the Pen Toggle Button by Eric Eggert (@yatil) on CodePen.
No need for live regions as an aria property is changed.
See the Pen Toggle Button by Eric Eggert (@yatil) on CodePen.
No need for live regions as an aria property is changed.
See the Pen Toggle Button by Eric Eggert (@yatil) on CodePen.
No need for live regions as an aria property is changed.
See the Pen Play/Pause Button by Eric Eggert (@yatil) on CodePen.
Is programatically determinable. (But also not read by screen readers.)
role="region") & propertiesLive regions can be used when:
aria-live
off (default)
polite: updates are presented at the next graceful opportunity: end of the current sentence or typing pauses
assertive: updates to the region have the highest priority and should be presented the user immediately
aria-atomicfalse (default): AT will present only the changed node(s)true: AT will present the entire changed region as a whole, including the author-defined label if one exists.aria-busyfalse (default): no expected updates for the elementtrue: the element is being updatedWhen aria-busy is true, AT may ignore changes to content and then process all changes made during the busy period as a single, atomic update when aria-busy becomes false.
aria-relevantadditions: Announce added nodesremovals: Announce removed nodestext: Announce text nodesall: equivalent to additions removals textDefault: additions text
alert, status, marquee, timer, log
Basically pre-configured aria live region property configurations.
role="status"Advisory information for the user that is not important enough to justify an alert; often but not necessarily presented as a status bar.
Defaults:
aria-live="polite"aria-atomic="true"role="alert"Messages that may be immediately important to users.
Defaults:
aria-live="assertive"aria-atomic="true"role="marquee"Non-essential information that changes frequently. Needs an accessible name.
Defaults:
aria-live="off"role="log"New information is added in meaningful order and old information may disappear.
Defaults:
aria-live="polite"role="timer"Contains a number which indicates an amount of elapsed time from a start point, or the time remaining until an end point.
Defaults:
aria-live="off"See the Pen Play/Pause Button by Eric Eggert (@yatil) on CodePen.
Is programatically determinable and also read by screen readers.
Example: Carousel page confirmation
AT might decide that your message is outdated & discard it.
Do not add and update a live region immediately. Example: Immediate Live Regions
innerHTML shortcuts Replacing all of the content might look the same visually but can be a different experience in a screen reader.
Example: Chat
Avoid:
display: nonevisibility: hiddenhidden attributeUse:
.visually-hidden {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
Note: This also means that you want to remove the text from the live region after a short delay to avoid users being able to navigate to it.
Do not:
const notifications = document.getElementById('notifications');
document.addEventListener('visibilitychange', () => {
let setting = document.hidden ? ['none', 'off'] : ['status', 'polite'];
notification.setAttribute('role', setting[0]);
notification.setAttribute('aria-live', setting[1]);
});
Is the message is important enough to be announced at all?
Would a user want to interact with the announced element? If so, setting the focus can be the right thing to do.
Example: Carousel direct page choice
You can initialize general purpose region(s) on page load:
var demo = document.createElement("div");
demo.classList.add('visually-hidden');
demo.innerHTML = '' +
'';
document.querySelector('body').appendChild(demo);
Sometimes you want to use an audio cue (“earcon”) instead of a screen reader announcement.
Make sure equivalent information is available visually.
Example: WCAG Quick Reference
role="alert"/role="status" are your friends (and sensible defaults)Eric Eggert