Accessibility Design
This project involved designing a fully accessible portfolio website for a visually impaired user, who is a recording artist and blog writer, prioritizing screen-reader compatibility and ease of independent content management
Duration
5 months
My Role
UI UX design and Wordpress execution
Team Members
Mollika Chakraborty and Alexander MacKinnon
Softwares Used
Figma and Wordpress
DESIGN PROBLEM
Accessibility is still not a common practice in web design
The challenge involved creating a website that can be navigated entirely through a screen reader, understood when read aloud, and used independently without visual indicators. Based on the expressed frustration of our client using other alternatives, the requirement inclined towards a simplistic design that conveys clarity.
KEY DESIGN DECISIONS
Clarity over visuals
WHITE PAPER RESEARCH
Confusing layout is a primary source of frustration for visually impaired users
Before beginning this project, we sought to understand the primary frustration of our client with his web navigation experiences and identify design solutions. As this was our first time working with screen readers, we read numerous articles on layouts, typography, buttons, and the overall structure of the website. I stumbled upon this research paper where 100 visually impaired users were interviewed to address accessibility issues in the web, according to the article; What Frustrates Screen Reader Users on the Web: A Study of 100 Blind Users
"…..Blind users frequently experience frustration due to confusing layouts, poorly labelled forms, missing alt text, and misleading links. These issues not only disrupt navigation but also result in an average loss of over 30% of task time. This study reinforced the need to address accessibility at a structural level, as many of these barriers are preventable through intentional design decisions…..".
INTERVIEW AND FEEDBACK
Improved screen reader clarity increased the user's confidence and motivation to publish work for a wider reach.
User feedback and research insights were synthesized using affinity mapping to identify common accessibility barriers and prioritize solutions.
RESEARCH QUESTIONS
1) What frustrates you most when navigating websites and social platforms using a screen reader? 2) What makes a website feel simple and comfortable to use for you? 3) Which interactions or elements slow you down or cause you to get stuck? 4) How confident do you feel managing or updating content on a website by yourself?
Here's a short video of our usability testing and training our client on using WordPress
MAIN INSIGHTS
The primary objective of a clutter free website, self manageable, was successfully achieved.
DESIGN
Setbacks + adaptations in design to accommodate accessibility
At the start of the project, our client closely guided us, but we lacked a clear visual reference for what an accessible website should look like. Designing for a visually impaired user pushed us to rethink our assumptions and consider accessibility not only for the client but for all site visitors. Working hands-on with screen readers and keyboard navigation revealed how easily common design choices, such as icons, interactions, and visual cues, become barriers. As designers, we experienced frustration during early testing, which helped us understand the daily challenges faced by blind users. This process reinforced a key realization: designing with accessibility in mind does not limit design; it strengthens it for everyone.
TESTING + CHANGES IN DESIGN
Major improvements in design
The website went through multiple iterations in Figma over two months, based on continuous feedback from my professor, client, and peers. Once the direction was finalized, we transitioned directly to WordPress. Figma was used primarily to establish the overall visual direction, as the final implementation relied on WordPress’s design system through Elementor.
FINAL SCREENS
The final product
A user-centred website that transforms accessibility into a core experience.
Style Guide
CONCLUSION + LESSONS LEARNED
Future iterations + what would I like to change
1) This project shifted my perspective from designing primarily for visual appeal to designing for inclusivity first. Accessibility directly shapes layout, interaction patterns, content structure, and navigation. It is not an add-on, but a core responsibility. 2) Working with visually impaired users exposed practical limitations of screen readers like JAWS and challenges with automated components such as calendars. This reinforced the importance of semantic structure, keyboard navigation, manual input options, and clutter-free interfaces from the outset. 3) Participating in usability testing with a visually impaired user provided firsthand insight into how inaccessible design choices can exclude entire communities. It wasn't just about the client, but also about the low-vision users who might visit the site. This experience deepened my empathy and reshaped how I approach problem-solving in digital spaces. 4) In future projects, I will integrate screen reader testing earlier, design within accessibility constraints from the beginning, collaborate more closely with affected communities, and evaluate technical limitations upfront. Implementing tools like Zapier for social automation also highlighted the importance of aligning technical feasibility, user training, and project timelines.
DESIGN PROBLEM
Accessibility is still not a common practice in web design
The challenge involved creating a website that can be navigated entirely through a screen reader, understood when read aloud, and used independently without visual indicators. Based on the expressed frustration of our client using other alternatives, the requirement inclined towards a simplistic design that conveys clarity.
KEY DESIGN DECISIONS
Clarity over visuals
WHITE PAPER RESEARCH
Confusing layout is a primary source of frustration for visually impaired users
Before beginning this project, we sought to understand the primary frustration of our client with his web navigation experiences and identify design solutions. As this was our first time working with screen readers, we read numerous articles on layouts, typography, buttons, and the overall structure of the website. I stumbled upon this research paper where 100 visually impaired users were interviewed to address accessibility issues in the web, according to the article; What Frustrates Screen Reader Users on the Web: A Study of 100 Blind Users
"…..Blind users frequently experience frustration due to confusing layouts, poorly labelled forms, missing alt text, and misleading links. These issues not only disrupt navigation but also result in an average loss of over 30% of task time. This study reinforced the need to address accessibility at a structural level, as many of these barriers are preventable through intentional design decisions…..".
INTERVIEW AND FEEDBACK
Improved screen reader clarity increased the user's confidence and motivation to publish work for a wider reach.
User feedback and research insights were synthesized using affinity mapping to identify common accessibility barriers and prioritize solutions.
RESEARCH QUESTIONS
1) What frustrates you most when navigating websites and social platforms using a screen reader? 2) What makes a website feel simple and comfortable to use for you? 3) Which interactions or elements slow you down or cause you to get stuck? 4) How confident do you feel managing or updating content on a website by yourself?
Here's a short video of our usability testing and training our client on using WordPress
MAIN INSIGHTS
The primary objective of a clutter free website, self manageable, was successfully achieved.
DESIGN
Setbacks + adaptations in design to accommodate accessibility
At the start of the project, our client closely guided us, but we lacked a clear visual reference for what an accessible website should look like. Designing for a visually impaired user pushed us to rethink our assumptions and consider accessibility not only for the client but for all site visitors. Working hands-on with screen readers and keyboard navigation revealed how easily common design choices, such as icons, interactions, and visual cues, become barriers. As designers, we experienced frustration during early testing, which helped us understand the daily challenges faced by blind users. This process reinforced a key realization: designing with accessibility in mind does not limit design; it strengthens it for everyone.
TESTING + CHANGES IN DESIGN
Major improvements in design
The website went through multiple iterations in Figma over two months, based on continuous feedback from my professor, client, and peers. Once the direction was finalized, we transitioned directly to WordPress. Figma was used primarily to establish the overall visual direction, as the final implementation relied on WordPress’s design system through Elementor.
FINAL SCREENS
The final product
A user-centred website that transforms accessibility into a core experience.
Style Guide