2023 Accessible web design: How I built my portfolio

Project overview

Mock-up image of a male-presenting person with malanted dark skin tone. The person has two hands on the laptop keyboard and the person is facing the screen. The person is looking at the laptop screen, which shows an image of this portfolio website's main page being tested under the WAVE accessibility checker tool for compliance. On the screen, there are many colorful icons that resemble content that needs to be changed in order to meet accessibility compliance. There are printed pieces of paper on the table next to the laptop.
Image description: Close-up image of a male-presenting person with light skin tone next to a colleague. The person is looking at the laptop screen, which shows this portfolio website's main page test results after running the WAVE accessibility checker tool for compliance.

Summary: In this project, I mindfully designed and tested my own portfolio website to solidify my knowledge of digital web accessibility standards, coding languages, and user-first experience (UX) design to make this visually stunning and accessible!

Standards

Responsibilities


Goal

To design and build a welcoming, accessible, and dynamic portfolio website that showcases relevant projects to land a remote job! 

Tools


Target audience

Prospective employers, hiring managers, colleagues and anyone else that is interested in my design portfolio on web or mobile devices.


The problem

Mellie needs to showcase their new instructional design skills on a portfolio website to begin applying to jobs and land remote roles.


The solution

The solution is to quickly create a visually appealing, professional portfolio that is user-friendly and meets accessibility compliance. 


My website-building process

Step 1. Research

My first step was to conduct some research and compare various website-building platforms. I decided to go with Google Sites because of it's beginner-friendly features. 


These are the Google site features:


Step 2. Design and develop: color scheme, typeface and fonts, buttons, logo, and visual layout

The goal is to intentionally match engaging design choices to accessibility compliance standards, such as the WCAG 2.1 at level AA, while still making this visually appealing to anyone navigating through the portfolio.

Below is a Style Guide for this portfolio website that will showcase Color Scheme, Typeface and Fonts, Buttons and the Logo.


Style Guide showing the Color Scheme , Typeface and Fonts, Buttons and Logo for this website design.
Figure 1. Style Guide for the Mellie Design portfolio website, showing Color Scheme, Typeface and Fonts, Buttons and Logo. This information is presented below under Color scheme paragraph.

Color scheme

Amber is known to be a energetic, warm, bold and confident color, while beige represents simplicity and serenity (van Braam 2019). Lastly, black often symbolizes protect, strength, and comfort (van Braam 2019). All the characteristics of who I am are represented as colors.


I selected these typefaces and fonts: 


I selected these colors for my color scheme: 

Designing with accessibility at the fore-front in the early stages of design is optimal to avoid getting to the end of a project only to realize that all color combinations are unreadable. I tested the main colors for text and backgrounds. I didn't run an accessibility check on black text with a white background because that is a well-known highly accessible color combination with a contrast ratio of 21:1 (WebAIM 2021). 

According to WCAG 2.1 level at AA, the minimum acceptable contrast ratio for text and images of text is a ratio of 4.5:1 (W3C Web Accessibility Initiative 2023). Below are the results for this color standard accessibility check.

An accessibility color checker tool software is opened and comparing the contrast between the background and foreground of colors to ensure there is enough contrast between text and background colors to meet the Web Content Accessibility Guidelines 2.1 at level AA.
Figure 2. Screenshot image of OSS Tool Color Check tool results on the "Featured projects" page of the portfolio website.

OSS Tool Color Check tool accessibility compliance results:


Typeface and fonts

Thinking about accessibility first, I researched typefaces and fonts that are known to be highly accessible. I intentionally chose a well-known, highly reader-friendly font that is accommodating to individuals with dyslexia called Arial typeface and font (Rello and Baeza-Yates 2013). I used regular and bold fonts for this style.

According to research on eye tracking by the Neilson Norman Group, how users experience scan text is usually done in specific ways, including in an F-pattern (Pernice 2017). I designed my Featured Projects sections in this way to make these important portfolio pages scannable to my readers.

