WCAG 2.1 Level AA Accessibility

667

Contrast values fixed

Semantic HTML landmarks added

63+

Elements made keyboard accessible

Pages updated & deployed

🎨

Colour contrast

All grey text meets 4.5:1 against its background (WCAG 1.4.3)

667 values

Before → After

#888888

3.5:1 on white — FAIL

→

#6e6e6e

5.1:1 on white — PASS ✓

#aaaaaa

2.3:1 on white — FAIL

→

#6e6e6e

5.1:1 on white — PASS ✓

✕ Before — stat label (#888 on #f5f5f3)

Total Revenue

£14,820

✕ 3.3:1 ratio

✓ After — stat label (#6e6e6e on #f5f5f3)

Total Revenue

£14,820

✓ 4.9:1 ratio

✕ Before — form label (#888 on #fff)

Company Name

Margin Ltd

✕ 3.5:1 ratio

✓ After — form label (#6e6e6e on #fff)

Company Name

Margin Ltd

✓ 5.1:1 ratio

✕ Before — plan feature crossed out (#ccc)

✓ MTD VAT submissions
✕ Multi-currency

✕ 1.6:1 ratio — text invisible

✓ After — plan feature crossed out (#6e6e6e / #991b1b)

✓ MTD VAT submissions
✕ Multi-currency

✓ 5.1:1 text / 7.6:1 ✕ mark

⌨️

Skip navigation link

Keyboard users can jump straight to content — hidden until Tab is pressed (WCAG 2.4.1)

Added

Visible when focused by keyboard (Tab key)

↑ Normally hidden off-screen (left: -9999px)

← appears here when Tab is pressed

Page content continues below… keyboard focus jumps to #main-content

Code: <a href="#main-content" class="skip-link">Skip to main content</a>

🏛️

Semantic HTML landmarks

Screen readers announce regions — users can jump between sections (WCAG 1.3.1, 2.4.1)

Updated

<nav>

aria-label="Main navigation"

Today · Money · Sales · Expenses · Reports · Tax · More

<main>

id="main-content"

Panel content — skip link target lands here

Was	Now	Why
<div class="topnav">	<nav aria-label="Main navigation">	Screen readers say "main navigation landmark"
<div class="content">	<main id="main-content">	Screen readers say "main content landmark"
<div class="nav-tabs">	role="tablist"	Announces as a tab group
Nav tab <div>	role="tab" tabindex="0" aria-selected	Tab panel pattern, keyboard accessible
Logo <div>	role="img" aria-label="Margin"	Screen reader reads brand name
User menu <button>	aria-haspopup="menu" aria-expanded aria-label	Announces menu state on open/close
Transaction count <span>	aria-live="polite"	Screen reader reads count when it updates

🔲

Keyboard focus indicators

All interactive elements show a visible focus ring when navigated by keyboard (WCAG 2.4.7)

Added

What focused elements look like (Tab key)

Button

2px #7B2AC8 outline

Form input

2px border + glow

Nav tab

Money

Inset outline

Chip / filter

This month

Outline + border-radius

Skip link

Slides in from off-screen

Subnav, cards, rows

Any clickable div — tabindex+keydown added by IIFE

⌨️

Keyboard access for div-based interactive elements

63+ clickable divs now reachable via Tab + activatable via Enter/Space (WCAG 2.1.1)

63+ elements

Elements covered by WCAG JS IIFE (runs on page load)

Selector	Added attributes	Example
.subnav-item	tabindex="0" role="tab"	Sales → Invoices, Quotes, Credit Notes…
.dash-action-item	tabindex="0" role="button"	Dashboard quick-action cards
.supplier-list-item	tabindex="0" role="button"	Supplier rows in list view
.article-card, .news-item	tabindex="0" role="button"	Knowledge centre articles, news feed
.faq-item, .wizard-option	tabindex="0" role="button"	FAQ accordions, setup wizard choices
.gs-result-item	tabindex="0" role="button"	Global search results (Ctrl+K)
.link-cell	tabindex="0" role="button"	Table cell links (invoice #, supplier name)

All elements also get Enter and Space keydown handlers that trigger .click()

🖼️

Image alternative text

Meaningful images described for screen readers; decorative images hidden (WCAG 1.1.1)

Fixed

Image	Was	Now
Invoice QR code	no alt attribute	alt="QR code"
Document viewer (receipt/bill image)	alt="" (empty — treated as decorative)	alt="Document: [supplier name]" (set dynamically in JS when loaded)
Decorative UI elements (logo mark, glow, SVG icons in buttons)	No marking	aria-hidden="true" focusable="false"
Breadcrumb separator ›	Visible to screen readers (#ccc — low contrast)	aria-hidden="true" (decorative — exempt from contrast)

All changes deployed to app.getmargin.co.uk and download.getmargin.co.uk · 2026-09-16