Context

Whole Foods is a subsidiary of Amazon, and a supermarket chain that sells products free from hydrogenated fats, artificial colors, flavors, and preservatives.

This project was part of my graduate studies coursework in 'Accessible User Experience,' where I independently evaluated a sample of pages from the site to check its conformance with WCAG 2.1 AA standards.

Evaluation Date: Nov 02, 2023 (Thu)

Please note: This study refers to the version of Whole Foods website available on Nov 2, 2023 and the site may have since undergone changes. This evaluation is for educational purposes only and is not affiliated with Whole Foods.

Scope of the Evaluation

Scope of the website: All web content of the online shop of Whole Foods Market located at - https://www.wholefoodsmarket.com/shipped-to-you

WCAG Version: 2.1

Conformance target: AA

Accessibility support baseline:

  • Web browser: Google Chrome (version 118.0.5993.117)

  • Apple with VoiceOver

  • Apple with Accessible Keyboard Navigation

Tools Used

  • ANDI plugin

  • Wave plugin

  • ‘Inspect’ feature in Google Chrome

Sample Pages

This evaluation will cover a sample of 3 web pages from wholefoodsmarket.com and the checkout page on Amazon.com.

1. Home Page of Whole Foods 'Shipped to you' Interface

3. Product Detail Page

2. Category Product List

4. Amazon Checkout Page

Evaluation Summary

Based on this evaluation, the Wholefoods website is close to meeting WCAG 2.1, Conformance Level AA.

Reported on 44 of 50 WCAG 2.1 AA Success Criteria.

  • 30 Passed

  • 6 Failed

  • 5 Cannot tell

  • 3 Not present

  • 6 Not checked

The below checks failed the WCAG 2.1 AA level -

1. Non-Text Content

1.1.1 Non Text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for some situations.

Page: Product Detail page

Issue: The page contains a 'Nutrition label' presented in an image format with text about nutrition. There is no alt-text associated with this information, making it inaccessible.

Explanation: The image list in the product detail page is focusable and has an aria label which is hidden [aria-hidden=true] indicating that the code is implemented in a way that it can be ignored by assistive technology.

2. Use of Color

1.4.1: Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Page: Amazon Checkout page

Issue: For hyperlinks on the checkout page (on the Amazon website), non-colour cue (underline) only happens when the mouse hovers over the link or when the link receives focus.

3. Contrast (Minimum)

1.4.3: Contrast: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except in certain situations.

Page: Product Detail page

Issue: This page has the weight of the product listed in ounces which is in grey font with very low contrast (3.23:1)

4. Non-text Contrast

1.4.11: Non-text Contrast: The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s).

Page: Amazon Checkout page

Issue: When a user uses the keyboard navigation, most of the focus elements have sufficient contrast, however certain elements like Form fields that require the user to enter a gift card code, and checkboxes that promp the user to Subscribe and save, have a light blue external focus indicator. This colour against the white background has a contrast ratio of 1.18:1 which fails the check.

5. Content on Hover or Focus

1.4.13: Content on Hover or Focus: Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true: Dismissible, Hoverable, Persistent

Page: All Whole Foods pages

Issue: The search bar on all pages of the Whole Foods website expands to display categories when clicked or when keyboard focus is applied. However, there is no clear 'close' icon or label to exit this feature. If the user clicks outside the box in the header or footer (on short pages), the box doesn't close; it only closes when the user clicks outside the box in the body area of the page. Additionally, when keyboard focus is on the search bar, the menu automatically expands to show the categories. This means the user must tab through all the categories before accessing the next item in the header. Even after tabbing through all the categories and moving to the next item in the header (after the search bar), the menu remains expanded, obscuring other content in the body.

Additional Violation: 2.1.2: No Keyboard Trap

If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.

6. Keyboard

2.2.2: Keyboard : All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.

Page: Amazon Checkout page

Issue: Some functionalities like informational links 'learn more', and a few radio buttons (one option in selecting the delivery speed section) are not operable through keyboard navigation.

End of page