Web accessibility allows everyone, including people with disabilities, to perceive, understand, navigate, and interact with the Internet.
The city of Aalborg in Denmark, needs a shared guide with principles for different design building blocks that unites their current web design, and the requirements for web accessibility.
The reason
The European Union is requiring that all digital communication be accessible for digital environments by 2025, both government and private sector.
The solution
We focus on a study case 📚 where the user enters the site to find a daycare facility in the city. The task needs to be an efficient user journey and accessible for everyone 👥 . Also, we developed our solution on Mobile-first 📱 since, according to their data, 2 out of 3 visits to their site come from mobile devices.
The process
1 - USER PERSONA RESEARCH
2 - TEXT SIZE CORRECTION
Following their Design System Information, the Typeface they use is ROBOTO and the smallest size of their system is 12 pt size.
We found that the size 12 pt would not be large enough to keep accessibility across devices. For that reason, we corrected it by calculating a new smallest size of their system.
New smallest mobile phone size: Roboto 18pt Regular. New smallest desktop size: Roboto 34pt Regular.
White, Yellow, Light Pink, Orange, and Cyan over Black.
White, Orange, and Cyan over Blue.
Building blocks
Then, after knowing our fundamentals about users, text, and color contrast, we work on the web components on Figma for the study case "Find a Daycare Facility" ensuring accessible design.
Final Prototype
Finally, the following video shows the mobile through Figma prototype for the study case and how the user successfully completes the searching task.
Let's work together
Get in touch!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
