Content
View differences
Updated by Behrokh Satarnejad 3 months ago
**As a** screen reader user and/or keyboard-only user **As** a \[enter role of user\]
**I want to** perceive and operate flash messages (including reading, navigating, and dismissing them) \[enter objective\]
**so that** important feedback is accessible and I’m not blocked or confused while completing my task. \[enter desired result\]
**Acceptance criteria**
**1\. Screen reader announcement of dynamic messages:**
**WCAG 4.1.3 — Status Messages**
* Flash messages that appear dynamically are announced automatically by assistive technologies.
* Non-critical messages use a polite announcement pattern.
* Error or urgent messages use an assertive announcement pattern. <br>
**2\. Keyboard accessibility for controls inside messages** **Technical notes**
**WCAG 2.1.1 — Keyboard**
**WCAG 2.1.2 — No Keyboard Trap**
**WCAG 2.4.3 — Focus Order**
* Any interactive element inside a flash message (close button, action link, etc.) is reachable by keyboard.
* Controls can be activated using standard keyboard interaction.
* Focus order remains logical.
* Dismissing the message does not trap or unexpectedly move focus. <br>
**3\. Focus behavior must not disrupt the user** **Permissions and visibility considerations**
**WCAG 3.2.1 — On Focus**
**WCAG 2.4.3 — Focus Order**
* Flash messages do not automatically steal focus unless required for a blocking error. _To whom is this feature visible?_
* Closing a flash message returns focus to a sensible location.
**4\. Timing and auto-dismiss accessibility**
**WCAG 2.2.1 — Timing Adjustable**
* If flash messages auto-dismiss:
* Users have enough time to read them.
* Dismiss timers pause while focused or interacted with.
* Critical information _When is it not removed before it can be perceived. visible?_
**5\. Minimum contrast for message text and controls** **Translation considerations**
**WCAG 1.4.3 — Contrast (Minimum)**
* Text inside flash messages meets minimum contrast requirements.
* Icons conveying meaning also meet contrast requirements where applicable.
**6\. Accessible names for controls**
**WCAG 4.1.2 — Name, Role, Value**
* Close buttons _Key terms and action controls have clear, accessible names. phrases in the key languages_
**Technical notes** **Out of scope**
* Implement live regions:
* polite announcements for informational/success messages
* assertive announcements for errors
* Ensure:
* no `display:none` or `aria-hidden` on active message containers
* interactive elements are real buttons/links <br>
**I want to** perceive and operate flash messages (including reading, navigating, and dismissing them)
**so that** important feedback is accessible and I’m not blocked or confused while completing my task.
**Acceptance criteria**
**1\. Screen reader announcement of dynamic messages:**
**WCAG 4.1.3 — Status Messages**
* Flash messages that appear dynamically are announced automatically by assistive technologies.
* Non-critical messages use a polite announcement pattern.
* Error or urgent messages use an assertive announcement pattern.
**2\. Keyboard accessibility for controls inside messages**
**WCAG 2.1.1 — Keyboard**
**WCAG 2.1.2 — No Keyboard Trap**
**WCAG 2.4.3 — Focus Order**
* Any interactive element inside a flash message (close button, action link, etc.) is reachable by keyboard.
* Controls can be activated using standard keyboard interaction.
* Focus order remains logical.
* Dismissing the message does not trap or unexpectedly move focus.
**3\. Focus behavior must not disrupt the user**
**WCAG 3.2.1 — On Focus**
**WCAG 2.4.3 — Focus Order**
* Flash messages do not automatically steal focus unless required for a blocking error.
* Closing a flash message returns focus to a sensible location.
**4\. Timing and auto-dismiss accessibility**
**WCAG 2.2.1 — Timing Adjustable**
* If flash messages auto-dismiss:
* Users have enough time to read them.
* Dismiss timers pause while focused or interacted with.
* Critical information
**5\. Minimum contrast for message text and controls**
**WCAG 1.4.3 — Contrast (Minimum)**
* Text inside flash messages meets minimum contrast requirements.
* Icons conveying meaning also meet contrast requirements where applicable.
**6\. Accessible names for controls**
**WCAG 4.1.2 — Name, Role, Value**
* Close buttons
**Technical notes**
* Implement live regions:
* polite announcements for informational/success messages
* assertive announcements for errors
* Ensure:
* no `display:none` or `aria-hidden` on active message containers
* interactive elements are real buttons/links