Report:
Digital accessibility audit Tony's Chocolonely US website

Outcome: Failed

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

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.

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.

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.

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.

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.

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

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.

• The PDF "Easter Chocolate Shopping Guide" contains decorative images that are not formatted as artifacts, such as the chocolate bunny image on page 1. This causes a screen reader to read out that an image is present, but no alternative text. Make decorative images artifacts so they can be ignored by assistive technologies.
• The PDF 'Easter Chocolate Shopping Guide' contains logos without alternative text, for example on page 1. The alternative text of a logo must contain at least the name of the organization.
• On page 1 of the PDF "Easter Chocolate Shopping Guide", a hidden figure appears (presumably a logo, behind the decorative image on the left side of the screen). The image is not hidden for assistive technologies. Remove the image, make the image decorative, or make the image visible and add alternative text.

Outcome: Inapplicable

Outcome: Failed

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

Outcome: Failed

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

Outcome: Inapplicable

Outcome: Failed

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

Outcome: Failed

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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

• The text 'Easter Chocolate Shopping Guide' on page 1 is formatted as a paragraph. This should be a title or a heading.
• The PDF contains 865 path elements, such as lines of images, tables and structure elements. Code these elements as artifacts so they are ignored by assistive technologies.
• Several visual headings in the PDF are formatted as paragraphs rather than headings. Visitors who navigate through a PDF using a shortcut or element list cannot do so in this PDF for this reason.
• The table on page 2 is not formatted correctly. No headings are used, so there is no relationship between the text (which is not tagged in its entirety) and the underlying content. Use table headings and scope to indicate relationships.
• The PDF contains untagged content, such as the table headings on page 2. For visitors using assistive technologies, it is as if this text does not exist at all.

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.

Outcome: Failed

Findings: 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'.

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.

Outcome: Passed

Outcome: Passed

Outcome: Failed

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

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

Outcome: Failed

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

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.

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.

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.

Outcome: Inapplicable

Outcome: Failed

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Outcome: Failed

Outcome: Failed

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

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.

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.

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.

Outcome: Failed

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

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.

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.

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.

Outcome: Failed

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

Outcome: Failed

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

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.

Outcome: Failed

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

Outcome: Failed

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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.

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.

Outcome: Passed

Outcome: Failed

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

Outcome: Passed

Outcome: Failed

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

Outcome: Passed

Outcome: Failed

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

Outcome: Failed

Findings: 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'.

Outcome: Failed

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Outcome: Failed

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

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.

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.

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.

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.

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.

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.

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.

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.

Outcome: Failed

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

Outcome: Passed

Outcome: Failed

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

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.

Outcome: Failed

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

Outcome: Passed

Outcome: Passed

Outcome: Inapplicable

Outcome: Failed

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

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.

Outcome: Passed

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

Outcome: Passed

Outcome: Passed

Outcome: Passed

Outcome: Passed

Outcome: Failed

Findings: 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).

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.

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

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.

Outcome: Failed

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

Outcome: Failed

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

Outcome: Passed

Outcome: Failed

Findings: 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).

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

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

Outcome: Failed

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

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.

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

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

Outcome: Failed

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

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.

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.

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.

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.