Accessibility Assessment

Scope & Method

• Pages assessed: Home, Client Needs, User Stories, Accessibility.
• Methods: keyboard-only audit, screen reader spot checks, colour contrast checks, 200% zoom & 320px reflow.
• Reference: WCAG 2.2 Quickref (contrast, keyboard, focus, reading level, error handling, meaningful sequence).

Summary (Issues → SC → Priority → Status)

Findings mapped to WCAG

• No “Skip to content” link (2.4.1)

  Impact: Keyboard users must tab through the navbar on every page.

  Fix: Add a visible-on-focus skip link to #main on all pages (implemented here).

  Why this matters for our users: Margaret dislikes clutter and tiny text; bypassing the nav reduces fatigue on her tablet and lowers confusion for low digital literacy.

  Priority: High · Status: Fixed here; roll-out scheduled.

• Menu button state not conveyed (4.1.2)

  Impact: Screen reader users and speech users may not know whether the menu is open or closed.

  Fix: Toggle aria-expanded and visibility class; support Esc to close; move focus to first menu link when opening.

  Why this matters for our users: Clear state helps everyone, especially users with lower digital confidence (Margaret) or on small screens at night (Lily).

  Priority: High · Status: Fixed.

• Insufficient link & focus contrast / unclear focus style (1.4.3, 1.4.11, 2.4.13)

  Impact: Links and controls are hard to see, especially on mobile/dark environments.

  Fix: Ensure text ≥ 4.5:1; non-text UI (icons, borders, focus ring) ≥ 3:1; add a strong :focus-visible outline.

  Why this matters for our users: Lily browses late at night; Priya wants clean, gallery-like legibility; Ahmed needs low-strain viewing on slow/low-end devices.

  Priority: Medium · Status: In progress.

• Reflow and zoom issues on small screens (1.4.10, 1.4.4)

  Impact: Possible horizontal scrolling at 320px or content clipping at 200% zoom.

  Fix: Use relative units (rem/em), flexible containers, and avoid absolute widths; verify no overflow at 320px and 200% zoom.

  Why this matters for our users: Margaret wants big, uncluttered text; Ahmed benefits from robust small-screen layouts.

  Priority: Medium · Status: Testing.

• Meaning conveyed by colour alone in a few spots (1.4.1)

  Impact: Users who don’t perceive colour differences may miss active states or error cues.

  Fix: Pair colour with underlines, icons, text labels; ensure states are perceivable in multiple ways.

  Why this matters for our users: Simpler, redundant cues make the UI easier for Margaret and clearer for fast scanning by Lily.

  Priority: Medium · Status: To do.

• Reading level & guidance improvements (3.1.5, 3.3.2, 3.3.1)

  Impact: Longer copy and forms can overwhelm; unclear errors reduce confidence.

  Fix: Add plain-language summaries and inline hints; ensure clear error text and suggestions.

  Why this matters for our users: Diego prefers bilingual, visual guidance; Margaret and Lily value simple, step-by-step help.

  Priority: Medium · Status: Ongoing content work.

Recommendations

(click on numbers and go to the links)

1. Ensure sufficient contrast and avoid colour-only cues (1.4.3, 1.4.1).
2. Guarantee keyboard operability & logical order (2.1.1, 1.3.2, 2.4.13).
3. Prefer semantic HTML; add ARIA only for role/state that HTML can’t convey (4.1.2).
4. Support reading level and clear guidance for forms (3.1.5, 3.3.2, 3.3.1).
5. Verify zoom/reflow at 200% and 320px (1.4.4, 1.4.10).

Accessibility Statement (Draft)

We aim to meet WCAG 2.2 Level AA. Current known issues: secondary link contrast (1.4.3), skip link missing on two pages (2.4.1). Fixes are scheduled for [date]. If you face barriers, contact [your-email].