A man sitting on a chair, wearing headphones and working at a desk in a room with natural light from a window, with a walking cane leaning against the curtain.

Learning Accessibility Design

Completed training to become an Accessibility Designer & Specialist

Scenic landscape with a large body of turquoise water, green hills, and a mountain range with cloudy sky in the background.
Training Impact →
Feedback →

Project Overview

The Challenge: The Accessibility “Level Up” program is an internal CapTech Training Program designed to prepare participants to serve in accessibility roles or complete accessibility activities and deliverables on client engagements.

The Accessibility “Level Up” program is an internal CapTech Training Program designed to prepare participants to serve in accessibility roles or complete accessibility activities and deliverables on client engagements.

Key Activities + Deliverables:

  • Conducted an accessibility review and feedback for designs and advised on best practices for designing inclusive content and UX interactions.

  • Annotated design documents for development hand-off and produced accessibility reporting documents.

  • Designed wireframes and high-fidelity visuals that follow accessibility best practices and conform to Web Content Accessibility Guidelines (WCAG) 2.1 AA standards.

  • Conducted technical accessibility testing, such as automated testing and manual testing in a developed environment, providing remediation notes, recommendations, and support.

  • Learned how to provide emerging subject matter expertise on broader accessibility topics like laws and standards, organizational strategy, and operationalizing accessibility; and supporting business development.

The Result: My technical skills and understanding about accessibility have grown immensely - as has my passion for it. Also, understanding how accessibility benefits all users and business goals

Tools

  • BeInclusive

  • AxeDev Tools

  • Wave Browser Extension

  • Stark

  • Excel

  • Figma (Annotations & DevMode)

  • Color Contrast

Firm & Team

CapTech Consulting - Internal Training

My Role

  • Accessibility Analyst & Designer

Timeline

  • 6 Months

  • August 2024 - March 2025

Part 1: Accessibility Assessment

The Learning Process

Part 2: Accessibility Redesign
Training Background

Accessibility Training Assessment

While learning from Accessibility Small Matter Experts (SMEs), and completing bi-weekly assignments, and readings; the final assessment required us to technical showcase everything we have learned.

Background

Performed a Current State Accessibility Audit and Redesign

In the final assessment, “Level Up” Program participants chose websites to perform a current state accessibility audit, design a future-state website experience that contains all accessibility recommendations, as well as providing accessibility annotations for development. Also, took and passes a written, multiple choice 50+ question exam within one hour, focused on accessibility knowledge and WCAG requirements.

The Approach

  • Performed automated scans on 2 webpages using axe DevTools, Wave Browser Extension, and other industry-standard tools, to quickly identify existing accessibility violations.

  • Conducted thorough manual testing on the same pages, including keyboard testing and screen reader testing - of content and functionality from each website page to reveal more complex and nuanced accessibility issues.

  • Redesigned the 2 webpages that complies with accessibility best practices and conforms to WCAG 2.1 AA standards, including accessibility annotations.

1. Audit Approach & Tools (WCAG 2.1, Axe DevTools, Manual Testing)

There are hundreds of automated tools out there that scan for accessibility issues! It can be so overwhelming, especially if you’re new to the tools and the field. I leveraged certain automated tools because my instructor/mentor taught me his secret sauce steps in performing assessment, and I adopted it as well. They are listed below:

  • Google Chrome Web Browser: This browser allows to easily inspect the code, and leverage industry-standard tools with ease

  • Axe DevTools: to perform a full-page scan on the webpage, flagging for accessibility best practice issues and WCAG 2.1 AA non-compliance

  • Wave Browser Extension: to perform an additional scan on the webpage, specifically best leveraged to highlight heading issues, form label issues, etc.

  • Axe DevTools: use this tool again for specific automated tests, such as: interactive elements, images, tables, keyboard, forms (when relevant), structure, modal dialog (when relevant).

These automated tools will scan a page and generates reports on a few different categories, including performance, accessibility, and SEO.

PART 1: ACCESSIBILITY ASSESSMENT

Select E-Commerce Website: REI Co-op

I selected REI Co-op for my final assessment because I love the brand, hello dream job alert, and I wanted to know whether REI actually met WCAG 2.1 AA compliance for its online users.

Screenshot of the original REI Co-op website home page. with minor accessibility issues.
screenshot of Axe Dev Tools being used on a website, and how it flags certain issues
Screenshot example of the tool Wave being used for automated scan

2. Document Flagged Issues

As you perform step 1: automated scans, one should have a designated place set up and ready to document all the valid accessibility issues found throughout the scan, and will be used and referenced throughout the rest of the assessment process.

I leveraged these documentation tools for this assessment:

  • BeInclusive: an online tool that documents every accessibility issue for a designated project, and easily generates and exports an accessibility report for your client deliverable

  • Excel: well structured excel table template that annotates each individual issue, what WCAG standard it fails to meet, remediation notes and much more.

I found 44+ WCAG 2.1 AA issues and failed accessibility best practices on just 2 of REI’s webpages (home page & individual product page)

