Disabilities Affected: Cognitive, Hearing, Mobility, Visual
Changes of context (like navigation, opening new windows, significant layout changes) should only be initiated by user request (e.g., activating a link or button) or a mechanism must be available to turn such changes off.
Why It Matters
This is a stricter version of “On Focus” (3.2.1) and “On Input” (3.2.2). At Level AAA, any change of context should ideally wait for explicit user activation. Automatic updates or changes, even if announced beforehand, can still be disorienting. Giving users full control over when context changes occur provides the most predictable experience.
Fixing the Issue
Design interactions so that significant changes only happen when the user explicitly activates a control designed for that purpose (e.g., clicking “Submit”, “Next Page”, “Open Settings”). Avoid automatic redirects, page refreshes that change content significantly, or components that trigger navigation/updates merely on selection or focus. If automatic changes are absolutely necessary, provide a user setting or control to disable the automatic behavior and require manual activation instead.
Good Code Example
Content updates only after explicit user action:
-
<input type="search" id="search-box" aria-label="Search products">
<button onclick="updateResults()">Search</button>
<div id="search-results"></div>
<script>
function updateResults() {
const query = document.getElementById('search-box').value;
console.log('Fetching results for:', query);
// Code to fetch and display results in #search-results div
// Context change (results appearing) happens only on button click.
}
</script>
Bad Code Example
Content automatically refreshes or navigates without explicit request:
-
<script>
// setInterval(function() {
// // Code to automatically fetch and insert new news items,
// // potentially changing the page layout significantly without user request.
// // At AAA, a mechanism to turn this off would be needed.
// console.log("Auto-refreshing feed...");
// }, 30000); // Refresh every 30 seconds
// function handleLoginSuccess() {
// // Immediately redirect without user clicking anything further
// window.location.href = '/dashboard';
// // Better AAA practice might involve showing a "Login Successful" message
// // with a link/button like "Go to Dashboard".
// }
</script>
