NONA Vegan

Delicious, artisan, vegan pasta sauces.

(This site is still in development but is close to launch. Images coming soon)

This Canadian brand was expanding to the US market and required a site that meets ADA laws in the US. Since they also have a Canadian version of the site, they needed a region selection pop-up and minor changes to make their site US friendly. The owner, Kailey, is delightful and if you see the sauces near you, definitely check them out.

Some accessible features to note

Text

The majority of the text on the site has very strong contrast at 14.8:1 and meets WCAG AAA for any size text. Even though the contrast is strong enough for any size, the main paragraph text is set to 20px. The easier the text is for everyone to read, the better.

Some of the buttons are located in areas with blue or green backgrounds. In order to maintain adequate contrast when you hover over those buttons with a mouse, they get a white background and an orange border. Orange text on a coloured background would be much more challenging to read. Orange on white is much easier.

All links are underlined. Links that are in focus or that are active gain a solid 2px black border, this makes the site much easier to navigate using a keyboard.

A screenshot of a headings map result. Story - NONA Vegan US. 1- Story. 2- Mission. 2-Vision. 2-Values. 2-A note from Kailey.

All of the headings use the HTML heading tags that respect the correct hierarchical order that they are displayed in. That simply means that a level 1 heading is the main heading and is followed by level 2 headings and then level 3 headings (when needed).

Any text that is displayed over an image is proper text that can be highlighted, zoomed and copied and read by screen readers or bots. The only exceptions are any text that is present on product packaging, and so, has to be embedded in the image, and the NONA Vegan logo at the top.

Alternative text

At the time the site was launched, all images had alternative text that properly described what is visible in the image or the title of the page the image is linked to. This site does include some decorative swirls that are abstract. They only give some visual aesthetic value to the page and so alt tags are blank in those cases.

Forms

All form fields have proper labels that are not simply placeholders. The fields use semantic HTML and can be fully operated with a keyboard.

Element order

The elements on the page are the same order in the code as they are displayed on the screen visually. This helps anyone using a screen reader experience the site in the same order that a person seeing the site would.

Audit scores

Multiple accessibility auditing tools give the site 100% compliance. The only issues highlighted are those that require manual review. When auditing a website, it’s important to use multiple auditing tools because different tools can find and highlight a different selection of issues.

Automatic testing tools don’t catch everything, obviously. But none-the-less they are helpful for some accessibility issues and an important step as part of a complete auditing process.

A screenshot of the results of a Lighthouse accessibility audit. 100% Accessibility. A portion of the NONA Vegan Alfredo Style sauce product page is also shown. The top of the packet of sauce with the words NONA as well as the title Alfredo Style.
A screenshot of the results of an axe DevTools audit version 4.4.2. URL: https://nonavegan.com/products/alfredo/ 
Total issues: 17. Automatic issues: 17. Needs Review: 17. Critical: 0. Serious: 0. Moderate: 0. Minor: 0. Best Practices: on. WCAG 2.1 AAA
The 17 issues have to be checked manually and so, in terms of what can be tested automatically, this is a perfect score.