Making Eco-Therapy Accessible

My process began by analyzing the existing state of my client’s website and identifying what needed to be changed. I started with a basic heuristic analysis, where I identified pain points and inaccessible features. I also assisted my client with editing down the site content at this point, which laid the groundwork to implement my new design.

Heuristic Analysis

I began by doing a heuristic analysis on the original site to determine what would need to be changed. My client was primarily focused on redesigning the homepage, so I started there. The main issues were determined to be keyboard accessibility, large blocks of text that needed to be edited down, and some inconsistent styling. The initial points I found included:

• Drop down menus were not keyboard accessible
• Green accent color is too light against photo background
• Too many large blocks of text that do not serve the user
• The call-to-action buttons did not stand out
• The client stories were disjointed and in an inaccessible tab box
• The headings were not consistently in a single font

These, plus insight from my client on what she wanted changed, gave me many actionable items to work on as I began the redesign process.

My client’s main goal for her website redesign was to comply to accessibility standards. I focused on ensuring the website was visually accessible, usable though keyboard interactions, and passed an accessibility checker. Most of the changes made were minimal to the overall design, but made the site more usable, especially for those with disabilities.

Color Accessibility

The primary accent color did not pass AA level contrast when used as a background for white text. Changing it to a slightly darker shade allowed for a better contrast ratio without compromising the overall visual design. This also approved the appearance of colored text on photo backgrounds and, in my opinion, improved the color balance of the design system.

Skip Buttons

To allow for simple keyboard navigation, I added skip to content and skip to navigation to the top of each page. As the menu increased in size, I wanted to give keyboard users an easy way to navigate to the content without getting bogged down by having to navigate through an excessive number of menu items.

Font Size Toggler

I added a font size toggler under the primary navigation bar. This gives users a simple option for visual accessibility without relying on their own browser plugins. It does not change the size of headings, which are already large enough to be accessible to minimize disruptions to the overall intent of the design.

Tabindex

The original theme used for the site did not include keyboard accessibility features for all of the blocks. I manually added tabindex elements to the tab box and buttons to make the site usable by keyboard. I replaced elements where this was not possible with alternatives.

Final Thoughts

Overall, I’m happy with my work on this project. I had the opportunity to revisit my work after a year and reflected on the skills I’ve gained in that time. I have become much more familiar with WordPress and was able to advise my client on a handful of performance improvements during my second pass. I was also able to identify a couple of accessibility improvements I had missed the first time, such as unreadable text against a photo background and missing alt text. If I had more time to continue working on the site, I would:

• Improve site metadata to optimize SEO results.
• Discuss a design system redesign, modernize brand colors and fonts.
• Change the base theme to improve accessibility and ease of content updates.
• Discuss ways to improve site performance with the web host.

I am always looking to improve my skills and am happy to recognize that time has given me the opportunity to do so. I hope to continue this trend of improvement as I work on new projects!