A Large-scale Multinational Supermarket
Helping Reach A Wider Audience
The customer had an existing web store built using AngularJS. They brought Axelerant on board to make it compliant with WCAG 2.0 AA guidelines through extensive user testing and following best practices.
About the customer
A popular grocery chain with a global presence and focus on healthy foods and sustainability. Its products include beverages, body care, snacks, frozen foods, pantry staples, and supplements, among others.
The customer had an eCommerce website that was not compliant with web content accessibility guidelines.
They wanted to create an inclusive web shopping experience that would enable people with disabilities to use the website to shop during the high traffic holiday season.
This involved testing accessibility for a varied set of people with disabilities using a variety of tools. It also involved refactoring templates on a legacy AngularJS codebase.
We refactored the code to make the website accessible per WCAG 2.0 AA guidelines. These address the biggest and most common barriers for people with disabilities.
Testing for Accessibility
The testing was fully owned by our development team and a partner’s quality assurance team. These are a few of the aspects we tested:
- Tested web components and pages for full keyboard accessibility
- Tested all web components and pages using a screen reader
- Testing color contrast issues using WAVE Tool throughout the website
- Testing heading structure, labels, and document structure using WAVE Tool throughout the website
Tools used for testing
Our efforts helped create a more inclusive web presence for the customer’s holiday meals business. This will help increase traffic to the estore as more people with disabilities will be able to order their meals online.
This ensures the customer’s website conforms to Section 508 accessibility requirements of the United States Access Board. It also helps to maintain customer loyalty and brand value and helps the customer avoid potential lawsuits.
- Accessibility Per WCAG 2.0 AA Compliance Checklist
- AngularJS and Accessibility
- Accessibility Testing Using Screen Readers
Accessibility Per WCAG 2.0 AA Compliance Checklist
Accessibility was developed and tested using the WCAG 2.0 AA Compliance Checklist as applicable to the type of website. Apart from AA compliance there were some items included from AAA compliance as well as customer requirements.
AngularJS and Accessibility
AngularJS has good support for various accessibility attributes that needed to be added to the web components. We extensively used AngularJS’s Accessibility Documentation throughout the project.
Accessibility Testing Using Screen Readers
People with visual impairment use a wide variety of screen readers on different devices. According to a number of surveys conducted through the years by WebAIM, around 90 percent of the screen readers used worldwide are one of three: JAWS, NVDA or Voiceover. We targeted our development and testing efforts towards making all of the customer’s web pages accessible via these three screen readers as much as possible.