Goal
Ensure that all functionality and content are independent of time limits — meaning users can read, interact, and complete tasks without being rushed by automatic timeouts or timed events.
Key Points
- No part of the content should disappear, change, or become inaccessible due to a time restriction.
- If timing is necessary (like a live auction or real-time game), provide alternatives or an untimed mode.
- Beneficial for users with:
- Motor disabilities (slower interaction speed)
- Cognitive impairments (need more time to read/understand)
- Screen reader users (navigating non-visually takes longer)
Short Summary
Users must be able to complete actions at their own pace. If time-based behavior is essential, an alternative non-timed option or manual control must exist.
Example Issue and Fix
Message disappears after 5 seconds
Fail
<div x-data="failTimingControl" class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<div>
<button x-on:click="activate" id="showMessage" class="bg-blue-600 text-white px-4 py-2 rounded">Show message</button>
<div x-show="show" id="alert" class="mt-4 bg-yellow-100 text-yellow-800 px-4 py-2 rounded">
Your session will expire soon!
</div>
</div>
</div>
Your session will expire soon!
Pass
<div x-data="passTimingControl" class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<div class="space-y-4">
<button
@click="activate"
class="bg-blue-600 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
>
Show message
</button>
<div x-show="show" class="bg-yellow-100 text-yellow-800 px-4 py-2 rounded flex items-center justify-between">
<span>Your session will expire soon!</span>
<button
@click="deactivate"
class="text-sm text-blue-700 hover:underline ml-4"
>
Dismiss
</button>
</div>
</div>
</div>
Your session will expire soon!
Quick Checklist
- No part of the content disappears due to a time limit
- Users can manually dismiss or control visibility
- No auto-refresh or session expiration without warning
- If timing is required, offer an untimed mode or pause/extend option
- Use CSP-safe script initialization (no inline JS or event attributes)