Heliodore Brand manual · v1.0 EN PDF Download kit

23 · WCAG 2.2 AA is the floor; the goal is higher

Accessibility

Heliodore is used by an exhausted doctor and read by a patient with poor eyesight. Accessibility is not an extra: it is the main design requirement.

Perceive

Contrast, size, reflow and text alternatives. Nothing depends on color, sound or shape alone.

Operate

Everything works with a keyboard and with one finger. 44 px targets, visible focus, no complicated gestures and no required dragging.

Understand

Plain language, messages that say what happened and what to do, and predictable behavior. An error never blames.

Review checklist

Check what your screen meets. Each item points to where the rule lives in this manual.

  • See rule
  • See rule
  • See rule
  • See rule
  • See rule
  • See rule
  • See rule
  • See rule
  • See rule
  • See rule
  • See rule
  • See rule

Key criteria and how they are met

WCAG 2.2 criterionHeliodore rule
1.4.1 Use of colorAn icon with its own shape and a word in every state
1.4.3 and 1.4.11 Contrast4.5:1 for text and 3:1 for components; yellow is never text on a light background
1.4.4 and 1.4.10 Zoom and reflowUp to 200% and a 320 px width without losing content
1.4.12 Text spacingContainers grow with the text; no fixed heights
2.4.7 and 2.4.11 FocusA visible 3 px ring that fixed bars never cover
2.5.7 DraggingMoving an appointment can also be done with “Change the time”, without dragging
2.5.8 Target size44 px, above the 24 px minimum
3.3.1 and 3.3.3 ErrorsText next to the field, what happened and how to fix it
3.3.7 Redundant entryInformation already given is never asked for again (for example, the national ID number, or cédula)
3.3.8 Accessible authenticationPasting and password managers work; no memory tests

What a screen reader says

ElementShould be announced as
Agenda row“Appointment, 9:00 a.m., Example Patient A, checkup, confirmed”
Icon button“Print confirmation, button”
Field with an error“Phone, text field, invalid. The phone number is missing digits.”
Switch“Remind one day before, switch, on”
Notice“Appointment saved for Tuesday at 9:00 a.m.” (announced without moving focus)

Keyboard

Tab and Shift+Tab
Move through the controls in visual order.
Enter and Space
Activate buttons and checkboxes.
Arrow keys
Change the time in the list of open slots and the option within a group.
Esc
Closes dialogs and returns focus to the button that opened them.
Shortcuts
Only with a modifier key, never single letters, and with an option to turn them off.