Accessibility Evaluation

Issues:
Digital accessibility audit Tony's Chocolonely US website

(Issues only)

Scope of the evaluation

Website name Tony's Chocolonely US Website
Date 10 May 2022
Scope of the website The scope of the audit includes:
  • All pages of the US website of Tony's Chocolonely tonyschocolonely.com/us/en.
  • PDF documents on the US website of Tony's Chocolonely tonyschocolonely.com/us/en.
The scope of the audit excludes:
  • Sub-website(s) where the HTML and/or the system differs from tonyschocolonely.com/us/en, such as the payment page on live.adyen.com.
  • All external systems and websites linked to on tonyschocolonely.com/us/en.
Conformance target WCAG 2.1 level AA

Detailed audit results

Number of findings: 142

1. Perceivable

1.1 Text Alternatives

1.1.1 Non-text Content (Level A)

Information about success criterion 1.1.1 Non-text Content

Outcome: Failed

Finding 1: The cookie image within the cookie notification is an SVG-element without alternative text. SVGs are not always ignored by browsers and assistive technologies. The best practice is to hide decorative SVGs with aria-hidden=true. This also applies to the SVG arrow icons, for example the icons next to the news items on the homepage and the image next to 'create account' within the login function in the main menu.
And it also applies to the SVG image next to 'Impact beans' in the shopping cart in the header at the top of each page, when there is at least 1 product present in the shopping cart.

Finding 2: The image on page tonyschocolonely.com/us/en/nopage contains alternative text, but it does not describe the image in terms of content ('We couldn't find the page (404)'). Make the image decorative by leaving the alt attribute within the img element blank. This ensures that no unnecessary text is read out to visitors who use screen readers.

Finding 3: The alternative text of the image on page tonyschocolonely.com/us/en/our-mission/news/were-the-proud-new-owners-of-a-choco-factory does not describe the content, but only corresponds to the title of the page. Leave the alt attribute of decorative images blank, or add a descriptive alternative text to the image.

Finding 4: On page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021, several paragraphs have an image of text as the first letter, for example the 'A' in the first paragraph under 'Hey there'. These images have no alternative text. Therefore, for visitors using assistive technologies, it is as if there are letters missing from the text.

Finding 5: On page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021, logos including the Fairtrade logo appear without alternative text. The alternative text of a logo must at least include the name of the organization.

Finding 6: The header on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 contains img elements without alternative text. Add an alt attribute but leave it blank so screen readers can ignore the images.

Finding 7: The canvas elements on page tonyschocolonely.com/us/en/design-your-own-wrapper have no textual alternative. Non-sighted users currently do not know that an image is available. Provide an alternative text (f.i. using aria-label and role="img").

Finding 8: The PDF 'Easter Chocolate Shopping Guide' contains 1077 figure elements without alternative text. Tag decorative images as artifact and give information images a descriptive alternative text.

1.2 Time-based Media

1.2.2 Captions (Prerecorded) (Level A)

Information about success criterion 1.2.2 Captions (Prerecorded)

Outcome: Failed

Finding 9: The video about Joshua Kissi on page tonyschocolonely.com/us/en/other-stuff/reframed contains Dutch language subtitles. Therefore, the language of the subtitles does not match the main language of the page (en-US). Add English subtitles to solve this issue.

1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)

Information about success criterion 1.2.3 Audio Description or Media Alternative (Prerecorded)

Outcome: Failed

Finding 10: The videos on page tonyschocolonely.com/us/en/other-stuff/reframed do not contain audio descriptions. audio descriptions are spoken text added to the standard audio track to describe important visual information that cannot be understood from the standard audio track. Often audio descriptions can be turned on or off in a video player. Audio description is important for blind or visually impaired viewers who cannot see what is happening or appearing on screen. Add a media alternative, e.g. a written transcript, or audio descriptions to also meet success criterion 1.2.5. This also applies to the video on page tonyschocolonely.com/us/en/our-mission/news/were-the-proud-new-owners-of-a-choco-factory.

1.2.5 Audio Description (Prerecorded) (Level AA)

Information about success criterion 1.2.5 Audio Description (Prerecorded)

Outcome: Failed

Finding 11: The videos on page tonyschocolonely.com/us/en/other-stuff/reframed do not contain audio descriptions. audio descriptions are spoken text added to the standard audio track to describe important visual information that cannot be understood from the standard audio track. Often audio descriptions can be turned on or off in a video player. Audio description is important for blind or visually impaired viewers who cannot see what is happening or appearing on screen. Add audio descriptions to the video to solve this issue. This also applies to the video on page tonyschocolonely.com/us/en/our-mission/news/were-the-proud-new-owners-of-a-choco-factory.

1.3 Adaptable

1.3.1 Info and Relationships (Level A)

Information about success criterion 1.3.1 Info and Relationships

Outcome: Failed

Finding 12: The texts in the footer of each page, such as "our story" and "join in" are visually headings for the underlying text. However, these texts are not recognizable as headings for assistive technologies because they are not formatted with an h-element. Visitors using assistive technologies can navigate from heading to heading using an element list or hotkey. Text that can only visually be distinguished as a header, but is not programmatically a header, cannot be accessed that way.
This also occurs on page tonyschocolonely.com/us/en/sitemap, among others, on the visual headings 'serious cocoa info' and 'news' above the corresponding unordered lists.

Finding 13: The text 'our rules for responsibly sourced cocoa' on page tonyschocolonely.com/us/en/our-mission/serious-cocoa-info/the-5-sourcing-principles acts as a heading for the underlying content, but is not formatted as a heading. To solve this problem, place the title of the page within an h1 element.

