Design-system accessibility review

EAA-aligned accessibility baseline

This review uses the European Accessibility Act as legal context and WCAG 2.2 AA together with EN 301 549 as the practical technical benchmark. It is an implementation review, not a legal opinion or formal certification.

Implemented8 pagesHomepage, three case studies, web CV, legal pages and 404 reviewed.

Responsive checks40 runsFive widths across eight public pages, with light and dark theme checks.

Manual follow-upRequiredScreen-reader and real-device testing remain necessary.

What was reviewed and improved

Area	Status	Implementation
Document structure	Pass baseline	One page title and H1 per page, English language metadata, consistent header/nav/main/footer landmarks, corrected heading hierarchy.
Keyboard and bypass	Pass baseline	Skip-to-content link on every page, visible focus treatment, keyboard-operable theme and accessibility controls, no empty control names.
Colour and contrast	Automated pass	Dedicated text-safe orange token, stronger dark-surface accent, improved muted text, control borders and focus colour. The automated scan reported no simple-background text contrast failures in either theme.
Target size	Automated pass	Primary controls are at least 44px high; other non-inline interactive targets meet the WCAG 2.2 AA 24-by-24 CSS pixel minimum.
Responsive reflow	Automated pass	No horizontal page overflow at 320px, mobile, tablet or desktop test widths. A 200% text-size simulation also produced no page overflow.
Text spacing	Automated pass	The readability preference applies the WCAG text-spacing test values for letter and word spacing and allows cards to expand without clipping.
Motion	Pass baseline	System `prefers-reduced-motion` is respected, with an additional user-controlled reduced-motion preference.
Themes and preferences	Pass baseline	Light/dark theme follows system preference initially, can be changed with an accessible button and is stored locally. Readability settings are also stored locally.
Visual alternatives	Current implementation	CSS-based portfolio illustrations are exposed as labelled images where they communicate meaning; decorative progress and icon elements are hidden from assistive technology.
Downloadable CV	Manual follow-up	The two-page CV contains searchable text and working email, portfolio and LinkedIn links. The web CV remains the preferred flexible version; tagged-PDF reading order requires separate assistive-technology testing.

Accessibility functionality included

High-contrast preference
Reduced-motion preference
Readable system typeface
WCAG text-spacing preference
Underlined text links
Reset function and polite status announcements
Keyboard-accessible accessibility panel with Escape-to-close and focus management

What still requires human testing

VoiceOver with Safari and NVDA or JAWS with a Chromium browser.
Browser zoom up to 400%, including browser-specific rendering.
Keyboard reading order and link purpose with real users.
Contrast over gradients, screenshots and project imagery as assets are changed.
Mobile testing on iOS Safari and Android Chrome.
PDF reading order and announcements in Adobe Acrobat and at least one screen reader.

Scope note: A personal portfolio is not automatically one of the consumer products or services covered by the EAA. This site is therefore designed toward the same accessibility principles without claiming that the portfolio itself has been legally certified as EAA compliant.

References

Review date: 2026-07-28