Something to consider: Automated Scans are a great aid in getting started in your assessment, but every single issue it flags should be vetted by an accessibility analyst. And when they get flagged, the issue and remediation is not always so obvious and requires you to dig into the code to understand why it’s being flagged in the first place. Not all flags are created equal essentially!

When documenting an issue, you have to identify it, provide an explanation, and remediation. This is where your knowledge and expertise gets tested, and can be the most time-consuming aspect of the process, especially for us newbies. The flagged issue must be succinct and understandable for both the client, and the developers to asses and fix when it gets delivered to them.

Example of BeInclusive, an accessibility documentation tool

3. Conduct Manual Testing

Once you have checked off all of the automated testing, and necessary documentation for any valid flagged issues, we get our hands dirty with manual testing now.

Manual Testing consisted of:

  • Keyboard Testing: conduct this across all browsers (Firefox, Chrome, Edge, Safari), ensuring the experience meets standards and is consistent. I tabbed through each interactive element, testing whether it will get stuck in a loop or not perform the way it should

  • Screen Reader Testing (VoiceOver): this was performed on Safari, and took the longest to get use to and be able to identify when thing said not sound or say what it should

  • Reflow: this tests whether the site has a responsive design layout, essentially will elements of the site break based on certain devices/screen sizes

  • Text Resize: all content should be customizable per the user’s preferred browser settings. You test this by going to chrome’s settings and changing the font size setting to 200% its size (32 px)

  • Text Spacing: all content should still be legible if the spacing between each letter and word was altered to the user’s needs/preferences. AN online browser extension assists in adapting the website’s text to display it.

  • Color Contrast: you essentially give the website a once over with your eagle eyes and test the color contrast between certain elements using the WebAim Color Contrast Checker and an eyedrop color picker tool

  • Poor Links: scan for all content that leverages only color to identify it’s an interactive element

  • Assess the Content: scan the written content and whether it meets WCAG standards

  • Accessible Names: Dig into the code of the website, and all interactive elements, ensuring they have an identified accessible name listed fo fit

  • Form Labels: If any are present, inspect the fields code to ensure it has the right format in its build

screenshot of the REI Product Image gallery featuring an interactive element embedded into the images, highlighting featured REI products

The image is of the REI Co-op Image gallery for an indivudal product. It seems the image gallery, when opened - features interactive elements embedded into the images, highlighting and linking to featured REI products
Issue: interactive elements fail to meet WCAG 2.5.8 Target Size (Minimum), aka touch target spacing was insufficient in the current experience.

Part 2: Redesigned Screens: Before vs. After

REI E-Commerce Website

REI Co-Op was graded a solid B+ for it’s Accessibility Assessment

What is REI doing right in regard to accessibility?

  • Alternative text for visuals and product colors, and product images were present

    • This is important because some users rely on assistive technology, such as screen reader users, to read/interpret the website content. Shopping has traditionally been a visually’heavy experience. How does one purchase an item when they have low-vision or are fully blind? How do you know you’re buying your desired hiking boots with your fashion and functionality preferences? Alt text is crucial in e-commerce sites because of this context, for one example.

  • Has an accessibility statement and ensures all assistive tech users have it prioritized in their tab order

    • Accessibility statements are important for several reasons:

      • Show your users that you care about accessibility and about them

      • Provide them with information about the accessibility of your content

      • Demonstrate commitment to accessibility, and to social responsibility

      In some situations, you may be required to provide an accessibility statement, such as public bodies in countries that implement the EU Web Accessibility Directive . The W3C list of Web Accessibility Laws & Policies can help you identify policies applicable to you.

FYI - Redesigns are coming soon!

Training Impact

My technical skills and understanding about accessibility have grown immensely - as has my passion for it.

1 Live Client Experience

under my belt as an Accessibility Analyst, our assessment resulted in the project being extended

5+ Quick Accessibility Audit Asks

in which I provided quick accessibility audits for business development work and current client engagements

10x More Confident

in using industry-standard testing tools, assessing digital experiences for accessibility, providing detailed annotations for WCAG issues and discussing it with clients and teammates

Training Feedback

  • Accessibility SME, Instructor

    “As a continuous learner, Gaby's openness to feedback and eagerness to ask questions were commendable. She consistently viewed feedback as an opportunity to grow, diligently flagging items she needed further clarification on. Gaby's willingness to dive into new tools and activities without hesitation showcased her drive to broaden her capabilities.

    Looking ahead, Gaby should seek more practice and exposure to accessibility and front-end development. Enhancing her knowledge of WCAG criteria and assistive technology will better equip her to accurately identify and describe accessibility issues, further closing any skill gaps.”

Reflections on Inclusive UX Practices

Good Design is Accessible Design

Accessibility design matters because it ensures that products, services, and environments are usable by people of all abilities, promoting inclusivity and improving the experience for everyone.

It's not just about meeting legal requirements or accommodating a certain group of people, this benefits everyone. It's about creating a better experience for all users and fostering a more equitable society overall.

Illustration of a person standing on a stool, working on a mobile phone UX/UI layout

Other Case Studies