Accessibility and design

Design principles

• Light, Dark, Muted Light and Muted Dark themes.
• Roboto type with system-font fallbacks.
• Clear navigation, card boundaries and generous spacing.
• Visible focus indicators and controls sized for touch and keyboard use.
• Charts paired with written summaries and data tables.
• Colour never used as the only way information is communicated.

Keyboard and screen-reader support

• A skip link moves directly to the main content.
• App navigation uses a standard navigation list and normal keyboard Tab order rather than specialised menu-widget controls.
• The current section is identified, selecting a destination moves focus to its content, and Escape closes the mobile menu and returns focus to its button.
• Entry focus follows the visible emotion levels, reflection controls, always-visible optional note and Record action. Reset returns focus to the Step 1 heading.
• Hidden controls are removed from the visual layout and accessibility tree.
• Intensity uses labelled decrease and increase buttons with announced values instead of requiring a screen-reader slider gesture.
• The mobile in-flow action area uses the same Record button rather than adding an overlay or duplicate control.
• Logs, Charts and Maintenance sections expand when their tab opens. Log filters have visible labels and an announced result count.
• Dense log tables use keyboard-focusable horizontal scrolling rather than cramped text wrapping. Emotion colours are supplementary to the written emotion names.
• Tables include captions and column headings. Less-dense tables become labelled row cards on small screens; log tables retain columns and expose labelled horizontal scrolling.
• Charts include visible keys, written summaries and matching data tables. Shared chart images include the displayed key.

Responsive behaviour

On smaller screens, Entry, Review Logs, Review Charts, Maintenance and the theme selector collapse into one header Menu button. The selected entry actions stay reachable at the bottom of the viewport. Chart controls expose only the picker relevant to the selected day, week or month view.