<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=278116885016877&amp;ev=PageView&amp;noscript=1">

Customer:

A Large-scale Multinational Supermarket

 

Industry:
Retail

 

Services: 
Web Accessibility Compliance | Website Design Refresh

Technologies:
Drupal 7, AngularJS, HTML, CSS

 

Tools:
JAWS | NVDA | VoiceOver | TalkBack | WAVE Browser Extension

 

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.

 

450+

stores

20+

U.S. states

30+

history of operation

 

Business Challenge

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.


 

Solution

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

QA-Tech-Stack-WAVE.png
QA-Tech-Stack-NV-Access.png
QA-Tech-Stack-Android-Accessibility-Suite.png
QA-Tech-Stack-Voiceover-Utility.png
QA-Tech-Stack-JAWS.png
  

 

Results

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

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.

✖