Additionally, I used bulleted lists with action-verbs, consistent line numbers and number of list items to keep information chunking more easily readable (Loranger 2017). 

During my website design, I had to ensure that the coding and headings, such as level H1, H2, and so on, matched to ensure a logical list order for accessibility.


Buttons

Let's get into buttons! You will often notice that buttons have a small script, or copy, to tell the user (you) how to interact with a product. Buttons have the following main components: structure, sizing, states, microcopy, and color.

While there is no right or wrong way to go with button edges, I went with rounded rectangles because most of my script in the buttons and stacked navigation menu items had long descriptions so I made them more square to add a larger target for users to click (Shen 2018). Also, I wanted to stay consistent, so I avoided using a combination of rounded and squared corners for this website design.

For the microcopy script in my buttons, I avoided ablest language like "View projects" or "Look at projects" because not all users have the ability to see so their experience is invalidated and unrelatable. Instead, I used "Visit projects" often for button text. Lastly, I made sure each button text on a page was unique. Having a "Visit projects >" button that opens a new page every time is confusing.


Logo

Logos are important to show off the feel for any product, design or website. I decided to create my own!

For the Logo, I used Adobe Express, Adobe Illustrator and Canva to design a creative visual that shows movement, the color scheme, and waves coming out of a friendly sloth character's head to show energy and ideas appearing. I chose the sloth character to resemble my work ethic: intentional worker that carefully and sometimes slowly puts together relaxing and empowering work.

Visual layout

The visual layout changed a lot from January to July 2023 as I learned more about user experience (UX) design through Google's UX Professional Certification Program. Below you'll find some iterations of this website homepage for some examples of the evolution of this site. 

Figure 3a. This is the January 2023 version of my website's homepage that had a GIF of a moving red wave around the designer's headshot. However, this was an accessibility compliance issue. There was no way to allow for users to stop the animation, so I selected a static image instead.
This is the January 2023 version of my website's homepage that had a GIF of a moving red wave around the designer's headshot.
Figure 3b. This is the April 2023 version of my website's homepage with significantly larger font size. While I had good intentions for individuals that are visually impaired, I realized my mistake after completing a training. The heading levels were all messed up and made screen reader lists inaccessible with illogical order. I also played around with a white background color.
This is the April 2023 version of my website's homepage with significantly larger font size.
Figure 3c. This is the July 2023 version of my website's homepage as a more sophisticated version with a sloth logo headshot instead of the designer's portrait. After growing as a User Experience (UX) designer, I created a more visually appealing landing page with a logo and button with microcopy text that is inclusive and doesn't say things like "View projects" or "Look at projects".
This is the July 2023 version of my website's homepage as a more sophisticated version with a sloth logo headshot instead of the designer's portrait.

(In progress) Step 3. Testing: color contrast check, validating code, heading order, and more 

There are many ways to test for acessibility but it is important to always check with official regulation guides. I used these guides to test my website:


To test the accessibility of my portfolio website, I also used a handful of comprehensive Google chrome extensions to evaluate the color, text, and overall features of my website. For example, making sure alternative descriptions are added appropriately to all images is critical and can be forgotten. 

Also, I used my knowledge of screen readers and used Non-visual desktop access or NVDA, a highly accessible and free screen reader software, to test for navigation on this website. I will show you below how I used each tool.


Tool 1. Web Accessibility Evaluation Tool (WAVE) 

This is a tool developed by WebAIM.org that provides holistic feedback on the overall accessibility of a website's content based on WCAG 2.1 standards. Results show icons that may require the tester's attention to assess accessibility issues and make changes. It's important to note that not all red flag icons equal non-compliance.

While this tool is comprehensive, this tool is known to show many of the warnings and errors that are potential accessibility issues in addition to the actual problems (Godfrey 2021). For example, the results show 55 contrast errors as potentil accessibility issues. I double-checked these errors in another tool just to make sure the text and background colors are all meeting WCAG 2.1 at level AA standards. Below you will find the WAVE results showing the homepage of this website.