Finding 14: On page tonyschocolonely.com/us/en/frequently-asked-questions, the FAQ contains several visual headings that are not formatted as headings, such as texts formatted with the em element, or texts formatted with the strong and u elements. Format the texts with h-elements so that they are recognizable as headings to assistive technologies.

Finding 15: The small headings on page tonyschocolonely.com/us/en/our-mission/serious-cocoa-info/the-5-sourcing-principles, such as 'traceable cocoa beans' and 'a higher price' are formatted with the strong-element rather than as headings. The strong-element has its own semantic value and may not be used purely for formatting. In addition, these headings cannot be reached in this way with a hotkey or element list by assistive technologies. Remove the strong-element and modify the header structure on the page to solve this problem. This also applies to the bold introduction texts on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 and several visual headings such as 'Let’s talk about the history of slavery' on the same page. The same applies to the text "delivery times chocolate and other stuff:" on page tonyschocolonely.com/us/en/chocoshop/checkout/choose-delivery and several visual headings on page tonyschocolonely.com/us/en/design-your-own-wrapper.

Finding 16: Several texts on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 are formatted with the strong-element where it is not appropriate, such as "Farmers and community members take part in an Annual General Meeting at Asunafo, one of our partner co-ops in Ghana.' Use CSS or a similar technique to format this text without the use of the strong-element.

Finding 17: The lists 'serious cocoa info' and 'news' on page tonyschocolonely.com/us/en/sitemap are not properly nested. When a list is placed in a list, a new ul-element must be placed in the existing list. Otherwise, the visual relationship i.e. that the lists are part of the main content 'our mission' is not clear to assistive technologies.

Finding 18: Under 'Culture analysis' on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 is a visual list, which is not formatted as a list. Visitors using a screen reader hear how many items a list consists of and which item they are at now. Use an ordered list to solve this problem. This problem occurs several times on this page.

Finding 19: On page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021, tables are used where it is not appropriate. Here, tables are used only for formatting. This is confusing for visitors using assistive technologies.

Finding 20: The table under 'What do you charge for shipping' on page tonyschocolonely.com/us/en/frequently-asked-questions is not formatted properly. The table headers are formatted using the strong-element instead of th-elements. As a result, no relationship between table cells is clear to visitors using assistive technologies. This problem occurs several times on this page. This also applies to page tonyschocolonely.com/us/en/design-your-own-wrapper.

Finding 21: The 'tell us what's up' input field on page tonyschocolonely.com/us/en/other-stuff/contact does not have an accessible name because of an orphaned form label (the ID in the label does not match the ID in the input field). As a result, visitors using screen readers do not know what input is being requested from them. Connect the label correctly to the input field to solve this problem. This also applies to the input fields that appear when visitors choose "I've got a question" from the drop-down list, or other options like 'I've got a complaint'.

Finding 22: The input field in the search function at the top of the page (every page) does not have an associated label. As a result, visitors using assistive technologies do not know what input is required of them. Attach a label element with the attributes for and id to the input field to solve this problem.
This also applies to the input field on page tonyschocolonely.com/us/en/frequently-asked-questions and to the checkbox on page tonyschocolonely.com/us/en/chocoshop/checkout/choose-payment-method (there is a label present, but no for and id attributes are used).

Finding 23: The checkbox 'show only in stock items' on page tonyschocolonely.com/us/en/chocoshop/products/all-chocolate does not have an associated label. As a result, visitors using assistive technologies do not know what this input element does.

Finding 24: The text "How would you like to pay?" on page tonyschocolonely.com/us/en/chocoshop/checkout/choose-payment-method is not linked to the radio button credit card. Make sure that visitors who use assistive technologies also know which question they are answering by checking the radio button.

Finding 25: On the homepage is a section called "Tony's impact". There, visitors can use two drop-down lists to indicate which chocolate bars they have eaten and how many, to calculate their impact. The results will be immediately communicated by assistive technologies, even if the visitor has not yet pressed 'calculate'. This is confusing for visitors who use screen readers, who only expect information after they have pressed 'calculate'. In addition, the content that is read out is not visible at that time.

Finding 26: It is visible which filter is active on page tonyschocolonely.com/us/en/chocoshop/products/all-chocolate because the active component is displayed as white text on a blue background. This information should also be available to assistive technologies, for example using aria-current.

Finding 27: The button under 'font' on page tonyschocolonely.com/us/en/design-your-own-wrapper (under text) allows visitors to change the font. The text 'font' is not linked as an instruction to the button. The accessible name of the button is the currently selected font. This is confusing for visitors using assistive technologies. Use a drop-down menu and link an accessible label so that visitors can better use this functionality.

Finding 28: The PDF 'Easter Chocolate Shopping Guide' is not properly tagged:

Finding 29: The PDF 'annual fair report 2019/2020' is not coded and therefore no information is available for assistive technologies (such as screen reading software) to interpret the PDF. Because codes are missing, the PDF cannot be fully examined (all success criteria related to the PDF code layer such as semantic headings and alt-texts of images). Therefore, please note that new accessibility issues may arise when solving this problem.

1.3.2 Meaningful Sequence (Level A)

Information about success criterion 1.3.2 Meaningful Sequence

Outcome: Failed

Finding 30: Within the DOM, the pictures, quotes and links of the people on page tonyschocolonely.com/us/en/other-stuff/reframed appear before the heading with their name. This makes it difficult for people using assistive technologies to distinguish to which person a quote or image belongs. Place all the 'metadata' of each person in the code below their heading tag. Visually, the metadata may be placed above the heading tag.
This also applies to the dialog box that appears when visitors open 'my full story'.

Finding 31: The reading order in the PDF 'Easter Chocolate Shopping Guide' is not meaningful. For example, the order under 'Good egg award' and 'Rotten egg award' is from left to right, making it unclear which information belongs to which award. Make sure that the reading order is also logical for visitors who use assistive technologies.

