AAA State of Play Web Store Magento 1 to Magento 2 Migration

Client

www.aaastateofplay.com www.playgroundequipment.com

NVB Playgrounds, Inc. was founded by Nancy, Victor, and Nicolas Breedlove in 2006, USA. PlaygroundEquipment.com is an online high-quality playground equipment outfit for commercial use and their manufacturing line of playground equipment. They launched a second website the same year, AAA State of Play is a commercial playground equipment company.

Our relationship with Nicolas Breedlove and his team began in 2011 with the Playground Equipment store.

STARTING POINT

In September 2020 our long-term customer Nicolas contacted us, he got a lawsuit on ADA against his website the PlaygroundEquipment.com. Nicolas asked us to do some changes to both of his live websites and make them accessible by the WCAG 2.0. ADA is the acronym for the Americans with Disabilities Act. It provides that people with disabilities can purchase goods and services in the same manner as everyone else. The Web Content Accessibility Guidelines (WCAG) is an internationally recognized standard created by the World Wide Web Consortium (W3C), it contains three levels of accessibility – A, AA, and AAA. The statistics say today only 1.9% of websites are fully accessible by people with disabilities.

GOAL

The task was to fix critical elements of the website and meet the requirements of at least 75% to WCAG 2.0 Level AA accessibility. It was one of the first experiences at improving the website with requirements of Web Accessibility and Nicolas trusted our team.

PROCESS

At the beginning, we decided to implement the tool called “AccessiBe”, it’s fully automated Web Accessibility Solution for ADA & WCAG Compliance. Nevertheless, the AccessiBe solution is no help with the lawsuits, it just changes the appearance of the websites, and the score of Web Accessibility was still low.

So, we installed the AudioEye tool for the checking of the live websites. Due to this tool, we identified the main Accessibility errors of the websites and could fix them. Our designer highlighted the requirements of the Web Accessibility which helped us to get high results. Below the list of them:

1. The links and interactive elements should be at least 44 by 44 pixels.
2. The font size should be at least 14 px.
3. The contrast of the element and its background should be sufficient.
4. The contrast of the element and its surroundings should be sufficient.
5. The titles. The H1 title should only be one per page. The first title in the code should be either h1 or h2. The sequence of the titles should not be broken.
6. All images should include alt text tags.
7. To hide elements use position:absolute; top:-10000px; instead of display: none

Now, we can do accessible designs on the mock-up milestone. At the phase of the mock-ups for the live and websites in development, we applied the changes with requirements of Accessibility.

ACHIEVED RESULT

Finally, the websites met the requirements of The Web Content Accessibility Guidelines, the result of the PlaygroundEquipment.com is 95% to WCAG 2.0 Level AA accessibility, of the aaastateofplay.com is 93%. The special-needs users’ experience improved a lot!