Accessibility Evaluation

Report:
Digital accessibility audit Triodos website


Evaluator
Renate, Swink; Yulia, Swink
Date
8 December 2022
Commissioner
Triodos

Summary of the evaluation findings

The website Triodos Bank does not comply to WCAG 2.1 level AA yet. 22 out of 50 success criteria contain one or more issues. This document describes to what extent the website meets the accessibility requirements captured in WCAG, the Web Content Accessibility Guidelines.

The website triodos.co.uk was examined between November 28 and December 8 2022. The audit was conducted using the WCAG-EM evaluation method. The purpose of this report is to determine what improvements are needed to make this website more accessible.

These are the most urgent findings:

-Multiple findings were found regarding keyboard accessibility, focus visibility and focus order, which means the website is not fully accessible to visitors navigating by keyboard.

The audit focuses specifically on the accessibility of the website for people with a disability, such as people who are blind, deaf, low-literate or have other functional problems. For them it is important that the website is technically and substantively designed in such a way that the site is usable. Optimizing a website for accessibility has more advantages; it makes the website more usable for everyone (for example also for people who look at their mobile phone in a sunny environment) and it makes the site easier to find in search engines.

Scope of the evaluation

Website name Triodos Bank
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
Accessibility support baseline Common browsers and assistive technologies.

Overview of audit results

Principle Passed Failed Can't tell
1 Perceivable 9 11 0
2 Operable 9 8 0
3 Understandable 9 1 0
4 Robust 1 2 0
Total 28 22 0

Reading Guide

This evaluation is a snapshot. The website might have been changed. The problems found are only examples. Therefore, check for any problem whether this also occurs in other places. This evaluation is just a sample of a few pages. As many different types of pages are included in the sample as possible to get the best impression of the accessibility. Pay attention! New problems may arise when making improvements or changes to the website/app. Success criteria marked with "Not present" are automatically approved. Success criteria marked with "Unknown" or "Can't tell" are not approved.

Detailed audit results


1. Perceivable

1.1 Text Alternatives

1.1.1 Non-text Content (Level A)

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.

Information about success criterion 1.1.1 Non-text Content

Outcome: Failed

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

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:

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.

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.

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

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.

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:

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.

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.1 Audio-only and Video-only (Prerecorded) (Level A)

For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:

Information about success criterion 1.2.1 Audio-only and Video-only (Prerecorded)

Outcome: Inapplicable


1.2.2 Captions (Prerecorded) (Level A)

Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

Information about success criterion 1.2.2 Captions (Prerecorded)

Outcome: Failed

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

An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

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

Outcome: Failed

Findings: 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.4 Captions (Live) (Level AA)

Captions are provided for all live audio content in synchronized media.

Information about success criterion 1.2.4 Captions (Live)

Outcome: Inapplicable


1.2.5 Audio Description (Prerecorded) (Level AA)

Audio description is provided for all prerecorded video content in synchronized media.

Information about success criterion 1.2.5 Audio Description (Prerecorded)

Outcome: Failed

Findings: 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, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Information about success criterion 1.3.1 Info and Relationships

Outcome: Failed

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

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.

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:

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.

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.

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.

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:

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.

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.

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:

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.

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:

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.

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.

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.2 Meaningful Sequence (Level A)

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Information about success criterion 1.3.2 Meaningful Sequence

Outcome: Passed


1.3.3 Sensory Characteristics (Level A)

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.

Information about success criterion 1.3.3 Sensory Characteristics

Outcome: Passed


1.3.4 Orientation (Level AA)

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

Information about success criterion 1.3.4 Orientation

Outcome: Passed


1.3.5 Identify Input Purpose (Level AA)

The purpose of each input field collecting information about the user can be programmatically determined when:

Information about success criterion 1.3.5 Identify Input Purpose

Outcome: Failed

Findings: 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.1 Use of Color (Level A)

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

Information about success criterion 1.4.1 Use of Color

Outcome: Passed


1.4.2 Audio Control (Level A)

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

Information about success criterion 1.4.2 Audio Control

Outcome: Inapplicable


1.4.3 Contrast (Minimum) (Level AA)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Information about success criterion 1.4.3 Contrast (Minimum)

Outcome: Failed

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

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:

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:

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.

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.

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.

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.

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)

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

Information about success criterion 1.4.4 Resize text

Outcome: Failed

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

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:

Information about success criterion 1.4.5 Images of Text

Outcome: Failed

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

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

Except for parts of the content which require two-dimensional layout for usage or meaning.

Information about success criterion 1.4.10 Reflow

Outcome: Failed

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

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:

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:

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.

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)

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

Information about success criterion 1.4.11 Non-text Contrast

Outcome: Failed

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

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.

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:

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

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.


1.4.12 Text Spacing (Level AA)

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

Information about success criterion 1.4.12 Text Spacing

Outcome: Passed


1.4.13 Content on Hover or Focus (Level AA)

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

Information about success criterion 1.4.13 Content on Hover or Focus

Outcome: Passed


2. Operable

2.1 Keyboard Accessible

