Stewmac.com
Overview
Stewmac needed to shift from a reactive to a proactive accessibility approach in order to reduce costs and improve performance of their website by incorporating universal design principles.
A lack of a formal plan for incorporating and managing accessibility efforts for the stewmac.com website was a major concern amongst Stewmac’s leadership team.
Timeline: 8 weeks
My Roles: Accessibility Analysis
Actions
Stewmac.com was evaluated using a three tiered approach to determine whether the current state of stewmac.com follows best practices for accessible design as outlined by the Web Content Accessibility Guidelines 2.1 (WCAG 2.1).
Documentation was provided that identified violations according to WCAG 2.1 and outlined strategies for making stewmac.com content accessible to users with disabilities.
The three tiered evaluation utilized the following methods:
Automated code inspection
Manual Code Evaluation
Experience Walkthrough
Automated Code Inspection
An automated code inspection was performed using SortSite, a software for auto-evaluating web code. Level A and AA violations were recorded and Techniques for achieving WCAG 2.0 compliance were documented.
Figure 1: Level A and AA violations identified by SortSite
Manual Code Inspection
A manual code inspection was performed using the developer tools in Google Chrome (Version 86.0.4240.198).
Mobility issues were tested by tabbing through the Home, Search Results, and Product pages in order to assess whether the tab order followed the top left to bottom right pattern. A check for Skip navigation and Skip to content links was performed. Controls were evaluated for their ability to select options via the up/down arrow keys.
Vision issues were evaluated by examining ALT text to determine if the text was informative. Button labels were inspected to confirm that their labels described the intended function and labels were used consistently. Page content was resized to determine whether content reflowed optimally. Dynamically refreshing content was assessed to determine if screen readers announced the new content on refresh.
Figure 2: Manual code inspection in Google Chrome
Experience Walkthrough
A two part experience evaluation was performed to simulate what a user with low vision and mobility issues experience when browsing stewmac.com. A screen reader and magnification/zoom tools were used during the low vision simulation. Keyboard-only navigation was utilized to simulate how a user with mobility issue would interact with content on the pages.
Results
The automated code review revealed an average of 11 violations per page evaluated. All pages evaluated failed at both A and AA levels.
The majority of the failures involve the lack of accessible names for img elements, markup errors, duplicate IDs, and input buttons that lacked value attributes and labels.
The manual code inspection revealed consistent tab order, with the exception being the header area. Button labels accurately described the intended function consistently across all pages. Page content reflowed optimally and alt text was generally informative. The experience walkthrough revealed severity levels ranging between minor and severe.
Lessons Learned
The methodologies outlined in this case study should not be viewed as a “cure all” for accessibility. Adopting a proactive approach to accessibility — one that embraces universal design from the onset, should be the norm and not the exception.