Screen shot image of Web Accessibility Evaluation Tool (WAVE) results on the homepoage of the Mellie Design portfolio website taken on August 8, 2023. The test shows a list and highlights contrast errors, alerts, features, structural elements, and ARIA components on the homepage.
Figure 4. Screen shot image of Web Accessibility Evaluation Tool (WAVE) results on the home page of the Mellie Design portfolio website taken on August 8, 2023. The test shows a list and highlights contrast errors, alerts, features, structural elements, and ARIA components on the homepage. There were not alternative text image errors because my entire website has these descriptions for all images.

Tool 2. Stark Accessibility Tools

I used the Stark Accessibility Checker chrome extension plugin to validate the color contrast error suggestions from the WAVE tool, as an extra precaution to accessibility compliance. All of my text and background color combinations passed at WCAG 2.1 level AA or higher. Below you will find the Stark tool results of the color contrast checks performed on the homepage.

Screenshot of Stark tool color contrast results from testing black and white colors on "Visit all projects >" button on home page of Mellie Design portfolio website. The results show that the black text on a white button background have a 21:1 contrast ratio.
Figure 5a. Screenshot of Stark tool color contrast results from testing black and white colors on "Visit all projects >" button on home page of Mellie Design portfolio website. The results show that the black text on a white button background have a 21:1 contrast ratio. In 2023, this is accessibility compliant at WCAG 2.1 level AA and level AAA for normal and large text.
Screenshot of Stark tool color contrast results from testing black and white colors on "Hi, I'm Mellie" section text and background colors of the home page of Mellie Design portfolio website. The results show that the black text on a beige background have a 16.41:1 contrast ratio.
Figure 5b. Screenshot of Stark tool color contrast results from testing black and white colors on "Hi, I'm Mellie" section text and background colors of the home page of Mellie Design portfolio website. The results show that the black text on a beige background have a 16.41:1 contrast ratio. In 2023, this is accessibility compliant at WCAG 2.1 level AA and level AAA for normal and large text.
Screenshot of Stark tool color contrast results from testing yellow and white colors on "Featured projects" section text and background colors of the home page of Mellie Design portfolio website. The results show that the yellow text on a black background have a 13.59:1 contrast ratio..
Figure 5c. Screenshot of Stark tool color contrast results from testing yellow and white colors on "Featured projects" section text and background colors of the home page of Mellie Design portfolio website. The results show that the yellow text on a black background have a 13.59:1 contrast ratio. In 2023, this is accessibility compliant at WCAG 2.1 level AA and level AAA for normal and large text.

Tool 3. HeadingsMap Chrome Extension

This tool maps out the heading rank structure as a list and highlights any headings that are problematically out-of-order. It's a simple yet super effective tool. It helped me re-organize all my headings and fix them. You'll find images of the some of the page results below with some failing that fail and need a heading re-structuring and some passing pages.

Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design home page. On the left, this will show a menu map of the heading rank order of the current page.
Figure 6a. Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design home page. On the left, this will show a menu map of the heading rank order of the current page. This is a not-so-obvious failing logical heading order with <h1> titles as 1 and <h2> headings as 2. It would make more sense to have "Hi, I'm Mellie" as a <h1> main title and nest things up to <h3> as subheading.
Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design Mobile App page. This is an obvious failing logical heading order with <h1> titles as 1 and <h3> subheadings as 3 immediately after. At the end, there are <h2> headings.
Figure 6b. Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design Mobile App page. This is an obvious failing logical heading order with <h1> titles as 1 and <h3> subheadings as 3 immediately after. At the end, there are <h2> headings. This was flagged with a red box to show that this needs to be fixed and does not pass accessibility standards, which is especially confused to screen reader users. 
Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design Learning Products page. This is smooth pass. The logical heading order starts with with <h1> titles as 1 ends with <h2> headings immediately after in a list of all the products.
Figure 6c. Screenshot image of the HeadingsMap chrome extension test results on the Mellie Design Learning Products page. This is smooth pass. The logical heading order starts with with <h1> titles as 1 ends with <h2> headings immediately after in a list of all the products.

