Page Comparison

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