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.
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.
