Accessibility Evaluation

Issues:
Digital accessibility audit Triodos website

(Issues only)

Scope of the evaluation

Website name Triodos Bank
Date 8 December 2022
Scope of the website The scope of the audit includes:
The scope of the audit excludes:
  • The domains banking.triodos.co.uk and join.triodos.co.uk. These domains require their own audits.
  • Sub-website(s) where the HTML and/or the system differs from www.triodos.co.uk.
  • All external systems and websites linked to on www.triodos.co.uk.
Conformance target WCAG 2.1 level AA

Detailed audit results

Number of findings: 96

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: A search function in the navigation menu at the top of each page is identified by the magnifying glass icon. This icon has no alternative text and is hidden from assistive technologies. As a result, visitors using a screen reader do not know what the purpose of this button is. Add an alternative text, for instance by using an aria-label on the button element, to solve this problem. This problem occurs on multiple pages, including the following pages:

Finding 2: Items in lists in the main menu are formatted with an > icon and inserted with CSS. Some browser and assistive technologies combinations read this icon as 'greater than'. Hide the icon for assistive technologies, for example with aria-hidden, to solve this problem. This problem occurs on all pages with this icon and with other icons (for example the X and the + icon) on multiple pages, including:

Finding 3: The content blocks below the text "Our banking and financial services are for individuals and organizations who...." contain buttons to navigate through the various items (< and >). These icons are loaded into the page with CSS and have no alternative text. As a result, visitors using a screen reader do not know what the purpose of this button is. Provide an alternative text, for instance by using an aria-label on the button element, to solve this problem. This problem occurs on all pages with these navigational buttons.

Finding 4: The content blocks below the text "Our banking and financial services are for individuals and organizations who...." have a button with a > icon to open the link. This icon is an SVG element and has no alternative text. Visitors who cannot see the screen do not know what the buttons are for. Provide the SVG elements with an alternative text, for instance by using the title element of the SVG element. Similar issues are present on other pages and places, including the 'like' and 'comment' buttons on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021.

Finding 5: 'Show more' buttons are used on multiple pages, including on page https://www.triodos.co.uk/help. These buttons do not have an accessible name because the visual label is loaded to the page with CSS, and is not plain text. Provide alternative text, or better, make the text available as plain text rather than as images, so that the text is also customizable for visually impaired visitors.

Finding 6: Decorative background images are used on pages such as https://www.triodos.co.uk/press-releases/2022/rural-holiday-park-boosts-renewable-energy-supply (such as the blue blocks under 'Latest press releases'). These images have an alternative text, such as "Backing for Brighton's new open water swimming centre". These images are decorative and therefore do not require alternative text, to ensure visitors using a screen reader will not be read unnecessary text. Leave the alt attribute empty to solve this problem.

Finding 7: On page https://www.triodos.co.uk/newsletter, an asterisk (*) indicates fields that are required to continue. An asterisk is a special character, which is not read by all browser and assistive technologies combinations. Include alternative text, for example in the form of the required attribute, to the input element. This issue occurs on multiple pages, including:

Finding 8: When visitors on page https://www.triodos.co.uk/newsletter fill in a field, a green check mark appears next to it. This information is not available to assistive technologies. Provide an alternative text to resolve this issue.

Finding 9: On page https://www.triodos.co.uk/savings, below the heading 'We're recommended', is a logo of "Fairer finance". This image has no alternative text. The alternative text must at least include the name of the organization.

1.2 Time-based Media

1.2.2 Captions (Prerecorded) (Level A)

Information about success criterion 1.2.2 Captions (Prerecorded)

Outcome: Failed

Finding 10: The videos on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 contain automatically generated captions only. This form of subtitling contains no punctuation and is therefore difficult to understand for visitors who are deaf. They are more likely to have difficulty interpreting written language because sign language is often their native language, instead of a spoken and written language like English. Make sure captions with punctuation is present.

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 11: The videos on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 do not contain audio descriptions. Information that only appears on screen, such as names and functions of the speakers, names of organizations, and title and end screens, should also be available via audio to visitors who cannot see the screen. Therefore, include an audio description (to also meet success criterion 1.2.5) or provide a media alternative such as a transcript. This problem occurs on multiple pages, including:

1.2.5 Audio Description (Prerecorded) (Level AA)

Information about success criterion 1.2.5 Audio Description (Prerecorded)

