Access Living Case Study Banner with examples of screenshots from the website

Access Living Case Study

AAA Web Accessibility 

While working at Mightybytes, I managed the creation of a website for Access Living, an advocacy group for people living with disabilities. Access Living is a leader in the fight for disability rights and wanted its site to reflect its mission. To do this, we were asked to build a site that met AAA web accessibility standards, the highest level of accessibility documented by the World Wide Web Consortium in the Web Content Accessibility Guidelines (WCAG) 2.1. Our goal was to create a site that would set the bar for web accessibility and could serve as a model for others to follow.

Icon of pencil

Discovery

Committing to AAA standards meant thinking about web accessibility from the start and planning how it would be accommodated at each stage of the process. We started with an 8-hour discovery workshop to learn more about what Access Living wanted from its site. During the workshop, I led a user persona exercise, feature and functionality brainstorming, information architecture discussion, and user journey mapping, all of which included conversations about web accessibility. 

Icon of magnifying glass

Research

I worked with team members to research the WCAG 2.1 guidelines. These guidelines have been used by governments around the world to set web accessibility legislation. It was essential that we all understood what was required for AAA web accessibility across design, development and content in order to deliver the site to the correct standards. 

Wireframing

Once our research was complete, I worked with the designers and developers to create a set of HTML wireframes that helped us plan the layout of the site and work through some initial accessibility challenges. Throughout the process, I spoke with Access Living to make sure they were happy with how the wireframes looked and functioned.

Examples of wireframes for the Access Living project in iPads.
HTML Wireframes allowed us to plan the structure of the site and how it would work across devices.

Design & Development

Although web accessibility was the priority, Access Living also wanted a site the was visually appealing. All the examples of AAA sites that we could find had very bland designs – black text on white backgrounds with minimal images or visual flourishes. Part of our remit was to create a design that was aesthetically pleasing while adhering to AAA standards. I worked with the designers to confirm that their designs met all color contrast, spacing, and sizing requirements outlined in the WCAG 2.1. 

Initial designs for the Access Living site

Once designs were complete, the development team began the build. The site was built in WordPress using the Gutenberg editor. Functionality included an events calendar, integration with two email systems, an alert banner, and donation platform integration. I worked closely with the development team to make sure we were meeting all accessibility requirements in the code.

Web Accessibility Features

The site incorporated several unique features that assist people with disabilities. These included:

  • Accessibility controls in the header that allow users to change the color contrast and font sizes on the site.
  • Large full-color image captions that are easier to read than normal captions.
  • Simple icons that differentiate each blog category in order to help people with cognitive disabilities.
  • Visually distinct hover states for links that highlight the text in a different color.
  • Visual indicators on “read more” and “download” links to help users understand what would happen if they clicked on the text. 
Screenshots of the color contrast function

User Testing & QA

Throughout the project, I used SiteImprove, a web accessibility tool, to confirm that we were meeting AAA standards. This included running regular scans on individual pages as well as running several site-wide scans. I also carried out extensive testing across different browsers and devices to catch any issues before the site launched.

Additionally, I provided Access Living with guidance on how to run user tests for people living with disabilities. 

Screenshots from a web accessibility tool

Project Management

As project manager, I was responsible for keeping the website to scope, on budget, and on time. I began by creating a 20-page Scope of Work document that outlined the process we would use and the scope of the project. The client and all team members signed off on the document to ensure that we all started on the same page.

As the project progressed, I set up and managed a detailed schedule of tasks and provided bi-weekly budget reports. After the site was built, I provided a WordPress training and created a CMS handbook for Access Living to use when updating its content.

Collaborative project management tools were used to organize the project tasks and schedule.