1.3.5 Identify Input Purpose (Level AA)

Information about success criterion 1.3.5 Identify Input Purpose

Outcome: Failed

Finding 32: The 'whats your name' and 'and your e-mail address' input fields on page tonyschocolonely.com/us/en/other-stuff/contact do not have autocomplete attributes. HMTL5 input fields that request information about the user, such as name/surname, address and date of birth, must have a correct autocomplete attribute. Example: The "last name" input field has "family-name" as its autocomplete attribute.

Finding 33: On page tonyschocolonely.com/us/en/account/nice-to-meet-you, the drop-down list 'select a zone' uses the autocomplete attribute 'shipping region'. This is a non-existent attribute. Read more about valid autocomplete attributes at: www.w3.org/TR/WCAG21/. This also occurs on page tonyschocolonely.com/us/en/chocoshop/checkout (shop process).

1.4 Distinguishable

1.4.1 Use of Color (Level A)

Information about success criterion 1.4.1 Use of Color

Outcome: Failed

Finding 34: On page tonyschocolonely.com/us/en/account/nice-to-meet-you, when visitors fill in a field incorrectly, the name of the field turns red and red text appears below the field. Make sure that information is not color-dependent. For example, include text that describes which field an error was made in.

Finding 35: The graphs on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 contain color-dependent information. Information should not be conveyed by only color differences. Provide an accessible alternative.

Finding 36: The link texts on page tonyschocolonely.com/us/en/design-your-own-wrapper are only recognizable because the links have a different color. Make sure that information is not color dependent. Make the links recognizable in at least one other way, for example by underlining the link texts.

Finding 37: The PDF 'Easter Chocolate Shopping Guide' uses color-dependent information (colored Easter eggs) to convey information. Visitors who are visually impaired or color blind may therefore not be able to interpret this information properly. Make sure that information is not color-dependent. This also applies to the PDF 'annual fair report 2019/2020', for example in the data visualisations on page 16.

1.4.3 Contrast (Minimum) (Level AA)

Information about success criterion 1.4.3 Contrast (Minimum)

Outcome: Failed