Outcome: Failed

Finding 12: The videos on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 do not contain audio descriptions. Information that only appears on screen, such as names and functions of the speakers, names of organizations, and title and end screens, should also be available via audio to visitors who cannot see the screen. Include an audio description of the video. This may be offered as a separate audio track. This problem occurs on multiple pages, including:

1.3 Adaptable

1.3.1 Info and Relationships (Level A)

Information about success criterion 1.3.1 Info and Relationships

Outcome: Failed

Finding 13: The "Discover a new way to bank" link on the homepage (under "Make this the year you make a difference") is formatted as a single-item unordered list. This is confusing for visitors using a screen reader. Avoid using semantic HTML where it is not necessary or appropriate. This problem occurs several times on the website, including at the 'Explore' link on the home page and with other links on:

Finding 14: On page https://www.triodos.co.uk/accessibility, a single-item list is present. This is confusing to visitors using a screen reader because they do not know if other information might be hidden from them. Remove the ul element to solve this problem. This problem occurs on multiple pages.

Finding 15: The "Search our website" input field in the search function in the navigation menu at the top of each page, has no label. The placeholder text is not sufficient as a label. Add a label element and link it programmatically with the for and id attributes to the input element to solve this problem. This problem (or a similar one) occurs on multiple pages, including:

Finding 16: The radio buttons on page https://www.triodos.co.uk/current-account-eligibility are not grouped and linked to the question. Place the radio buttons within a fieldset element and the question within a legend element to solve this problem.

Finding 17: In the navigation menu, the visually hidden text '{{title}}}' and '{{amount}}}' appears. This text does get read aloud by screen readers. Remove the text or make it hidden from assistive technologies to solve this problem.

Finding 18: On page https://www.triodos.co.uk/help, the "I am an individual" option is preselected. This information should also be available to assistive technologies. For example, add aria-current to the <a>-element to solve this problem.

Finding 19: It is visually clear which option is selected in the chart on page https://www.triodos.co.uk/ethical-investments/triodos-bank-depository-receipts because that option has a different background colour. Make sure this information is also available to assistive technologies by using aria-pressed or a similar technique. A similar issue occurs on multiple pages, including:

Finding 20: Several buttons on page https://www.triodos.co.uk/help have the text "See how-to'. When visitors click on one of these buttons, the page visually changes and only the information of that 'how-to' is visible. The information on the page 'How to transfer an ISA to a Triodos cash ISA' (among others) is formatted with a description list, also using the dfn element. This is not semantically appropriate here. Format the text (such as 'Open a Triodos cash ISA') with heading elements, so visitors know it is a heading above a paragraph.

Finding 21: There are buttons on page https://www.triodos.co.uk/help with the text "See how-to'. When visitors click on one of these buttons, the page visually changes and only the information of that 'how-to' is visible. On the page 'How to transfer an ISA to a Triodos cash ISA' (among others) is a visual list, below the heading 'Downloads', that is not actually formatted as a list. Use the ul element and li elements to format the list properly.

Finding 22: On page https://www.triodos.co.uk/help, visual headings occur that are not formatted as headings but are formatted using the b element, such as the text "Opening hours (excluding bank holidays)" under "Contact us. Visitors using screen readers and other assistive technologies can navigate site pages by heading structure, using a hotkey or element list. Texts that are only visually a header but are not formatted that way are not recognizable to assistive technologies as headings. This issue occurs on multiple pages, including:

Finding 23: On page https://www.triodos.co.uk/vacancies/80444/apprentice-assistant-finance-administrator, the strong element is used to create visual headings. The strong element indicates that text, for example, a word or (short) sentence, is more important than the surrounding text. Therefore, it should not be used purely for design. Format the text as headings, for example with the h3 element, to solve this problem.

Finding 24: On page https://www.triodos.co.uk/press-releases/2022/rural-holiday-park-boosts-renewable-energy-supply, there are two h3 headings directly below each other. Headings must contain content, or be followed by a heading element smaller or larger than the current heading. Modify one of the heading levels, or place content between the headings, to solve this problem. A similar issue occurs on page:

Finding 25: Page https://www.triodos.co.uk/savings uses a table for formatting (at "Children's savings"). An empty table header appears in this. Since this is a table for formatting, the solution is to either remove the table structure or add role='presentation' on the table so that the structure of the table won't be presented to assistive technologies.

