Page Notice Accessibility
Best Practices
A page notice must appear above the main page content, and above the fold if possible.
A page must have only one page notice visible at any time.
Page notice must not rely on colour alone to convey meaning or tone.
Page notice should use an icon to further assist conveying meaning & tone.
Page notice may optionally contain a button to dismiss and hide the notice.
Page notice may optionally contain any number of call to action links or buttons.
Interaction Design
Keyboard
A high-priority attention notice must receive keyboard focus if rendered on the server. Low-priority notices, such as confirmation and information, should not receive focus.
A high-priority notice rendered on the client may receive focus when it contains an action that helps resolve the issue.
Screen Reader
Critical error notices must be announced on page load (achieved via focus management).
All client-side changes must be announced (achieved via live-region for non critical notices).
Page notice must be available in screen reader list of regions or landmarks.
Pointer
Clicking or tapping a notice action activates its link or button.
ARIA Reference
| Attribute | Description |
|---|---|
| role="region" | Exposes the notice as a navigable region. |
| aria-label / aria-labelledby | Names the notice region. |
| aria-live | Announces non-critical client-side notice updates. |