Accessibility

Project Budget targets WCAG 2.2 Level AA across every public page and inside the app. What's built in, what's still rough, and how to report a problem.

Money is universal — the tools to manage it should be too. Accessibility issues are treated as bugs, not feature requests, and get priority over new work.

Standards we target

  • WCAG 2.2 AA for both the marketing site and the in-browser app.
  • Touch-target floor of 44 by 44 CSS pixels for every interactive element, with documented opt-outs for compact data controls.
  • Contrast of 4.5:1 minimum for body text, 3:1 for large text and meaningful UI surfaces. Audited in both light and dark themes.

What's built in

Perceivable

  • Semantic HTML throughout. Landmark elements (header, nav, main, footer) wrap their respective regions.
  • All images carry alt text. Decorative SVG icons use aria-hidden="true".
  • Color is never the sole signal. Available balances pair color with a sign and a number.
  • Light and dark themes with a no-flash inline script. prefers-color-scheme is the default when no preference is stored.

Operable

  • Skip-to-content link as the first focusable element on every page.
  • Visible focus rings on every interactive element. Focus order matches reading order.
  • Modals trap focus and close on Escape.
  • Inline table editors expose aria-label on every input.
  • The right-rail TOC on docs pages updates the active link via IntersectionObserver as you scroll.

Understandable

  • Plain-English copy. Banking jargon is glossary-linked at /glossary/.
  • Help tooltips on numeric inputs and budget terms (disable if they distract).
  • Predictable interaction patterns: same modal shape for create / edit / delete; same column order in every register.
  • Form errors describe what's wrong and how to fix it.

Robust

  • HTML validates against the WHATWG spec.
  • ARIA only used where native HTML semantics aren't enough — aria-current on active nav, aria-expanded on toggles, aria-live on the toast stack and the "last saved" indicator.

Known issues

  • D3 charts are presented as img-roled SVG with an aria-label. The companion data table below each chart is the screen-reader friendly view of the same data.
  • The drag handle for the resizable app sidebar is keyboard-operable (arrow keys when focused) but not yet exposed as a slider role.
  • Reduced motion is honored by the framework defaults; we are still auditing individual transitions in the app shell.

How to report a problem

Open an issue at github.com/jonajinga/project-budget/issues with the page URL, your browser, and what you were trying to do. If the issue is visual, a screenshot helps.

Assistive technology tested

  • VoiceOver on macOS (Safari, Chrome).
  • NVDA on Windows (Firefox, Chrome).
  • Keyboard-only navigation across every public page and every primary in-app flow.

Technical specifications

  • HTML5 + ARIA where the native semantics fall short.
  • Vanilla CSS with custom properties. No CSS-in-JS, no runtime style injection.
  • Alpine.js for state. No virtual DOM, no client-side router.
  • Charts: D3 v7 rendered to SVG with explicit role="img" and aria-label.

This statement

Last reviewed: . We re-review the page whenever a major release lands.

Loading…