Finding 26: The PDF on page https://www.triodos.co.uk/downloads/standardised-lending-product-overview?id=8a9587e03138 has not been coded, which means there is no information available to assistive technologies (such as screen readers) to interpret the PDF. Because codes are missing, the PDF cannot be thoroughly examined (all success criteria related to the PDF code layer such as semantic headings and alt text for images). Be aware that new accessibility problems may arise when solving this problem.

Finding 27: Advice: The homepage contains multiple h1 headings. A logical, descending header structure helps visitors using assistive technologies navigate. The h1 header is normally the page title and appears once on the page. For succeeding headings, the h2 element is appropriate, for sub-headings the h3 element, and so on. This problem occurs on multiple pages.

1.3.5 Identify Input Purpose (Level AA)

Information about success criterion 1.3.5 Identify Input Purpose

Outcome: Failed

Finding 28: Page https://www.triodos.co.uk/newsletter, among others, requests information from the visitor. HMTL5 input fields that request information about the user, such as name/surname, address and date of birth, must have a proper autocomplete attritbute. A list of appropriate autocomplete attributes can be found at https://www.w3.org/TR/WCAG21/#input-purposes.

1.4 Distinguishable

1.4.3 Contrast (Minimum) (Level AA)

Information about success criterion 1.4.3 Contrast (Minimum)

Outcome: Failed

Finding 29: On the homepage, white text appears on an image, for example: Welcome to positive change'. The contrast ratio is too low in multiple places, making the text difficult to read for some visitors. For example, on the brown/beige background of the image, the text has a contrast ratio of 2.6:1 while it should be at least 3:1. Choose a different background image or add an opaque background behind the text to solve this problem. Similar issues are found throughout the website where white text is placed on background images.

Finding 30: On page https://www.triodos.co.uk/help, white text appears on a blue/green gradient. The contrast ratio between the white text and the blue (HEX #20A6A2) is 2.9:1 while it should be at least 3:1 for large text and 4.5:1 for normal text and the contrast ratio between the white text and the green background is 1.9:1 while it should be at least 4.5:1. This problem (or similar) occurs on multiple pages, including on:

Finding 31: On page https://www.triodos.co.uk/help, among others, a grey placeholder text (HEX #B2B2D2) appears in the search field. The contrast ratio between the grey text and the white background is 2:1 while it should be at least 4.5:1. This issue occurs on multiple pages, including:

Finding 32: On page https://www.triodos.co.uk/search?q=banking, the light grey text indicates which category each search result belongs to, such as "Press release" or 'FAQ'. The contrast ratio between the grey text (HEX #B2B2D2) and the white background is 2:1 while it should be at least 4.5:1.

Finding 33: Input elements are present on page https://www.triodos.co.uk/newsletter, such as radio buttons and checkboxes. The contrast ratio between the grey borders (HEX #9999C4) of the input elements and the white background is 2.7:1 while it should be at least 3:1.

Finding 34: Page https://www.triodos.co.uk/savings features white text on a blue background. The contrast ratio between the white text and the blue background (HEX #0096FF) is 3:1 while it should be at least 4.5:1 for ordinary plain text.

