Portfolio redesign with accessibility as a top priority
“Why did you decide to make your design portfolio in grayscale?”
This was the question that first made me realize that my work as a designer might not take accessibility into account. This question came from a friend of mine who is color blind. In the weeks… no MONTHS previous to this conversation I had been tirelessly working to carefully craft a design portfolio that I felt reflected my work and me as a person. As a new designer, I wanted everything to be perfect and I wanted it to have just the right vibe. I love nature so I decided to go with soft and subtle greens throughout my site. What I thought was a clever and artsy design looked very different to my friend and I realized that I had been focusing on only one user persona for my portfolio: a hiring manager without any disabilities. (Let’s also be honest, I was probably picturing a white male hiring manager because society has hard wired me to and the tech industry still needs more women and people of color represented in it). I didn’t want this to be the only kind of person that my portfolio would be accessible to so I decided to take the UX Foundations to Accessibility and Accessibility for Web Design courses, create a new persona, and create a completely new portfolio. In this post I will show you the results of my journey.
A New Persona
My accessibility courses taught me many new valuable ways to approach design. For example, one overarching theme was that there are many levels of disabilities and because of this a majority of people have a disability which means a majority of people may struggle to interact with my designs in one way or another. This idea emphasizes for me the need to be intentional about accessibility in design. I was also introduced to many different types of disabilities, temporary to permanent, that I had not thought of. For example, the in ability to use a limb could come from having lost if, broken it, or even being a single parent with little children to take care or so only one arm is free at a time. Overall, one of my favorite lessons from these courses was that a problem for someone with a disability could easily also be a problem for everyone else.
One of the most important skills I learned in my accessibility courses was how to create user personas specifically for users with disabilities. I created two different personas you can view below:
A Whole New Portfolio
Now that I knew more about the potential pain points and barriers that some of my users might be facing, I took an in-depth look at my portfolio, made a list of changes I wanted to make, and did a complete portfolio overhaul. Luckily, I had been working at my new job as a web designer and builder so I had a few more design and front-end skills.
Before : check it out
After: definitely check this one out
I know that my portfolio has a long way to go to be perfectly accessible. I used what I learned in my courses and the evaluation of my website from WAVE web accessibility tool to guide my process but there are still things I am not sure how to do such as make sure my website allows for keyboard interactions. Here is a description, however, of the changes I did make.
Changes
1. Of course I had to change my color palette. I had to redeem myself in Josh’s eyes. According to Accessibility for Web Design, meaningful text should have a contrast ratio of 4.5:1 or higher and large or bold text should have a contrast ratio of 3:1. My heading have a ratio of 17.5:1 and my body font has a ratio of 5.9: 1 on most pages and a ratio of 16:1 on blog pages since the text is in larger chunks and requires a higher cognitive load to process. My primary red color which is used for buttons and subheadings has a contrast of 3.6:1 or a AA+ rating according to the Apple Contrast app I installed to frequently check my designs.
2. I intentionally created large target areas and made sure their was space between target areas so that precision would not be an issue when my users need to click or choose important targets.
3. I went through all of my images and made sure that there was meaningful alternative text assigned to each one.
4. I created a site structure that included logical orders of headings and divs which is helpful for E-readers.
5. I changed my messaging form so that it had permanent labels instead of placeholder text that disappeared which helps for anyone that has memory issues, attention issues, or is simply pulled away temporarily from completing a task.
6. I wanted to add animations to my site because I think they really add a lot of life to a website BUT I made sure that my site did not rely on animations or that any animations were necessary for a task to be completed. I also made sure that they were subtle and were stateful with a logical start and end state. This is helpful for anyone with vestibular disorder reactions.
7. For my blog and case study feed I made the entire section a clickable link instead of creating a small clickable link area- this way it takes less precision to get to my UX Writing section.
8. I made sure that each of my buttons had an intention hover, focus, and active state. This helps with E-readers as well.
9. I created separate, specific page titles so that navigating through the site for E-readers and in general would be easier.
10. I chose a high legibility font for anyone with disorders such as dyslexia.
11. I made sure there were Aria labels present for buttons that did not have any textual representation.
Next Steps
I will continue to learn about accessibility because I want to be a socially-responsible designer who creates products meant for everyone. I would love to learn more about how my site could be accessible. If you have any suggestions or want to talk about accessibility or design in general, please reach out to me. I would love to hear from you!