Finding 38: The contrast ratio between the small white text on the red background (HEX #FF0000), for example "Extra premium paid in dollars" on the homepage, is 4:1 where it should be at least 4.5:1. This applies to multiple pages, including tonyschocolonely.com/us/en/sitemap and tonyschocolonely.com/us/en/our-mission/news/were-the-proud-new-owners-of-a-choco-factory. On this page, the same applies to the red time stamp on the white background in the media player.

Finding 39: The contrast ratio of the placeholders in the form fields in the "wanna be serious friends?" dialog box is 2.2:1, where it should be at least 4.5:1. This also applies to the input fields in the login function in the navigation menu and the placeholders on page tonyschocolonely.com/us/en/account/nice-to-meet-you.

Finding 40: On the homepage is a section called "Tony's impact". There, visitors can use two drop-down lists to indicate which chocolate bars they have eaten and how many, to calculate their impact. When they do so, the link 'add more' then appears. The contrast ratio between the white text on the gray background (HEX #CCCCCC) is 1.6:1 where it should be at least 4.5:1.

Finding 41: The contrast ratio between the white text and the green background (HEX #69B64B) on page tonyschocolonely.com/us/en/other-stuff/reframed (e.g. Assata Doumbia and Daouda Coulibaly) is 2.5:1 where it should be at least 3:1.

Finding 42: The contrast ratio between the white text and the yellow background (HEX #FFDE00) on page tonyschocolonely.com/us/en/other-stuff/reframed (George Odei Awuku and Abraham Gyimah Bugyei) is 1.3:1 where it should be at least 3:1.

Finding 43: The contrast of the red error message text (when visitors fill in a field incorrectly) on page tonyschocolonely.com/us/en/account/nice-to-meet-you is too low. The contrast ratio is 4:1 where it should be at least 4.5:1.

Finding 44: On page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021, yellow text (HEX #FFE518) appears on a pink background (HEX #DF6AA4). The contrast ratio here is 2.4:1 where it should be at least 3:1.

Finding 45: The PDF 'Easter Chocolate Shopping Guide' contains green text (HEX #2A9941). The contrast ratio here is 3.6:1 where it should be at least 4.5:1.

Finding 46: The PDF 'Easter Chocolate Shopping Guide' contains blue text on a white background and white text on a blue background (HEX #5db0c6), for example on page 2. The contrast ratio here is 2.4:1 where it should be at least 3:1 for large and bold text and 4.5:1 for small and/or bold text.

Finding 47: In the PDF 'annual fair report 2019/2020', black text on a blue background occurs, as on page 11. The contrast ratio between the black text and the blue background (HEX #006AB5) is 3.7:1 where it should be at least 4.5:1.

Finding 48: In the PDF 'annual fair report 2019/2020', white text appears on an orange background (HEX #F39200) (e.g. page 16). The contrast ratio here is 2.3:1 where it should be at least 4.5:1.

Finding 49: In the PDF 'annual fair report 2019/2020', white text appears on a green background (HEX #009e3d) (e.g. page 16). The contrast ratio here is 3.5:1 where it should be at least 4.5:1.

Finding 50: In the PDF 'annual fair report 2019/2020', several contrast problems occur with the page numbering. For example, on page 32, the numbering is not readable at all because the contrast ratio is 1:1.

Finding 51: In the PDF 'annual fair report 2019/2020' pink text (HEX #DF6AA4) appears on a blue background (HEX #0066CC), for example in the information on B-corp. The contrast ratio here is 1.7:1 where it should be at least 4.5:1.

Finding 52: In the PDF 'annual fair report 2019/2020' orange text (HEX #DC6900) appears on a white background, for example in the PWC attachments. The contrast ratio here is 3,4:1 where it should be at least 4.5:1.

Finding 53: The contrast ratio between the white text and the dark pink background (HEX #DF6AA4) on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 is 3:1 where it should be at least 4,5:1.

Finding 54: The contrast ratio between the white text and the light pink background (HEX #FF60A6 on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 is 2,8:1 where it should be at least 3:1 for large text and 4,5:1 for plain text.

1.4.5 Images of Text (Level AA)

Information about success criterion 1.4.5 Images of Text

Outcome: Failed

Finding 55: In the footer of the page, there is an image of a Tony's bar with a speech bubble that reads "Crazy about chocolate, serious about people". For visually impaired users, it is important that text is placed in HTML and not in an image. They can format text in HTML with their own style sheet, while text in an image is not customizable.

Finding 56: The image on page tonyschocolonely.com/us/en/join-in/become-serious-friends contains text that is not available as plain text. For visitors with visual impairments, it is important that text is placed in HTML and not in an image. This is because they can format text in HTML to their liking with their own style sheet, whereas text in an image is not customizable.

Finding 57: Page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 contains multiple images of text. For visitors with visual impairments, it is important that text is placed in HTML and not in an image. This is because they can format text in HTML to their liking with their own style sheet, whereas text in an image is not customizable.

Finding 58: Page tonyschocolonely.com/us/en/design-your-own-wrapper/upload-your-own-design contains multiple images text, where headings should be used, such as 'frequently asked questions' and the text 'this one's important'. Make this information available in plain text as well. This also applies to page tonyschocolonely.com/us/en/design-your-own-wrapper.

1.4.10 Reflow (Level AA)

Information about success criterion 1.4.10 Reflow

Outcome: Failed

Finding 59: When visitors zoom to 400% on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 with viewport 1280 by 1024, not all the text is readable anymore because parts of the page are dropped.

Finding 60: When visitors on page tonyschocolonely.com/us/en/frequently-asked-questions use a viewport of 1280 by 1024 and zoom in to 400%, not all text is (properly) readable anymore. For example, under 'What do you charge for shipping on a personalized order' the tables are only half visible. For tables, a scroll element may appear when zooming in, but no information may be lost altogether.

Finding 61: When visitors use a viewport of 1280 by 1024 and zoom in to 400% on page tonyschocolonely.com/us/en/chocoshop/checkout, the text and form fields on the page are no longer legible because the content is off-screen.

Finding 62: The PDF 'Easter Chocolate Shopping Guide' contains 56 figure elements without a bounding box. This can cause images to not move/appear properly when visitors adjust the screen size. Give figure elements a bounding box to solve this problem.

1.4.11 Non-text Contrast (Level AA)

Information about success criterion 1.4.11 Non-text Contrast

Outcome: Failed

Finding 63: The contrast ratio between the white stripes and the pink background of the navigation menu on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 is 2.8:1 while it should be at least 3:1.

1.4.12 Text Spacing (Level AA)

Information about success criterion 1.4.12 Text Spacing

Outcome: Failed

Finding 64: When visitors with viewport 1280 by 1024 zoom in to 400% and change the text spacing to the requirements of this success criterion, the title of the page is no longer fully readable because part of the text disappears. Make sure that no information is lost when visitors zoom in or adjust the text spacing.

Finding 65: When visitors on page tonyschocolonely.com/us/en/frequently-asked-questions change the text spacing, not all text is (properly) readable anymore. For example, under 'What do you charge for shipping on a personalized order' the bottom table falls away. For tables, a scoll element may appear when zooming in, but no information may be lost altogether.

1.4.13 Content on Hover or Focus (Level AA)

Information about success criterion 1.4.13 Content on Hover or Focus

Outcome: Failed

Finding 66: When visitors hover over menu items in the navigation menu, additional content appears. When additional content becomes visible and then hidden again, through the use of hover with the pointer or focus with the keyboard, that content should be removed again without moving the focus, for example using the Escape key.

2. Operable

2.1 Keyboard Accessible

2.1.1 Keyboard (Level A)

Information about success criterion 2.1.1 Keyboard

Outcome: Failed

Finding 67: When visitors on page tonyschocolonely.com/us/en/other-stuff/reframed click on one of the photos, the photo turns over and a text and name about the person appear. Clicking on 'view my full story' opens a dialog box. When visitors click on a photo with the keyboard, the dialog box opens immediately. The information on the back of the photo is not accessible and available to them.

Finding 68: The video player buttons on page tonyschocolonely.com/us/en/our-mission/news/were-the-proud-new-owners-of-a-choco-factory are not accessible and operable through a keyboard. Visitors using the keyboard are therefore not able to start the video, adjust the volume or open the video in full screen.

Finding 69: The main content on page tonyschocolonely.com/us/en/frequently-asked-questions, i.e. all frequently asked questions, is not accessible and operable through a keyboard. Visitors using the keyboard cannot use the functionality on the page.

Finding 70: Page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 contains a navigation menu, to be accessed by a link. The navigation menu contains images that link to different chapters. The links do not have an accessible name and role and are not reachable or operable through a keyboard.

Finding 71: The price range slider on page tonyschocolonely.com/us/en/chocoshop is not reachable and operable through a keyboard.

Finding 72: The buttons to remove a product from the shopping cart, in the header at the top of the page when at least one product is present, are not accessible and operable through a keyboard.

Finding 73: The buttons to add (+) or remove (-) a product from the shopping cart (in the header at the top of each page) (if there is at least 1 product in the cart) are not accessible and operable through a keyboard.

Finding 74: The 'upload image' textual button (below the photo camera button) on page tonyschocolonely.com/us/en/design-your-own-wrapper is not accessible and operable through a keyboard.

Finding 75: When visitors on page tonyschocolonely.com/us/en/design-your-own-wrapper add something to the wrapper, for example a decoration, they can use the mouse to change the location and size of the decoration within the canvas element. This feature is not reachable and operable through a keyboard.

Finding 76: The colors in the color selection under 'text' on page tonyschocolonely.com/us/en/design-your-own-wrapper are not reachable and operable through a keyboard.

Finding 77: The alignment buttons under 'text' on page tonyschocolonely.com/us/en/design-your-own-wrapper are not reachable and operable through a keyboard.

Finding 78: The 3D preview feature on page tonyschocolonely.com/us/en/design-your-own-wrapper is only operable through a mouse. Provide an accessible alternative for visitors who use the keyboard to navigate the page.

Finding 79: The upload function on page tonyschocolonely.com/us/en/design-your-own-wrapper/upload-your-own-design is not accessible and operable through a keyboard.

2.1.4 Character Key Shortcuts (Level A)

Information about success criterion 2.1.4 Character Key Shortcuts

Outcome: Failed

Finding 80: If the website (or web app) uses keyboard shortcuts, they should not interfere with the operation of screen readers. Therefore, visitors should be able to turn them off, modify them, or they should only be active when visitors focus on the object to which the keyboard shortcuts apply.
The Vimeo video players on page tonyschocolonely.com/us/en/other-stuff/reframed contain keyboard shortcuts. These can be disabled by adding the parameter 'keyboard=0' or 'keyboard=false' to the url.
This also applies to the video player on page tonyschocolonely.com/us/en/our-mission/news/were-the-proud-new-owners-of-a-choco-factory. For Youtube videos, the parameter 'disablekb=1' can be added.

2.2 Enough Time

2.2.2 Pause, Stop, Hide (Level A)

Information about success criterion 2.2.2 Pause, Stop, Hide

Outcome: Failed

Finding 81: Page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 contains automatically moving content. Moving, blinking, scrolling or automatically updating content can distract visitors from interacting with the rest of the page. Therefore, an option to stop or pause the movement should be provided.

2.4.1 Bypass Blocks (Level A)

Information about success criterion 2.4.1 Bypass Blocks

Outcome: Failed

Finding 82: The website does not have a way to bypass blocks of repetitive content. Visitors should be able to skip repetitive content (such as menus, search bars and repetitive blocks at the top of the website) and go directly to the main content via a skip link.

2.4.2 Page Titled (Level A)

Information about success criterion 2.4.2 Page Titled

Outcome: Failed

Finding 83: The PDF "Easter Chocolate Shopping Guide" does not contain a title. A PDF must have a clear, descriptive title. The title should be in the metadata of the document. A good title is important for visitors with various disabilities, as it is an important navigational aid. This also applies to the PDF 'annual fair report 2019/2020'.

2.4.3 Focus Order (Level A)

Information about success criterion 2.4.3 Focus Order

Outcome: Failed

Finding 84: When navigating by keyboard and opening the search functionality at the top of the page (every page), there is no option available to close it again. The focus order continues on the underlying page, and the search function remains open, obstructing the view of the page. Make sure visitors can close the search functionality.

Finding 85: The website has a cookie notification, but the notification does not come first in the keyboard focus order. As a result, the cookie notification remains visible whilst blocking other content. Visitors who are viewing the web page whilst zoomed-in or navigating using the keyboard may therefore not be able to view other content on the page. Make sure a cookie notification always comes first in the focus order of a webpage.

Finding 86: After spending some time on the homepage, the "wanna be serious friends?" dialog box appears. Visitors who navigate using the keyboard cannot delete this dialog box straight away because the dialog box appears after the other content on the page in the focus order. Make sure that the focus immediately shifts to the dialog box and that visitors who use screen readers are notified of this action.

Finding 87: The navigation menu at the top of each page only receives focus after going through all the other interactive elements on the page. Visitors who use the keyboard to navigate the page, therefore, cannot nagivate to the menu easily. Make sure that the focus order for visitors using the keyboard matches the logical, visual order of the page.

Finding 88: The menu items below the main menu items in the navigation menu at the top of the page receive keyboard focus, even when the main menu items are not expanded. As a result, visitors who use the keyboard to navigate through the page do not see which item has focus. Make sure that visitors can expand the main menu items by themselves, or that they automatically expand and collapse when they have keyboard focus.

Finding 89: When visitors zoom in on the page, the navigation menu changes to a hamburger menu. After going through the close button, the social media icons and the search function, the keyboard focus continues on the underlying page. After moving through all interactive items on the homepage, the keyboard focus returns to the hamburger menu after which the remaining items in the hamburger menu get keyboard focus. This order is not logical.

Finding 90: When visitors click on the flag in the navigation menu to change language or website, the focus first moves further down the navigation menu before actually getting to the country menu. This menu also contains drop-down menus. The items in the menus receive focus even if the parent items are not expanded. This menu then remains open while after going through all the items the focus order continues on the underlying page. Make sure that visitors have to close the menu themselves or that the menu closes automatically after the last item. This also applies to the search results in the search function in the navigation menu at the top of each page and the dialog boxes that appear when clicking on a picture on page tonyschocolonely.com/us/en/other-stuff/reframed.

Finding 91: When visitors navigate with the keyboard on page tonyschocolonely.com/us/en/chocoshop/products/all-chocolate, each item receives keyboard focus three times: once on the image, once on the add to cart button, and once on an invisible item after which '*item name* has been removed* appears in the bottom right corner of the screen. The buttons that receive keyboard focus are hidden from view with aria-hidden. It seems the following action (adding or subtracting a bar from the cart) is triggered in the focus order, even though the add to cart link was never clicked.

Finding 92: When visitors open the shopping cart on page tonyschocolonely.com/us/en/chocoshop/products/all-chocolate and navigate further, the focus order first continues on the back page before the focus order comes to the newly opened window. Make sure that the focus jumps directly to the contents of the shopping cart after opening the link and that visitors also have to close the shopping cart themselves. Similar issues occur with dialog boxes in the design process on page tonyschocolonely.com/us/en/design-your-own-wrapper.

Finding 93: When visitors open a page, a message may appear, such as 'PLEASE NOTE: Our systems are going through spring cleaning from May 5th - May 10th. During this period normal delivery times do not apply, and all orders will take up to 5 business days longer than usual to process. Thank you for your patience!' This message does not come first in the keyboard focus order and therefore remains visual across the page. When zooming in, the message almost obscures the entire page. Make sure that notifications come first in the keyboard focus order so visitors can quickly close the notification.

Finding 94: When visitors on page tonyschocolonely.com/us/en/design-your-own-wrapper add a photo that is not of sufficient quality, a dialog box appears. The button to close the notification receives focus only after going through all the interactive items on the underlying page. As a result, the page is not properly visible. This problem occurs several times on this page.

Finding 95: When visitors on page tonyschocolonely.com/us/en/design-your-own-wrapper under 'text' open the button to adjust the font and navigate within this functionality using the arrow keys, the button stays expanded even when the focus continues on the underlying page. The functionality should close before the focus moves to the rest of the page.

Information about success criterion 2.4.4 Link Purpose (In Context)

Outcome: Failed

Finding 96: The link to close the 'wanna be serious friends' dialog box (which appears automatically after spending some time on a page), identified by the white X-icon on a blue background, does not have an accessible link purpose.
Visitors using screen readers will know that a link is present, but not what the function of that link is/what that link refers to. Add alternative text to the image (see the previous explanation on success criterion 1.1.1) to solve this problem. This also applies to the hamburger menu that appears when visitors zoom in on the page, the link to close the search results in the search function in the navigation menu at the top of each page and the link to close pop-up messages like the 'spring cleaning' message mentioned in 2.4.3 Focus order. Similar issues occur on page tonyschocolonely.com/us/en/design-your-own-wrapper.

Finding 97: In the navigation menu, visitors can go to the website in their own language, by clicking on the flag icon and choosing another website. The accessible name of the link (flag) is 'Change country or language'. This does not specify which language or website is currently already selected (America). Include this in the accessible link text.

Finding 98: Multiple links occur on the homepage without an accessible link purpose, including the search function in the main navigation, 'our mission' and 'chocoshop', the large image at the top of the page, 'Tony's impact' and the social media buttons in the footer of the page. Visitors using a screen reader will therefore not know where these links refer to. This also applies to the social media buttons below 'share via' on page tonyschocolonely.com/us/en/our-mission/news/were-the-proud-new-owners-of-a-choco-factory.

Finding 99: The shopping cart in the navigation menu at the top of the page has as its accessible link purpose only the number of items in the shopping cart. This is not descriptive enough. Describe the function of the link, e.g. 'To shopping basket' plus the number of items, to solve this problem.

Finding 100: When visitors zoom in on the page, the navigation menu changes to a hamburger menu. The link to open the menu does not have an accessible link purpose. Add alternative text to the image to solve this problem.

Finding 101: Page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 contains anchor links with no accessible link purpose. As a result, it is not clear to visitors using assistive technologies what the links point to.

Finding 102: Page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 contains a navigation menu, to be accessed by a link. This link does not have an accessible link purpose. Therefore, it is not clear that this is a menu.

Finding 103: The add to cart links on page tonyschocolonely.com/us/en/chocoshop/products/all-chocolate do not have an accessible link purpose. Visitors using assistive technologies will therefore not know where the links point to. This also applies to the filters at the top of the page.

Finding 104: The link for 'lot number' in the canvas element on page tonyschocolonely.com/us/en/design-your-own-wrapper does not have an accessible link purpose.

2.4.5 Multiple Ways (Level AA)

Information about success criterion 2.4.5 Multiple Ways

Outcome: Failed

Finding 105: Page tonyschocolonely.com/us/en/sitemap cannot be reached in multiple ways on the website. More than one way must be available to find a web page within a collection of web pages, except when the web page is the result of, or a step in, a process. These include a link on the home page, a link in the navigation menu or footer, and a search function.

2.4.7 Focus Visible (Level AA)

Information about success criterion 2.4.7 Focus Visible

Outcome: Failed

Finding 106: There is no visible keyboard focus present on the website. The keyboard focus should be visible at all times, so that visitors using the keyboard don't get lost on the page.

Finding 107: On the homepage is a section called "Tony's impact". There, two drop-down lists allow visitors to indicate which chocolate bars they have eaten and how many, to calculate their impact. Between the last drop-down list and the 'calculate' link is an invisible 'reset' link (it becomes visible after visitors click 'calculate'). Make sure the keyboard focus is always visible.

2.5 Input Modalities

2.5.1 Pointer Gestures (Level A)

Information about success criterion 2.5.1 Pointer Gestures

Outcome: Failed

Finding 108: The 3d preview function on page tonyschocolonely.com/us/en/design-your-own-wrapper can only be operated by making a dragging motion with the mouse. All functionality that uses multi-point or path-based gestures in its operation should be able to be operated with a single pointer without a path-based gesture, for example with the arrow keys.

3. Understandable

3.1 Readable

3.1.1 Language of Page (Level A)

Information about success criterion 3.1.1 Language of Page

Outcome: Failed

Finding 109: The buttons under 'decorations' on page tonyschocolonely.com/us/en/design-your-own-wrapper have Dutch alternative text. Make sure the language of the alternative text corresponds to the main language of the page.

Finding 110: The language of the PDF 'annual fair report 2019/2020' is set as Dutch. This does not match the main language of the document. As a result, screen reader software cannot read the PDF properly. Make sure the main language of the PDF matches the language in the document settings.

3.1.2 Language of Parts (Level AA)

Information about success criterion 3.1.2 Language of Parts

Outcome: Passed

Finding 111: Advice: The image on page tonyschocolonely.com/us/en/nopage contains Dutch-language text that is not understandable to most visitors who visit the US website. Modify the image to match the language of the current webpage.

3.3 Input Assistance

3.3.1 Error Identification (Level A)

Information about success criterion 3.3.1 Error Identification

Outcome: Failed

Finding 112: The form in the "wanna be serious friends?" dialog box only uses HTML5 field controls. These error messages are not sufficiently supported by all browsers and assistive technologies. The message is sometimes abbreviated, incomplete, or is not present on screen long enough to be fully read by all visitors. In addition, the text size cannot be adjusted so visitors who need to zoom in on text may not be able to read the text. Provide accessible error messages to the form to solve this problem. This also applies to the form on page tonyschocolonely.com/us/en/account/nice-to-meet-you and on page tonyschocolonely.com/us/en/join-in/become-serious-friend and on page tonyschocolonely.com/us/en/chocoshop/checkout (shop process, for example, the login information).

Finding 113: When visitors on page tonyschocolonely.com/us/en/other-stuff/contact want to submit the form without making a choice from the dropdown list, the message 'subject field is required' appears at the bottom of the screen. This message also disappears by itself. A good error message states where an error has been made and what kind of error it is (e.g. 'the field 'choose one of the options' has not been filled in). The fact that a field is mandatory is an error suggestion. In addition, make sure that visitors understand that the message is about the form by placing it nearby, and that the message does not disappear. This also applies to the form on page tonyschocolonely.com/us/en/join-in/become-serious-friends.

Finding 114: When visitors on page tonyschocolonely.com/us/en/other-stuff/contact do not fill in the form fields (for example: 'I've got a question' and 'my order') , the message 'The *** field is required' appears. A good error message states where an error has been made and what kind of error it is (e.g. 'the field 'choose one of the options' has not been filled in). The fact that a field is mandatory is an error suggestion. When visitors fill in a field incorrectly here, only an error suggestion appears (for example: * The e-mail address must be a valid email address). This also applies to the form field on page tonyschocolonely.com/us/en/chocoshop/authenticate (shop process) and page tonyschocolonely.com/us/en/chocoshop/checkout (shop process).

Finding 115: When visitors on page tonyschocolonely.com/us/en/account/nice-to-meet-you enter a field incorrectly, only error suggestion appears. For example, '* The EIN number must be at least 9 characters.' In addition, provide an error message describing what error was made and where it occurred.

3.3.2 Labels or Instructions (Level A)

Information about success criterion 3.3.2 Labels or Instructions

Outcome: Failed

Finding 116: When visitors on page tonyschocolonely.com/us/en/other-stuff/contact choose 'I've got a question' from the drop-down list and then 'my order', an input field appears below it. There are no visual instructions present near this input field. This makes it difficult for some visitors, such as visitors with a cognitive function disorder, to fill in and complete the form.

3.3.3 Error Suggestion (Level AA)

Information about success criterion 3.3.3 Error Suggestion

Outcome: Failed

Finding 117: The form in the "wanna be serious friends?" dialog box only uses HTML5 field controls. These error suggestions are not sufficiently supported by all browsers and assistive technologies. The message is sometimes abbreviated, incomplete, or is not present on screen long enough to be fully read by all visitors. In addition, the text size cannot be adjusted so visitors who need to zoom in on text may not be able to read the text. Add accessible error suggestions to the form to solve this problem. This also applies to the form on page tonyschocolonely.com/us/en/account/nice-to-meet-you.

4. Robust

4.1 Compatible

4.1.1 Parsing (Level A)

Information about success criterion 4.1.1 Parsing

Outcome: Failed

Finding 118: Several duplicate IDs occur on the homepage, including ID 'Layer_1', 'tab-account' and 'login' and 'meta_login_mail'. Make sure IDs are unique. This occurs on multiple pages, including pages tonyschocolonely.com/us/en/other-stuff/contact and tonyschocolonely.com/us/en/account/nice-to-meet-you and on page tonyschocolonely.com/us/en/chocoshop/checkout (shop process).

Finding 119: The navigation on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021 consists of a list, but the list element contains elements that should not occur in ul or ol elements, such as div elements. Modify the lists so that they can be read properly by assistive technologies. This also applies to page tonyschocolonely.com/us/en/chocoshop/products/all-chocolate. This also occurs in the 'you might also like' section on for example page tonyschocolonely.com/us/en/chocoshop/checkout (shop process).

Finding 120: In the navigation on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021, list items occur that are not nested within an ol or ul. As a result, they are not properly recognized by assistive technologies. This also occurs in the 'you might also like' section on for example page tonyschocolonely.com/us/en/chocoshop/checkout (shop process).

4.1.2 Name, Role, Value (Level A)

Information about success criterion 4.1.2 Name, Role, Value

Outcome: Failed

Finding 121: The search button in the search function at the top of the page (every page) does not have an accessible name. Visitors using assistive technologies, therefore, do not know what the purpose of this button is, nor can they control the button using speech software.

Finding 122: Multiple links on the website do not have an accessible name because a link purpose is missing. See success criterion 2.4.4 for more explanation.

Finding 123: The 'tell us what's up' input field on page tonyschocolonely.com/us/en/other-stuff/contact does not have an accessible name. See succes criterion 1.3.1 for more explanation. This also applies to the input fields that appear when visitors choose "I've got a question" from the drop-down list, or other options like 'I've got a complaint'.

Finding 124: The checkbox 'show only in stock items' on page tonyschocolonely.com/us/en/chocoshop/products/all-chocolate does not have an accessible name. See also success criterion 1.3.1.

Finding 125: On the homepage is a section called "Tony's impact". There, visitors can use two drop-down lists to indicate which chocolate bars they have eaten and how many, to calculate their impact. The drop-down lists do not have an accessible name. Visitors using screen readers may therefore not know what the drop-down lists are for. This also applies to the 'choose one of the options' drop-down list on page tonyschocolonely.com/us/en/other-stuff/contact and the phone number drop-down list on page tonyschocolonely.com/us/en/account/nice-to-meet-you and tonyschocolonely.com/us/en/chocoshop/checkout (shop process).

Finding 126: The iframes on page tonyschocolonely.com/us/en/other-stuff/reframed do not contain descriptive titles within their respective title element. This is required so that visitors using a screen reader know what information the iframe contains.

Finding 127: The add to cart links on page tonyschocolonely.com/us/en/chocoshop/products/all-chocolate do not have an accessible name. Visitors using assistive technologies will therefore not know where the links point to.
The iframe on page tonyschocolonely.com/us/en/our-mission/news/were-the-proud-new-owners-of-a-choco-factory does have a description within the title element, but it does not describe the content. The description is currently 'YouTube video player'. Add a descriptive title to the iframe.

Finding 128: The video player buttons on page tonyschocolonely.com/us/en/our-mission/news/were-the-proud-new-owners-of-a-choco-factory do not have an accessible name or role. See also success criterion 2.1.1.

Finding 129: The canvas elements on page tonyschocolonely.com/us/en/design-your-own-wrapper do not have an accessible name and role.

Finding 130: The buttons on page tonyschocolonely.com/us/en/design-your-own-wrapper to choose a background color or template, for example, do not have an accessible name. Visitors using help software therefore do not know what the buttons do.

Finding 131: The buttons to choose a background color on page tonyschocolonely.com/us/en/design-your-own-wrapper do not have an accessible name. This problem occurs multiple times in this process.

Finding 132: The 'upload image' textual button (below the photo camera button) on page tonyschocolonely.com/us/en/design-your-own-wrapper does not have an accessible name and role.

Finding 133: The 'I have a promo code' toggle in the shopping cart (in the header of each page) does not have an accessible name and role.

Finding 134: It is clear to sighted visitors when the 'I have a promo code' toggle in the shopping cart (in the header of each page) is expanded or not, but this information is not available to visitors using assistive technologies. Use aria-expanded, for example, to solve this problem. This also applies to the FAQ on page tonyschocolonely.com/us/en/design-your-own-wrapper/upload-your-own-design and to page tonyschocolonely.com/us/en/design-your-own-wrapper.

Finding 135: The buttons to add a product (+) or remove it from the cart (-) in the shopping cart (in the header at the top of each page)(if there's a minimum of 1 product in de shopping cart) do not have an accessible name and role.

Finding 136: The spin button that allows visitors to enter a number, in the shopping cart in the header of each page (if there's a minimum of 1 product in de shopping cart), does not have an accessible name. Visitors using assistive technologies do not know what input is expected of them.

Finding 137: The buttons to remove a product from the shopping basket, in the header at the top of the page when there is at least one product present, do not have an accessible name. Visitors using assistive technologies will know that there is a button, but not what it does.

4.1.3 Status Messages (Level AA)

Information about success criterion 4.1.3 Status Messages

Outcome: Failed

Finding 138: When a page is loading, the message "loading" appears on the screen. Visitors using assistive technologies will not be notified of this. Users who use assistive software should be notified without having to place keyboard focus on that message. This can be achieved with aria-live or role=alert. This also applies to the 'one moment' message on page tonyschocolonely.com/us/en/annual-fair-reports/annual-fair-report-2020-2021.

Finding 139: When visitors on page tonyschocolonely.com/us/en/other-stuff/contact want to submit the form without making a choice from the dropdown list, the message 'subject field is required' appears at the bottom of the screen. This message also disappears by itself. Visitors using assistive technologies are not be notified of this. Users who use assistive software should be notified without having to place keyboard focus on that message. This also applies to the 'your wrapper has been saved' message on page tonyschocolonely.com/us/en/design-your-own-wrapper.

Finding 140: When visitors enter a search term on page tonyschocolonely.com/us/en/frequently-asked-questions, relevant search results appear immediately on the screen. This change is not being announced to assistive technologies.

Finding 141: When visitors on page tonyschocolonely.com/us/en/chocoshop/products/all-chocolate change the price range, the content of the page changes without refreshing. This change is not being announced to assistive technologies.

Finding 142: When visitors on page tonyschocolonely.com/us/en/design-your-own-wrapper add a photo that is not of sufficient quality, a dialog box appears. This change is not being announced to assistive technologies. This problem occurs several times on this page.

Basis for this evaluation

The audit was conducted based on the evaluation method of the W3C, WCAG-EM. This is largely done manually by taking a sample. For a quickscan we use parts of this methodology. Despite all the researcher's care and experience, it is possible that a problem has not been identified. Keep in mind that in a next audit certain parts could be assessed differently because of further development of techniques and assistive software. Tools are used in the manual audit.

Sample of audited web pages

Relied upon techniques

Resources:

This report is mainly created with the online W3C report tool.

Printed: 2022-09-26 15:00:03 v2.4-011