Finding 35: The contrast ratio of the blue-green text (HEX #338A81) 'Standardized Lending' in the PDF on page https://www.triodos.co.uk/downloads/standardised-lending-product-overview?id=8a9587e03138 is 4:1 while it should be at least 4.5:1.

Finding 36: The contrast ratio of the sea green text (HEX #36A180) 'Product Overview' in the PDF on page https://www.triodos.co.uk/downloads/standardised-lending-product-overview?id=8a9587e03138 is 3,1:1 while it should be at least 4.5:1.

1.4.4 Resize text (Level AA)

Information about success criterion 1.4.4 Resize text

Outcome: Failed

Finding 37: When visitors zoom in to 200%, the text '£8.5 bn
of loans to projects across Europe benefitting people and planet' in the header of the home page is no longer visible. Make sure there is no information or functionality when visitors enlarge the text on the page.

1.4.5 Images of Text (Level AA)

Information about success criterion 1.4.5 Images of Text

Outcome: Failed

Finding 38: Under "We're recognized for our values," on the home page, there are two images of text, namely "Best ethical financial provider winner 2022" and "Best investment provider winner 2022'. Visitors who are visually impaired can apply custom formatting to the page to change the text and line spacing. This is not possible with text in an image. Therefore, ensure that text from informative images is also present on the page as plain HTML text.

1.4.10 Reflow (Level AA)

Information about success criterion 1.4.10 Reflow

Outcome: Failed

Finding 39: When visitors with a viewport of 1280 by 1024 pixels zoom to 400% on the homepage, several blocks of content are no longer legible, including the blocks of content under "Our banking and financial services are for individuals and organizations who..... 'Make sure there is no loss of information and functionality when visitors zoom in. This also applies to the text '£8.5 bn

of loans to projects across Europe benefitting people and planet' in the header of the page. This problem occurs on multiple pages, including:

Finding 40: When visitors zoom in on page https://www.triodos.co.uk/search?q=banking, visitors must use the horizontal scroll bar to see and operate all filter options. Make sure there is no loss of information and functionality when zooming and no horizontal scroll bar appears. A similar issue occurs on page:

Finding 41: When visitors with a viewport of 1280 by 1024 zoom to 400% on page https://www.triodos.co.uk/know-where-your-money-goes, the text "Know where your money goes" is no longer legible because the text disappears below the navigation menu. Make sure no information or functionality is lost when visitors zoom in. The same issue occurs on page:

Finding 42: When visitors with a viewport of 1280 by 1024 zoom to 400% on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021, not all fields and buttons in the reply functionality are visible and reachable with the mouse. Make sure no functionality or information is lost (for both mouse and keyboard) when zooming in.

Finding 43: There are several tables on page https://www.triodos.co.uk/ethical-investments/triodos-bank-depository-receipts. When visitors with a viewport of 1280 by 1024 zoom to 400%, the tables are no longer fully visible and a navigation button to move sideways appears. If a table cannot be fully displayed when zoomed in, a scroll bar should be available.

1.4.11 Non-text Contrast (Level AA)

Information about success criterion 1.4.11 Non-text Contrast

Outcome: Failed

Finding 44: Multiple interactive elements, such as the main menu, the search function and the "Log in" link in the navigation menu are given focus with a grey/purple focus state. The contrast ratio between the grey/purple background of the focus border (HEX #E5E0E9) and the white background is 1.2:1 while it should be at least 3:1.

Finding 45: There are underlined link texts on all pages. The contrast ratio between the grey colour of the underline (HEX #B2B2D2) and the white background is 2:1 while it should be at least 3:1.

Finding 46: On page https://www.triodos.co.uk/vacancies/80444/apprentice-assistant-finance-administrator, green check marks are used as list bullets. The contrast ratio between the green check marks (HEX #43D8AE) and the white background is 1.7:1 while it should be at least 3:1. This issue occurs on several pages, including:

Finding 47: There is a search input field on page https://www.triodos.co.uk/search?q=banking. The contrast ratio between the yellow background (HEX #FFF5B9) and the white background of the search field is 1.1:1 while it should be at least 3:1. Make the search field more visible by, for example, adding a dark border (with a contrast ratio of at least 3:1).

Finding 48: An interactive map application is used on page https://www.triodos.co.uk/know-where-your-money-goes. The map application contains location indicators. These are not clearly visible due to the low contrast of the icon itself and the contrast ratio between the icon and the background in several different places. Make sure all icons and indicators in the application have high enough contrast ratios.

2. Operable

2.1 Keyboard Accessible

2.1.1 Keyboard (Level A)

Information about success criterion 2.1.1 Keyboard

Outcome: Failed

Finding 49: An interactive map application is used on multiple pages, including on page https://www.triodos.co.uk/know-where-your-money-goes. When clicking on a location indicator dialog box appears with information about the company. When visitors click on a location indicator with the keyboard, the map just keeps zooming in. Information about the businesses being funded is not available. Make sure all functions are keyboard accessible or consider providing this information in some other way, such as in a searchable database or a list.

Finding 50: On page https://www.triodos.co.uk/know-where-your-money-goes, the map application allows visitors to filter their search by sector. This feature is not accessible and operable through a keyboard. Ensure that interactive elements are both operable through mouse and keyboard, or provide a sufficient alternative.

Finding 51: On page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021, visitors can add a comment. When a visitor hovers over the "What do you think of this article" field, additional input fields and a submit button appear. This does not happen for visitors using the keyboard. Ensure that interactive elements are both mouse and keyboard operable, or provide a sufficient alternative.

2.1.4 Character Key Shortcuts (Level A)

Information about success criterion 2.1.4 Character Key Shortcuts

Outcome: Failed

Finding 52: If the website uses keyboard shortcuts, they should not interfere with the operation of screen readers. Therefore, visitors should be able to turn them off or modify them, or they should be active only when the focus is placed on the object to which the keyboard shortcuts apply. For Youtube videos, such as they appear on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021, the parameter 'disablekb=1' must be added to the URL of the embedded video.

2.4.1 Bypass Blocks (Level A)

Information about success criterion 2.4.1 Bypass Blocks

Outcome: Failed

Finding 53: The website has a way to bypass repeating blocks of content, but the skiplink to the content on the page is not the first skip link in the focus order (the first skip link refers to the navigation menu). Make sure the skiplink to get to the content on the page comes first.

2.4.2 Page Titled (Level A)

Information about success criterion 2.4.2 Page Titled

Outcome: Failed

Finding 54: Page https://www.triodos.co.uk/complaints has no descriptive title, just the url of the page. The title of a page is an important navigational aid for visitors using assistive technologies. Give the page a descriptive title to solve this problem. This also applies to:

Finding 55: The PDF on page https://www.triodos.nl/binaries/content/assets/tbho/position-papers/position-energy-climate.pdf has no title, just a file name. The title of a PDF is an important navigational aid for visitors using assistive technologies. Add a descriptive title and choose "Show: Document title" under "Initial view'.

Finding 56: The PDF on page https://www.triodos.co.uk/downloads/standardised-lending-product-overview?id=8a9587e03138 has a document title, but the 'Show: Document title' setting is not selected in 'Initial view'. This causes the file name to be displayed when opening the PDF, instead of the title. Change this to Document title to resolve this issue.

2.4.3 Focus Order (Level A)

Information about success criterion 2.4.3 Focus Order

Outcome: Failed

Finding 57: The website contains a cookie notice. The interactive elements of this cookie notice are last in the focus order of the page. As a result, the cookie notification remains visible on the underlying page for a long time. When zooming in, this obstructs the view of much of the page. Make sure the cookie notice gets keyboard focus first, before navigating further.

Finding 58: When visitors open the hamburger menu in the navigation menu at the top of each page with the keyboard, the keyboard focus first continues through the rest of the navigation menu before the first item in the opened menu gets focused. Then the button to close the menu disappears (visually). It appears (and regains focus) only after visitors have gone through all the interactive elements in the menu, plus the address bar in the browser.

Finding 59: Under "Our news and impact" are blocks of content with articles. Visitors navigating by mouse can use the buttons (< and >) to navigate through the items. Visitors using the keyboard, however, must tab through all the articles. This is because the button to go to a next or previous item only gets keyboard focus after all the blocks of content have had focus. Consider placing a more limited number of items here to make the site more user-friendly for all visitors. This problem occurs on multiple pages, including:

Finding 60: When visitors scroll past 'Source of customer numbers and lending figures: Triodos Bank Annual Report 2021' on the homepage, an invisible close button gets keyboard focus and then the skip link at the top of the page. After this, the keyboard focus continues again in the footer of the page. Make sure the keyboard focus order is logical for visitors who use the keyboard to navigate through the page. This issue occurs on all pages in the sample.

Finding 61: Page https://www.triodos.co.uk/help features expandable buttons. Even when buttons are not expanded interactive elements such as links (which are visually hidden) receive keyboard focus. Make sure these elements receive focus only when the buttons are expanded and visually hidden information is not available to assistive technologies. This problem occurs on multiple pages, including:

Finding 62: There are buttons on page https://www.triodos.co.uk/help with the text "See how-to'. When visitors click on one of these buttons, the page visually changes and only the information of that 'how-to' is visible. However, the focus order continues on the underlying page. This is confusing for visitors who use the keyboard but do see the screen. Make sure the focus order moves to the new content and visitors must close the content with the close button before they can navigate back to the original page

Finding 63: When visitors on page https://www.triodos.co.uk/current-account-eligibility open the information tooltip, a dialog box appears. When visitors navigate through this box with the keyboard, the focus order then continues on the underlying page. Make sure that visitors have to close the screen, or that the screen closes by itself after the last interactive element.

Information about success criterion 2.4.4 Link Purpose (In Context)

Outcome: Failed

Finding 64: On the homepage, the link text "Show me" is present. This link text is not descriptive enough. Visitors using a screen reader can navigate the page based on a link list. Therefore, make sure the link target is clear enough without needing the context of other text on the page. For example, with screenreader-only text, add the name of the page to which the link refers.

Finding 65: Non-unique link text appears on page https://www.triodos.co.uk/ethical-investments/triodos-bank-depository-receipts, such as "Read the press release". When link texts are the same, they should point to the same page. Make the link texts unique by adding the name of the article with, for example, screenreader-only text.

Finding 66: Advice: The link texts of search results on page https://www.triodos.co.uk/search?q=banking consist of all the text in the block of content. As a result, visitors using a screen reader get a lot of text read aloud. Consider shortening the link texts to just the name of the article.

2.4.6 Headings and Labels (Level AA)

Information about success criterion 2.4.6 Headings and Labels

Outcome: Failed

Finding 67: There is a button on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 that allows visitors to navigate to the comments at the bottom of the page. The accessible name of the button consists only of the number of comments (at the time of testing there were 4). This does not describe the function of the button. Give the button a descriptive name to solve this problem.

Finding 68: Advice: The name of the search button (identified by the magnifying glass icon) on page https://www.triodos.co.uk/search?q=banking is 'search.query.button'. The name of the button is somewhat descriptive, but not an accessible name in normal human speech. Consider renaming the button to simply 'Search' to solve this problem.

2.4.7 Focus Visible (Level AA)

Information about success criterion 2.4.7 Focus Visible

Outcome: Failed

Finding 69: A search function in the navigation menu at the top of each page is identified by the magnifying glass icon. When this button has keyboard focus, it is not visible. Make sure visitors know where the keyboard focus is by adding a clear focus border.

This problem occurs on multiple pages, including page:

Finding 70: When visitors open the hamburger menu in the navigation menu with the keyboard, a few invisible buttons get keyboard focus before the focus visibly enters the expanded menu. Make sure it is always visible which element has focus by adding a clear focus border, or by removing the elements from the focus order if those elements are not meant to have focus at that time.

Finding 71: When the content blocks under the text "Our banking and financial services are for individuals and organizations who...." have keyboard focus, it is not visible. Make sure it is always clear which element has focus, which helps visitors who use the keyboard to navigate the page but can see the screen when navigating.

Finding 72: When the links below the header on page https://www.triodos.co.uk/ethical-investments/triodos-bank-depository-receipts have keyboard focus, such as "Financial calendar" and "Documents," it is not visible. Make sure visitors can see where the keyboard focus is by adding a distinct focus border. A similar issue occurs on page:

Finding 73: When the navigation buttons near the chart on page https://www.triodos.co.uk/ethical-investments/triodos-bank-depository-receipts have focus, it is not visible. Make it clear which option has focus by adding a distinct focus border.

Finding 74: When the reply buttons on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 have focus, it is not visible. Make sure it is clear where the keyboard focus is by adding a clear focus border. The same applies to the 'Hide comments' button on the same page.

Finding 75: When the buttons under "Read more about SAAT board members" on page https://www.triodos.co.uk/ethical-investments/triodos-bank-depository-receipts have focus, it is not visible. Make sure it is clear where the keyboard focus is by adding a clear focus border. A similar issue occurs on page:

Finding 76: An invisible link without an accessible name appears on page https://www.triodos.co.uk/ethical-investments/triodos-bank-depository-receipts, between the 'Calendar year return' and 'Return' tables. Make the link visible, or remove the link.

Finding 77: There is an invisible button on page https://www.triodos.co.uk/current-account-eligibility. When this button has keyboard focus it is not visible. This is confusing to visitors who navigate by keyboard but can see the screen. Provide a visible focus border, or in this case, remove the invisible button.

Finding 78: Advice: When the article content blocks on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 have focus, it is only visible because of the slight upward movement of the content block. In WCAG 2.2, the requirements regarding focus visibility become more stringent, read more about it at: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum. This issue occurs on multiple pages, including:

3. Understandable

3.3 Input Assistance

3.3.1 Error Identification (Level A)

Information about success criterion 3.3.1 Error Identification

Outcome: Failed

Finding 79: When visitors on page https://www.triodos.co.uk/newsletter submit the form without having entered all the fields correctly, notifications appear near the input fields, such as "Please fill in your first name. This is an error suggestion, not an error identification. The visitor should receive an error message when an input field is not properly filled in or the form cannot be submitted properly. The error message should describe what error was made and where it was made. For example 'The field 'First name' is not filled out. Please fill in your first name.' This problem also occurs on page:

4. Robust

4.1 Compatible

4.1.1 Parsing (Level A)

Information about success criterion 4.1.1 Parsing

Outcome: Failed

Finding 80: The homepage contains unclosed HTML tags, such as a div element on line 82. This may be causing accessibility problems. Validate the HTML to resolve this issue. This problem occurs on multiple pages, including page:

Finding 81: On page https://www.triodos.co.uk/help, aria-level is used on a header element. This is not allowed. See also success criterion 4.1.2 for more explanation. This problem occurs on multiple pages, including:

Finding 82: On page https://www.triodos.co.uk/know-where-your-money-goes, a div element is used within a li element. This is not allowed. Remove the div element to resolve this issue. Read more about this problem at: https://dequeuniversity.com/rules/axe/4.4/list?application=AxeChrome.

Finding 83: Multiple duplicate ids occur on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021, including 'accordion-content-1'. This may be causing accessibility problems. Make sure ids are unique to solve this problem.

Finding 84: On page https://www.triodos.co.uk/ethical-investments/triodos-bank-depository-receipts, div elements are used in button elements. This is not allowed and may cause accessibility problems. Validate the HTML and fix the problems to resolve this issue.

4.1.2 Name, Role, Value (Level A)

Information about success criterion 4.1.2 Name, Role, Value

Outcome: Failed

Finding 85: There is a search function in the navigation menu at the top of each page, identified by the magnifying glass icon. This icon is a button, with no accessible name. See also success criterion 1.1.1. This problem occurs on multiple pages, including page:

Finding 86: The "Search our website" input field in the search function in the navigation menu at the top of each page, does not have an accessible name. See also success criterion 1.3.1.

Finding 87: 'Show more' buttons are used on multiple pages, including on page https://www.triodos.co.uk/help. These buttons do not have an accessible name because the visual label is loaded to the page with CSS, and is not plain text. Make sure each interactive element has an accessible name.

Finding 88: Page https://www.triodos.co.uk/help has expandable buttons. For sighted visitors, it is clear when items are expanded. This information should also be available to visitors using assistive technologies. For example, add aria-expanded to solve this problem. This problem occurs on multiple pages, including:

Finding 89: The content blocks under the text "Our banking and financial services are for individuals and organizations who...." include buttons with a > icon. These buttons do not have an accessible name. In addition, semantically this is not a button, but a link (visitors are referred to another page). Change the buttons to links and add a clear link target to solve this problem.

Finding 90: The content blocks under the text "Our banking and financial services are for individuals and organizations who...." contain buttons to navigate through the various items (< and >). These buttons do not have an accessible name. See also success criterion 1.1.1. This problem occurs on all pages with these navigational buttons.

Finding 91: The like and comment buttons on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 do not have accessible names. See also success criterion 1.1.1.

Finding 92: On page https://www.triodos.co.uk/help, headings are formatted with the header element, containing the role 'heading' and the aria-level attribute. The header element does not have the same semantic value as the heading element (e.g. h1), but provides a navigation landmark, such as at the top of the page. In addition, it is not allowed to use aria-level on a header element. Format texts with a regular heading element and remove unnecessary aria usage to solve this problem. This problem occurs on multiple pages, including:

Finding 93: On page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021, visitors must click "Accept" to access the YouTube video player. This button sends information to a server and should therefore be type='submit'.

Finding 94: The iframes on page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 contain no description within the title attribute. Add a title attribute with a descriptive name, such as the name of the video.

Finding 95: There is an invisible button on page https://www.triodos.co.uk/current-account-eligibility. This button does not have an accessible name. This button also appears to have no function. Remove the button.

Finding 96: Advice: On page https://www.triodos.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021, a blockquote element is placed inside a figure element with figcaption. This is allowed (a blockquote element is flow content), but it is semantically illogical because it is not actually a figure, even though it is recognized as such by assistive technologies. Consider removing the figure element.

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: 2024-12-22 12:46:17 v2.4-011