Accessibility Audit & Redesign
Completed training to become an Accessibility Designer & Specialist
MY ROLE
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.
Program participants attended bi-weekly sessions from August 2024 to March 2025, completing required readings, trainings, and assignments, with a final assessment at the end.
Skills Involved: Accessibility Design, Accessibility Testing, Accessibility Analysis, Design & Dev Annotations
Tools: BeInclusive, AxeDev Tools, Wave Browser Extension, Stark, Excel, Figma (Annotations & Dev Mode), Color Contrast,
Timeline: ~ 6 Months, August 2024 - March 2025
Firm: CapTech Consulting - Level Up Accessibility Training
Team: Myself (Accessibility Analyst & Designer), Matt L. (Accessibility SME & Instructor)
LEARNING OUTCOMES
Understanding how accessibility benefits all users and business goals
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.
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.
FINAL ASSESSMENT
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. Perform Automated Scans
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.
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.
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
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.
ACCESSIBILITY DESIGN REWORK
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!
The Results
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
Expanding my technical knowledge on code to grow as an emerging Accessibility SME in 2025
5+ instances 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
What I Learned
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.
Client & Team 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.”