a11ydesign
Accessibility resource for UX designers
2025
Brief
UX designers need design-specific accessibility resources to design for web accessibility.
This 6-month solo project was my honours thesis.
My role
User experience design, prototyping, user interviews, user testing, branding
DISCOVER
THE PROBLEM:
UX DESIGNERS NEED DESIGN-SPECIFIC ACCESSIBILITY RESOURCES TO DESIGN ACCESSIBLE WEB PRODUCTS.
If you've ever read the WCAG, you know that it's dense. But on top of that, it's mainly written for developers working on implementation.
So when designers read the WCAG, they have to translate and extrapolate it for a design environment.
Here's an example of a WCAG success criterion.
Success Criterion 2.4.3 Focus Order
If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
(WCAG, 2024)
A UX designer would be justified in saying, "Hey! This isn't relevant to the design scope."
After all, focus states are implemented in built prototypes, UAT or when the project goes live.
But the earlier we include accessibility in the design, the easier and more seamless it can be to implement.
For example, focus order annotations. As the UX designer sketches out wireframes, they are already crafting user flows.
By marking out the focus order during this stage, they can create a cohesive experience for everyone, including keyboard users.
Target users
UX designers at every stage: beginner, amateur, professional, expert.
User research
Semi-structured interviews with 9 UX designers:
3 students, 4 early-career, and 2 mid-career professionals.
Objectives
Explore UX designers’:
current awareness of accessibility
awareness of types of disabilities & how to design for them
sources of education on or exposure to accessibility
perceived challenges and needs when designing for accessibility
Insights
Insight
So what?
Participants followed the same general design process.
Using this general design process to structure a resource would make it intuitive to designers.
Awareness and attitudes towards web accessibility varied widely based on personal experience.
Detailed user stories can give designers more confidence to design for accessibility;
More exposure to users with disabilities can change a designer's mind on how necessary accessibility is.
Participants' needs and goals depended on design stage and their familiarity with the type of disability.
A resource built to fit this design process would be intuitive to designers.
DEFINE
Personas
I developed three personas, one for each progressive level of familiarity with designing for accessibility.
The design solution would thus need to identify the user's goal, broadly categorisable into one of the above personas, and meet that need.
The solution
A resource that:
identifies the user’s familiarity with web accessibility and stage of their design process;
provides relevant, applicable information with sufficient depth, such that the designer can incorporate it into their workflow.
DESIGN
Initial user flows
To identify the user's goal and familiarity with accessibility, I sketched out a short questionnaire flow.
Requires the user to make an account to save their preferences
Doesn’t distinguish between different areas of accessibility
Insufficient guidance for inexperienced users
By simplifying the entry points based on the user goal of each persona, I designed a simple home page section to replace the questionnaire.
Provides easy entry points on the home page, no account needed
Sequential presentation offers structured guidance for beginners
Focus on user goals gives users control over their experience
Lofi prototype
I crafted a working lofi prototype based on the user personas above.
TEST
User testing
1 round of lo-fi testing
1 round of mid-fi testing
9 UX designers
Objectives
Intuitiveness of Information Architecture
Effectiveness of the tool
Perceived usefulness of the tool
Methodology
Pretest design task
Prototype exploration & feedback
Posttest design task
Findings & iteration
“When I see "a11ydesign" and the tagline, "Helping designers create accessible products," it says "design agency" to me… like a design agency focused on accessibility.”
(Participant 5, design student)
Overall purpose of the tool was unclear
Clearer signposting and navigation was needed
Perceived usefulness varies between personas
DELIVER
Final prototype (mid-fi)
In the transition to mid-fidelity, I created frames for all three user tasks, but most extensively for the first user task.
Key user task 1
The user can see their streak, tasks for the week, upcoming deadlines and overdue tasks from their Home page.
The user can add a new task from the Home page.
The user can input the title and relevant information about the task.
The user can assign the task to an overarching project, like a class or a larger assignment.
The user can add the date and time for the task deadline.
The user must assign a date to complete the task, encouraging them to use time-blocking as a technique.
The user can also break the task down into smaller sub-tasks, making the task itself more manageable to complete.
The user can add tags for their own reference.
The user can then save the task, where it will appear on the Home page.
Key user task 2
The user can choose a task to focus on, as well as how many focus sessions they would like to complete.
The user will view a countdown timer and a calming animation that will encourage them to put down their phone and finish the task they selected.
Tapping the Close button will prompt an alert, allowing the user to decide if they want to end their session before the timer runs out.
(Nielsen’s Heuristic #3: User control and freedom)
On completing the focus session, the user will view an encouraging message and be prompted to either take a break or close the focus mode.
Figma files
View the wireframes
View the final prototype
Final thoughts
Even though this was an academic project, it was a fun opportunity for me to explore the power of design.
As designers, we know that design can shape user behaviour, like the infinite scroll feature Instagram introduced that led to the trend of ‘doomscrolling’.
But if design can influence user behaviour positively, what else could we solve?
Procrastination is almost always chalked up to a lack of discipline, but if we could use design to support people who struggle with deadlines, then wouldn’t more opportunities open up for them? I enjoyed exploring this idea.
Next up
CopyCraft
ChatGPT Dashboard for Copywriters
A dashboard for copywriters to track, compare and craft cross-platform campaigns using ChatGPT.