Test report · Accessibility (WCAG 2.2 AA)
The app does not yet conform to WCAG 2.2 AA: 13 of 55 criteria fail on at least one screen. One issue is critical: keyboard and screen reader users cannot create an invoice because the date picker only works with a mouse (A11Y-01).
The customer portal is in better shape: a screen reader user can find and pay an invoice. Most issues come from shared components, so fixing 10 components resolves about 80% of the issues found.
Accessibility problems are usability problems too: the form-error issue also slowed down sighted users in the usability tests (UX-04).
| Key | Summary | Severity | Status | Component | Found by | Owner | Created |
|---|---|---|---|---|---|---|---|
ACME-541 | Accessibility: DatePicker component (A11Y-01) | Critical | Open | DatePicker | A11Y-01 | Frontend | 21 Oct |
ACME-542 | Accessibility: Select component (A11Y-02, 03) | High | Open | Select | A11Y-02 | Frontend | 21 Oct |
ACME-543 | Accessibility: IconButton component (A11Y-04, 21) | High | Open | IconButton | A11Y-04 | Frontend | 21 Oct |
ACME-544 | Accessibility: FormField component (A11Y-05, 06, 07) | High | Open | FormField | A11Y-05 | Frontend | 21 Oct |
ACME-545 | Accessibility: Theme component (A11Y-08, 10, 23) | High | Open | Theme | A11Y-08 | Frontend | 21 Oct |
ACME-546 | Accessibility: Chart component (A11Y-09, 18, 22, 28) | High | Open | Chart | A11Y-09 | Frontend | 21 Oct |
ACME-547 | Accessibility: LineItems component (A11Y-11, 16) | Medium | Open | LineItems | A11Y-11 | Frontend | 21 Oct |
ACME-548 | Accessibility: Portal theme component (A11Y-13, 14) | Medium | Open | Portal theme | A11Y-13 | Frontend | 21 Oct |
ACME-549 | Accessibility: Toast component (A11Y-19, 20) | Medium | Open | Toast | A11Y-19 | Frontend | 21 Oct |
ACME-550 | Accessibility: DataTable component (A11Y-12, 26, 27) | Medium | Open | DataTable | A11Y-12 | Frontend | 21 Oct |
| ID | Area | Observation | Impact | Suggested action |
|---|---|---|---|---|
OBS-01 | Positive | Page titles, language, headings on most pages and skip links are in place. | Positive | – |
OBS-02 | Components | Most issues come from 10 shared components; fixing them resolves about 80% of instances. | Effort | Fix components, not pages. |
OBS-03 | Automation | axe found 41 violations; manual review found the critical keyboard issue and 9 others axe can't detect. | Info | Keep both automated checks and manual walkthroughs. |
OBS-04 | Portal | The portal is in better shape than the back office: a screen reader user can pay an invoice. | Positive | Prioritise the back office. |
OBS-05 | Legal | The European Accessibility Act has applied to many consumer-facing digital services in the EU since 28 June 2025. | Info | Whether it applies to Acme is a legal question; this report gives the technical picture. |
OBS-06 | Process | Designs in Figma have no focus states or error states. | Root cause | Add them to the design system. |
A11Y-01 Date picker can't be used with a keyboardA11Y-02 Custom dropdowns have no role or state<select> or the ARIA combobox pattern.A11Y-05 Form errors shown only by a red borderaria-describedby, aria-invalid="true", focus on the first error.A11Y-08 Secondary text and placeholders have low contrast#9CA3AF on white: 2.5:1 (needs 4.5:1), on every page.#6B7280 (4.8:1) or darker.| Criterion | Name | Level | Result | Issues / note |
|---|---|---|---|---|
| 1.1.1 | Non-text Content | A | Fail | A11Y-04 A11Y-18 A11Y-24 |
| 1.2.1 | Audio-only and Video-only (Prerecorded) | A | N/A | No audio or video |
| 1.2.2 | Captions (Prerecorded) | A | N/A | No video |
| 1.2.3 | Audio Description or Media Alternative (Prerecorded) | A | N/A | No video |
| 1.2.4 | Captions (Live) | AA | N/A | No live media |
| 1.2.5 | Audio Description (Prerecorded) | AA | N/A | No video |
| 1.3.1 | Info and Relationships | A | Fail | A11Y-16 A11Y-17 A11Y-26 |
| 1.3.2 | Meaningful Sequence | A | Pass | – |
| 1.3.3 | Sensory Characteristics | A | Pass | – |
| 1.3.4 | Orientation | AA | Pass | – |
| 1.3.5 | Identify Input Purpose | AA | Pass | – |
| 1.4.1 | Use of Color | A | Pass | – |
| 1.4.2 | Audio Control | A | N/A | No audio |
| 1.4.3 | Contrast (Minimum) | AA | Fail | A11Y-08 A11Y-09 A11Y-23 |
| 1.4.4 | Resize Text | AA | Pass | – |
| 1.4.5 | Images of Text | AA | Pass | – |
| 1.4.10 | Reflow | AA | Fail | A11Y-11 A11Y-12 |
| 1.4.11 | Non-text Contrast | AA | Fail | A11Y-10 A11Y-28 |
| 1.4.12 | Text Spacing | AA | Pass | – |
| 1.4.13 | Content on Hover or Focus | AA | Pass | – |
| 2.1.1 | Keyboard | A | Fail | A11Y-01 A11Y-27 |
| 2.1.2 | No Keyboard Trap | A | Pass | – |
| 2.1.4 | Character Key Shortcuts | A | Pass | – |
| 2.2.1 | Timing Adjustable | A | Pass | – |
| 2.2.2 | Pause, Stop, Hide | A | Pass | – |
| 2.3.1 | Three Flashes or Below Threshold | A | Pass | – |
| 2.4.1 | Bypass Blocks | A | Pass | – |
| 2.4.2 | Page Titled | A | Pass | – |
| 2.4.3 | Focus Order | A | Pass | – |
| 2.4.4 | Link Purpose (In Context) | A | Pass | – |
| 2.4.5 | Multiple Ways | AA | Pass | – |
| 2.4.6 | Headings and Labels | AA | Pass | – |
| 2.4.7 | Focus Visible | AA | Fail | A11Y-13 A11Y-14 |
| 2.4.11 | Focus Not Obscured (Minimum) | AA | Fail | A11Y-15 |
| 2.5.1 | Pointer Gestures | A | Pass | – |
| 2.5.2 | Pointer Cancellation | A | Pass | – |
| 2.5.3 | Label in Name | A | Pass | – |
| 2.5.4 | Motion Actuation | A | N/A | No motion input |
| 2.5.7 | Dragging Movements | AA | Pass | – |
| 2.5.8 | Target Size (Minimum) | AA | Fail | A11Y-21 A11Y-22 |
| 3.1.1 | Language of Page | A | Pass | – |
| 3.1.2 | Language of Parts | AA | Pass | – |
| 3.2.1 | On Focus | A | Pass | – |
| 3.2.2 | On Input | A | Pass | – |
| 3.2.3 | Consistent Navigation | AA | Pass | – |
| 3.2.4 | Consistent Identification | AA | Pass | – |
| 3.2.6 | Consistent Help | A | Pass | – |
| 3.3.1 | Error Identification | A | Fail | A11Y-05 A11Y-06 |
| 3.3.2 | Labels or Instructions | A | Pass | – |
| 3.3.3 | Error Suggestion | AA | Fail | A11Y-07 |
| 3.3.4 | Error Prevention (Legal, Financial, Data) | AA | Pass | – |
| 3.3.7 | Redundant Entry | A | Pass | – |
| 3.3.8 | Accessible Authentication (Minimum) | AA | Pass | – |
| 4.1.2 | Name, Role, Value | A | Fail | A11Y-02 A11Y-03 A11Y-25 |
| 4.1.3 | Status Messages | AA | Fail | A11Y-19 A11Y-20 |
| ID | Page | WCAG | Impact | Issue | Component | Fix |
|---|---|---|---|---|---|---|
A11Y-01 | Invoice editor | 2.1.1 | Critical | Date picker opens on click only; field is read-only | DatePicker | Allow typing; ARIA date picker dialog pattern |
A11Y-02 | Invoice editor | 4.1.2 | Serious | Customer selector has no role, name or expanded state | Select | Native select or ARIA combobox |
A11Y-03 | Invoice editor | 4.1.2 | Serious | Currency and VAT selectors not reachable with arrow keys | Select | Same component fix as A11Y-02 |
A11Y-04 | Invoice list | 1.1.1 | Serious | Row action icons (download, duplicate, delete) have no name | IconButton | aria-label with invoice number |
A11Y-05 | Invoice editor | 3.3.1 | Serious | Errors shown only by a red border | FormField | Text error linked with aria-describedby; aria-invalid |
A11Y-06 | Customer page | 3.3.1 | Serious | Same form error pattern on customer form | FormField | Same component fix |
A11Y-07 | Invoice editor | 3.3.3 | Serious | No suggestion for invalid VAT number or IBAN | FormField | Explain the expected format |
A11Y-08 | All pages | 1.4.3 | Serious | Grey secondary text #9CA3AF on white (2.5:1) | Theme | Use #6B7280 (4.8:1) or darker |
A11Y-09 | Reports | 1.4.3 | Serious | Chart axis labels 2.8:1 | Chart | Darker label colour |
A11Y-10 | Invoice editor | 1.4.11 | Moderate | Input borders 1.9:1 against background | Theme | Border colour with ≥ 3:1 |
A11Y-11 | Invoice editor | 1.4.10 | Moderate | Line items need horizontal scrolling at 320 px | LineItems | Stack lines as cards below 600 px |
A11Y-12 | Reports | 1.4.10 | Moderate | Report table cut off at 400% zoom | DataTable | Scrollable region with caption, or reflow |
A11Y-13 | Portal invoice | 2.4.7 | Moderate | Focus outline removed on buttons | Portal theme | Visible :focus-visible style |
A11Y-14 | Portal payment | 2.4.7 | Moderate | Focus outline removed on payment form | Portal theme | Same fix |
A11Y-15 | Invoice editor | 2.4.11 | Moderate | Sticky footer covers the focused field | Layout | scroll-padding-bottom = footer height |
A11Y-16 | Invoice editor | 1.3.1 | Moderate | Line items are divs; no table semantics | LineItems | Table with header cells or grid roles |
A11Y-17 | Dashboard | 1.3.1 | Moderate | KPI tiles use visual headings without heading markup | StatTile | Proper heading levels |
A11Y-18 | Reports | 1.1.1 | Moderate | Revenue chart has no text alternative | Chart | Data table or summary text |
A11Y-19 | Invoice editor | 4.1.3 | Moderate | 'Saved' toast not announced to screen readers | Toast | role=status / aria-live polite |
A11Y-20 | Invoice list | 4.1.3 | Moderate | Bulk action result not announced | Toast | Same fix |
A11Y-21 | Invoice list | 2.5.8 | Minor | Row action icons 16 × 16 px | IconButton | 24 × 24 px target or spacing |
A11Y-22 | Dashboard | 2.5.8 | Minor | Chart legend toggles 14 × 14 px | Chart | Larger hit area |
A11Y-23 | Login | 1.4.3 | Minor | Placeholder text 2.6:1 | Theme | Same as A11Y-08 |
A11Y-24 | Customer page | 1.1.1 | Minor | Customer logo alt text is the file name | Avatar | Use the customer name |
A11Y-25 | Portal payment | 4.1.2 | Minor | Card field iframe has no accessible name | Payment form | title attribute on the provider iframe |
A11Y-26 | Reports | 1.3.1 | Minor | Table header cells are styled td elements | DataTable | Use th with scope |
A11Y-27 | Invoice list | 2.1.1 | Minor | Row click opens invoice; no keyboard equivalent besides the link | DataTable | Keep link as the target; remove row click or add Enter |
A11Y-28 | Dashboard | 1.4.11 | Minor | Chart series distinguished by colour only (also 1.4.1) | Chart | Patterns or direct labels |
| Page | Critical | Serious | Moderate | Minor | Total |
|---|---|---|---|---|---|
| Login | – | 1 | – | 1 | 2 |
| Dashboard | – | 1 | 1 | 2 | 4 |
| Invoice list | – | 2 | 1 | 2 | 5 |
| Invoice editor | 1 | 5 | 5 | – | 11 |
| Customer page | – | 2 | – | 1 | 3 |
| Reports | – | 2 | 2 | 1 | 5 |
| Portal invoice | – | 1 | 1 | – | 2 |
| Portal payment | – | 1 | 1 | 1 | 3 |
Issues marked 'All pages' are counted on every page.
| Rule | Impact | Pages | Instances |
|---|---|---|---|
color-contrast | Serious | 8 | 17 |
button-name | Critical | 3 | 9 |
label | Critical | 2 | 4 |
aria-required-attr | Critical | 1 | 3 |
image-alt | Critical | 2 | 2 |
region | Moderate | 5 | 5 |
target-size | Serious | 2 | 1 |
41 violations of 7 rules across 8 pages. Automated tools catch roughly a third of WCAG issues; the rest come from manual testing.
| Task | NVDA + Firefox | VoiceOver + Safari | Keyboard only | 400% zoom | High contrast |
|---|---|---|---|---|---|
| Log in | Completed | Completed | Completed | Completed | Completed |
| Create and send an invoice | Blocked | Blocked | Blocked | With difficulty | Completed |
| Find an unpaid invoice | With difficulty | Completed | Completed | Completed | Completed |
| Record a payment | With difficulty | With difficulty | Completed | Completed | Completed |
| Run a revenue report | With difficulty | With difficulty | Completed | With difficulty | Completed |
| Invite a user | Completed | Completed | Completed | Completed | Completed |
| Pay an invoice in the portal | Completed | With difficulty | With difficulty | Completed | Completed |
| Download an invoice PDF | Completed | Completed | Completed | Completed | Completed |
8 tasks × 5 set-ups = 40 walkthroughs.
| Order | Component | Resolves | Effort |
|---|---|---|---|
| 1 · now | DatePicker, Select | A11Y-01, 02, 03 (blocks users) | 3 days |
| 2 · next release | FormField, IconButton, Theme | A11Y-04 – 08, 10, 21, 23 | 4 days |
| 3 · following release | Chart, LineItems, DataTable, Toast, Portal theme | A11Y-09, 11 – 20, 22, 26 – 28 | 5 days |
| 4 · ongoing | axe in Playwright at 'moderate'; keyboard walkthroughs as UAT cases | Prevents regressions | 1 day |
After the fixes the failed criteria are re-tested and the report updated; an accessibility statement can be drafted from it.
| Pages | Login, Dashboard, Invoice list, Invoice editor, Customer page, Reports, Portal invoice, Portal payment |
|---|---|
| Viewports | 1440 px desktop, 375 px mobile, 320 px reflow |
| Screen readers | NVDA 2024.4 + Firefox 132, VoiceOver + Safari 18 (macOS 15, iOS 18) |
| Tools | axe-core 4.10, Colour Contrast Analyser, browser zoom, Windows high contrast |
| Not covered | PDF documents (invoices) — PDF/UA is a separate check; email templates |
Sample report. Acme Ledger, its data, people and defects are fictional. Your report shows your product, your tickets and your tools.
More sample reports · Book a 15-minute call