purple = incomplete thoughts
Adam Butterworth (Deactivated) Thoughts?
Messaging UI is currently a bit of a mess, and uncoordinated between business areas. Example:
Discovery:
...
Course Home:
...
Course Learning Unit:
...
Location
Most pages:
Above header?
Below header?
Above the footer (toast)?
Course outline page:
Above outline
Right sidebar?
??
Toasts
Dismissible?
Close button style?
Color scheme used for different message types (semantics and locations)
Inline link styling also differs within message types
Icon sizes
Icons enclosed in message rectangle, or can overwrite the edges?
Vertical spacing is a bit variable
Widths are variable
Not following header or main body margins
...
A11y-related UX considerations
User scenarios
Blind user
— needs to “bump into” messages currently
Semantic structure
Noticeability
Low-vision user
Noticeability
Completeness
User has speed-of-reaction issues (dexterity, mobility, cognitive)
Use of timers, where a message appears and then disappears after some number of seconds, presents accessibility issues. What if the learner didn’t notice the message while it was up? What if they were not able to respond in time (they may be a mouse/trackball user, but move very slowly). If they’re a keyboard-only user, will they be able to tab or jump to the message before it disappears? It’s best not to use timers at all, but if it makes sense to use timers, there should be a way to get back to the message that disappeared to soon.
Proposed Page Structure
This structure introduces no new visual elements, but only semantic containers. Some regularization of the visual appearance of different message types within the container is assumed.
...
Is it possible to anchor toasts in the proposed top-of-page list structure yet still show them at the bottom of the viewport? I assume so.
What role is a status update? We could conceivably have more roles in Paragon and map them to the smaller number of roles given by ARIA. Possible roles:
Message (role=”note”)
Opt-in legal notification (role=”dialog” aria-modal=”false”)
Status update (role=”status”)
Reminder (role=”alert”)
Error message (role=”alert”)
I’m suggesting changing the regular SkipNav link in the header to jump to an <a> target inside the <main> instead of directly to the <main>. This is consistent with a WCAG 2.1 -style stricter interpretation of only allowing focus to land on things that are intended to take focus.
How urgent should legal disclosures be? Variable?
Messages in context
On blur vs. on submit
Messages referring to relevant downstream items
With links?
Related articles
Filter by label (Content by label) | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Page Properties | ||
---|---|---|
| ||
|