Accessibility

Project Budget targets WCAG 2.2 Level AA across every public page and inside the app. The list below covers what's built in, what's known to be incomplete, and how to report a problem.

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.