🖥️
Hero photo: laptop or tablet showing the Vota.nl redesigned platform

Vota: Applying accessibility to create a universal design

Client: Vota.nl Focus: Accessibility My role: UX Designer

Vota.nl is a Dutch vacancy bank connecting job seekers with employers. The platform had recently undergone a redesign, but accessibility had not been a primary focus. The goal was to audit and transform the design into a truly universal experience.

Tools used

A comprehensive accessibility audit was performed using WCAG 2.1 guidelines as the primary benchmark, combining multiple evaluation methods:

📸
Vota.nl – original homepage screenshot
Full-width screenshot of the original Vota.nl homepage before accessibility improvements (red/pink header, man in suit photo)

The original Vota.nl design before accessibility improvements

One of the most significant issues was the colour palette. Several combinations failed WCAG AA contrast requirements, particularly text over coloured backgrounds.

Before – failing contrast
Coloured backgrounds (hot pink, yellow) with text that fails WCAG contrast requirements
After – fixed contrast
Same areas with adjusted colours that pass WCAG AA contrast ratios

Colour contrast improvements to meet WCAG AA standards

🖼️
Before – hero image contrast
Original hero banner with text over image — low contrast reading
🖼️
After – hero image contrast
Same hero banner with improved overlay/contrast treatment

Improving text legibility over photographic backgrounds

The original design lacked clear visual and semantic hierarchy. Heading levels were skipped, and the typographic scale did not establish a clear reading order.

🧭
Before – navigation hierarchy
Original nav with flat hierarchy — all items look similar in weight
🧭
After – navigation hierarchy
Redesigned nav with clear primary and secondary level distinction

Restructuring navigation to communicate clear hierarchy

🌐
Vota.nl – full redesigned page
Full-page screenshot showing all hierarchy and accessibility improvements applied

The redesigned Vota.nl with improved hierarchy and accessibility

Following the accessibility improvements, a comprehensive styleguide was created documenting all decisions made. This served as a reference for the development team and future designers on the platform.

The styleguide included accessible colour tokens, typography scale with minimum size recommendations, component states including focus indicators, and interaction guidelines for keyboard and touch users.

📚
Accessibility styleguide
Styleguide showing accessible colour tokens, typography scale, focus states, and component variants

Styleguide created as a reference for developers and future designers