Tool 4. Axe DevTools Accessibility Checker

I used the the Axe DevTools chrome extension by Deque Systems to scan entire website pages for accessibility issues within the HTML code of my website. While Google Sites is a great platform, unfortunately this platform does not allow for advanced HMTL code fixes or editing. I was able to fix ARIA code issues temporarily, and not permanently for now. I am currently in contact with Google's Disability Support team to see if anything can be done. Below you will find some images of the Axe DevTools running on a few pages of this website.

Melliedesign.com homepage test results by the Axe DevTools accessibility checker chrome extension. The tools found 1 critical issue on July 31 at 12:45pm AZ time and suggested to solve an ARIA code problem for the home button in the navigation bar.
Figure 7a. Melliedesign.com homepage test results by the Axe DevTools accessibility checker chrome extension. The tools found 1 critical issue on July 31, 2023 at 12:45pm MST time and suggested to solve an ARIA HTML code problem for the home button in the navigation bar. This is the only common problem encountered in all of the website pages after testing. It appears to be a page link issue in the coding for all links in the navigation page.
Melliedesign.com homepage screenshot where the HTML code is being edited to delete ARIA coding and insert a simple button type for the homepage link in the top navigation bar page.
Figure 7b. Melliedesign.com homepage screenshot where the HTML code is being edited to delete ARIA coding and insert a simple button type for the homepage link in the top navigation bar page.
Figure 7c. Melliedesign.com homepage test results by the Axe DevTools accessibility checker chrome extension for a second test. The tools found 0 automatic issues on July 31, 2023 at 8:41pm MST time. Unfortunately, this is a temporary fix and not temporary due to new Google site's not allowing permanent HTML coding fixes by user. This is currently a discussion I am having with their support team.

Tool 5. NVDA Screen Reader

The global, free, open-access screen reader tool for Windows Operating System computers. This is an awesome tool built and designed by individuals that are visually impaired. I used this to navigate my page and ensure that all parts are navigable and more.

Screenshot image of home page of Mellie Design portfolio website showing the "Welcome to NVDA!" screen reader dialogue box pop-up.
Figure 8. Screenshot image of home page of Mellie Design portfolio website showing the "Welcome to NVDA!" screen reader dialogue box pop-up. 

Here are some key findings from using NVDA:


On a different screen reader, iOS VoiceOver, the search magnifying glass and the caret icon for the nested drop down menu title "Projects" in the navigation bar are voiced as "Image" and do not tell the screen reader user what these icons do, which can be a problem as well. For now, I cannot extensively change the HTML of this Google Site because Google provided very limited capability of doing this, but perhaps in the near future there will be a solution.


Results and conclusion

While Google has it's own Volunteer Product Accessibility Template (VPAT) with results on Google Sites, it was important to manually test my Portfolio website for accessibility. To visit the VPAT or Accessibility Conformance Report (ACR) file provided by Google, visit the Accessibility Information page.

Not all WCAG criteria were presented in this project write-up. Also, not all WCAG criteria applied to this website when testing. For example, if the content contained videos, audio, or live media, then accurate closed captioning, audio descriptions, and transcripts would be required to meet certain guidelines.

In conclusion, creating an accessible website design is not just a matter of compliance; it is a commitment to inclusivity and equal access for all users. A website can look visually appealing and pixel perfect, but can also be inaccessible and not compliant with standards.


With more resources and opportunities, I would like to:


As we embrace the principles of accessibility, we take a significant step towards a more equitable digital landscape, where everyone can fully participate and benefit from the vast opportunities the internet offers. I have a lifetime commitment of continuing to prioritize accessibility in all of my design work, making digital spaces more welcoming and accessible for everyone.


Acknowledgements

A ginormous appreciation for the people, organizations, and resources that are readily available to make a difference in the lives of everyday people, especially to those with different abilities and disabilities.


Sources