Portfolio redesign with accessibility as a top priority
By: Katy Wellington
Tags: UX Design, Web Design, Design, Accessibility, Portfolio

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

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.