2.1.1 Keyboard (Level A)

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

Information about success criterion 2.1.1 Keyboard

Outcome: Failed

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

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.

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.2 No Keyboard Trap (Level A)

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

Information about success criterion 2.1.2 No Keyboard Trap

Outcome: Passed


2.1.4 Character Key Shortcuts (Level A)

If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

Information about success criterion 2.1.4 Character Key Shortcuts

Outcome: Failed

Findings: 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.2 Enough Time

2.2.1 Timing Adjustable (Level A)

For each time limit that is set by the content, at least one of the following is true:

Information about success criterion 2.2.1 Timing Adjustable

Outcome: Inapplicable


2.2.2 Pause, Stop, Hide (Level A)

For moving, blinking, scrolling, or auto-updating information, all of the following are true:

Information about success criterion 2.2.2 Pause, Stop, Hide

Outcome: Inapplicable


2.3 Seizures and Physical Reactions

2.3.1 Three Flashes or Below Threshold (Level A)

Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.

Information about success criterion 2.3.1 Three Flashes or Below Threshold

Outcome: Passed


2.4.1 Bypass Blocks (Level A)

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

Information about success criterion 2.4.1 Bypass Blocks

Outcome: Failed

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

Web pages have titles that describe topic or purpose.

Information about success criterion 2.4.2 Page Titled

Outcome: Failed

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

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

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)

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

Information about success criterion 2.4.3 Focus Order

Outcome: Failed

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

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.

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:

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.

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:

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

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.


The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

Information about success criterion 2.4.4 Link Purpose (In Context)

Outcome: Failed

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

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.

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.5 Multiple Ways (Level AA)

More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.

Information about success criterion 2.4.5 Multiple Ways

Outcome: Passed


2.4.6 Headings and Labels (Level AA)

Headings and labels describe topic or purpose.

Information about success criterion 2.4.6 Headings and Labels

Outcome: Failed

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

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)

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Information about success criterion 2.4.7 Focus Visible

Outcome: Failed

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

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.

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.

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:

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.

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.

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:

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.

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.

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:


2.5 Input Modalities

2.5.1 Pointer Gestures (Level A)

All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.

Information about success criterion 2.5.1 Pointer Gestures

Outcome: Inapplicable


2.5.2 Pointer Cancellation (Level A)

For functionality that can be operated using a single pointer, at least one of the following is true:

Information about success criterion 2.5.2 Pointer Cancellation

Outcome: Passed


2.5.3 Label in Name (Level A)

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

Information about success criterion 2.5.3 Label in Name

Outcome: Passed


2.5.4 Motion Actuation (Level A)

Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:

Information about success criterion 2.5.4 Motion Actuation

Outcome: Inapplicable


3. Understandable

3.1 Readable

3.1.1 Language of Page (Level A)

The default human language of each Web page can be programmatically determined.

Information about success criterion 3.1.1 Language of Page

Outcome: Passed


3.1.2 Language of Parts (Level AA)

The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.

Information about success criterion 3.1.2 Language of Parts

Outcome: Passed


3.2 Predictable

3.2.1 On Focus (Level A)

When any component receives focus, it does not initiate a change of context.

Information about success criterion 3.2.1 On Focus

Outcome: Passed


3.2.2 On Input (Level A)

Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.

Information about success criterion 3.2.2 On Input

Outcome: Passed


3.2.3 Consistent Navigation (Level AA)

Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

Information about success criterion 3.2.3 Consistent Navigation

Outcome: Passed


3.2.4 Consistent Identification (Level AA)

Components that have the same functionality within a set of Web pages are identified consistently.

Information about success criterion 3.2.4 Consistent Identification

Outcome: Passed


3.3 Input Assistance

3.3.1 Error Identification (Level A)

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

Information about success criterion 3.3.1 Error Identification

Outcome: Failed

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


3.3.2 Labels or Instructions (Level A)

Labels or instructions are provided when content requires user input.

Information about success criterion 3.3.2 Labels or Instructions

Outcome: Passed


3.3.3 Error Suggestion (Level AA)

If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.

Information about success criterion 3.3.3 Error Suggestion

Outcome: Passed


For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true:

  1. Reversible: Submissions are reversible.
  2. Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
  3. Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

Information about success criterion 3.3.4 Error Prevention (Legal, Financial, Data)

Outcome: Inapplicable


4. Robust

4.1 Compatible

4.1.1 Parsing (Level A)

In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.

Information about success criterion 4.1.1 Parsing

Outcome: Failed

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

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:

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.

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.

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)

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

Information about success criterion 4.1.2 Name, Role, Value

Outcome: Failed

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

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.

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

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:

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.

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.

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.

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:

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

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.

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.

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.


4.1.3 Status Messages (Level AA)

In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

Information about success criterion 4.1.3 Status Messages

Outcome: Passed

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

Web browsers (User Agents) and other software

The following software was used in this evaluation:

Resources:

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

Source: toegankelijkheidsrapport.swink.nl/triodos.co.uk/audit/
Printed: 2024-12-22 07:02:56 v2.4-011