We help a San Diego based gourmet grocery store website to become an accessible with WCAG 2.1 AA level standards Compliant!

We help a San Diego based gourmet grocery store website to become an accessible with WCAG 2.1 AA level standards Compliant!

The client brief:

The client has a local neighborhood gourmet grocery store was founded by a local family with multiple locations in San Diego and Riverside. They carry a fantastic selection of organic, natural, and specialty foods at rock bottom prices. They deliberate on taste, ingredients, quality, and price and choose only a handful of items. They find the best products and the best prices.

Challenges:

  • The company faced lawsuits and litigation due to glaring accessibility and ADA compliance issues. They wanted to make their website WCAG 2.1 AA ADA complaint as soon as possible.
  • Moreover, they wanted to be self-sufficient to change the banners, Weekly Ads, and content from the website.
  • The Weekly Ad were been posted as an image and PDF. The content on the image and PDF was inaccessible.
  • The career section contained a form that the user needs to download first and then they can fill it up and submit it. Instead of it, they required a form that was ADA compliant, and whenever user submits the form, they will get a printable version of an ADA compliant PDF.
  • The career form was added as a PDF, which cannot be filled and submitted by visually challenged people.
  • They had Instagram feeds and Google Maps integration in a way that was partially accessible. The Google Maps integration was there for their store locator. In that, form inputs do not have an associated text label.
  • There were no captions added to the embedded YouTube videos.
  • On the Contact page, they have used checkboxes to make forms collapsible which was making it inaccessible.
  • There were few PDF documents which were linked with pages. Unless authored with accessibility in mind, PDF documents often have accessibility issues.
Industry

Multi-location Grocery Store

Project Size

Medium

Services
  • Automated and Manual Website Accessibility Audit
  • ADA Web Accessibility Implementation
  • ADA website accessibility consulting
  • ADA web accessibility remediation and support
Platform

WordPress

website accessibility audit
wcag level standards compliant

Our Approach and Solution:

Initially, we conducted a website accessibility automated and manual audit to check the conformance of the website with W3C’s Web Content Accessibility Guidelines (WCAG).

The standard level target for their website was WCAG 2.1 Level AA. The main challenge was, although there were number of critical errors in respect to compliance; the website did not pass the AA standard criteria. Based on the initial evaluation, a few guidelines were failed from WCAG 2.1 level AA.

We have prioritized page structure, alternative texts, forms, etc. for addressing inaccessible features of their website.

For the Weekly Ads section, we have set up a custom dynamic ADA compliant application in the backend; so, they can change it frequently by themselves in a way that is accessible to people with disabilities.

The client had opted to remove YouTube Videos and Google Map Integration from website to ensure that the website is accessible.

We provided them with a detailed ADA web accessibility evaluation / audit report in a variety of testing environments on many browsers. Moreover, our team of designers, developers, and project manager have taken a part in both the training and informal consultations hosted during their accessibility program.

Once we were done with Custom ADA Remediation service for WCAG 2.1 AA Standard Compliance, we ensure their ADA Attorney review Compliance Remediation reports and give consent to go live with New ADA Compliant website.

Using our entire suite of services including ADA web accessibility audit, Custom ADA web accessibility remediation and support, and consulting; our client was able to transform their website to ADA WCAG Compliant.

Evaluation and Validation Tools

WAVE, Google Lighthouse

Manual Review

  • Evaluating color contrast: A11Y color contrast accessibility validator.
  • Evaluating black and white contrast: Grayscale Black and white (Google Chrome extension)
  • Evaluating if the website is accessible by keyboard and looking for the keyboard traps.
  • Listening to the website with the screen reader: NVDA (NonVisual Desktop Access), iPhone VoiceOver.

Result

With all the design and web accessibility best practices, we have made their website ADA WCAG 2.1 AA level compliant and ensure in order to be compliant they follow ADA WCAG 2.1 AA best practices for website updates and future changes.