Accessibility Evaluation

Report:
Digital accessibility audit The Colour of Money website


Evaluator
Kaylee, Swink; Renate, Swink
Date
12 December 2022
Commissioner
Triodos Bank N.V.

Summary of the evaluation findings

The website The Colour of Money does not comply to WCAG 2.1 level AA yet. 24 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 colour-of-money.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 the next steps to achieve an accessible website.

The most urgent findings in this report are:

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 The Colour of Money
Scope of the website The scope of this audit includes:
  • All pages of the website colour-of-money.co.uk.
  • All PDF document on the website colour-of-money.co.uk.
The scope of this audit excludes:
  • Sub-website(s) where the HTML and/or systeem differs from colour-of-money.co.uk.
  • All external systems and websites linked to on colour-of-money.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 8 12 0
2 Operable 10 7 0
3 Understandable 8 2 0
4 Robust 0 3 0
Total 26 24 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: In the header of every page is a logo of Triodos bank. This image does not have an alternative text. Make sure that logos have an alternative text that includes the organization name and all text that is visible on the logo.

In the header of every page, there is a search field that contains a button. This button is labelled by an icon of a magnifying glass, which is an SVG-element, without an alternative text. As a result, the button does not have an accessible name (see also success criterion 4.1.2). Make sure there is a textual alternative for the magnifying glass icon. For example by placing an aria-label on the button-element, or by removing aria-hidden from the SVG-element and placing a title-element as the first child element in the SVG-element.

On the homepage are decorative images next to article headings. These images have an alternative text that is equal to the article's heading. For example, next to the heading 'Our vision on social inclusion' is an image with the alternative text 'Our vision on social inclusion'. An alternative text needs to describe the image. Decorative images do not need an alternative text, it is sufficient to give the img-element of a decorative image an empty alt-attribute.

This issue also occurs on other pages:

On the homepage are decorative images under the heading 'Browse the collections'. These images do not have an alternative text, which they do not need because they are decorative. However, the img-element of these images does not have an empty alt-attribute. Without an empty alt-attribute assistive technology will look for another alternative text to give to these images, the file name for example. Make sure that decorative images without an alternative text have an empty alt-attribute on their img-element.
This problem also occurs on other pages, for example on pages colour-of-money.co.uk/energy-and-climate and colour-of-money.co.uk/sustainable-inspiration.

On the homepage, next to the articles are icons of a heart and a conversation cloud that work as links. These icons convey information and therefore need an alternative text. Make sure the alternative text is the same as the visual information these icons give to users. The icons are placed on the page with SVG-elements. Give the icons an alternative text using a title-element as a first child element of the SVG-element.

These icons also appear on other pages, for example;

On page colour-of-money.co.uk/privacy-and-cookie-policy, there are SVG images that have been used to label buttons, e.g. the plus icon in collapsible buttons. These SVG images have a role=image and therefore need alternative text. However, these SVG images are decorative. Therefore, make sure the decorative SVG images are hidden from assistive technology, for example by using aria-hidden.

There are also decorative SVG-images on other pages;

Page colour-of-money.co.uk/blog-alert contains the icon * (asterisk) before the text 'required'. The icon is placed on the page using the pseudo-element :before/:after and the content property in the CSS. This way, the icon may be omitted, for example for people using a custom CSS, or when the CSS does not load. The content property is only suitable for adding purely decorative content. A solution could be to place the icon in the HTML, for example as an IMG or SVG element with a textual alternative.

On page colour-of-money.co.uk/blog-alert there is no alternative text for the * (asterisks) next to the input labels. Not all assistive technology can indicate this icon correctly. Make sure that there is a text alternative for the *, for example by using the required attribute on the input elements of the input fields.

In the PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-…, are images that convey information but do not have a (good) alternative text. e.g. the logos on page 5. Make sure images that convey information have a good alternative text.

In the PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-…, decorative images and figures are placed with a figure tag in the code layer. These include, for example, the yellow circles on page 4. In PDFs, decorative elements should be marked as artefacts, that way assistive technology knows that these elements are decorative. Therefore, remove the figure tags of decorative elements from the code layer and mark these elements as artifacts.


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: A video is shown on page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-…. This video has automatically generated subtitles. There are incorrect words in a number of places, for example at 3:34 where they say ‘Electricity bill' but 'electricity build' is shown in the subtitles. Punctuation is also missing in the subtitles, making the sentences difficult to understand. Add proper subtitles to the video to solve this problem.
This problem also occurs in videos on pages colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021, in the video 'Our Change can Change the World: Harry and Chris'.


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: On page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-…, some text is shown in the video, for example around 1:19 and 3:24. There is no transcript of the video, nor is there a voice-over narrating what is on the screen. Thus, people who cannot see the video and depend on a screen reader or the audio track may not know what is shown in the video. Put this and other visual information in a transcript. Or use an additional audio track to also comply with success criterion 1.2.5.
This issue also occurs on page colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021.


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: Text is shown in the video on page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-…. A voiceover or audio description does not read these texts. As a result, people who cannot see the screen will miss the texts when they play the video. Make sure that the texts shown in the video are present in an audio track of the video by providing an audio description (for example by adding a voice-over).
This problem also occurs in the videos on pages colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021.


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: There is a table on page colour-of-money.co.uk/privacy-and-cookie-policy, hidden beneath the collapsible button 'Glossary'. The header cells 'Term' and 'Definition' in this table are not formatted with the appropriate elements. These cells are formatted with the td-element, but they need to be formatted with the th-element. When formatted properly, assistive technology can determine which cells are headings for other cells. Make sure that the cells 'Term' and 'Definition' are formatted with the th-element.

On page colour-of-money.co.uk/privacy-and-cookie-policy, content hidden beneath collapsible buttons (accordions) is not hidden properly for assistive technology, like screen readers. When the content hidden is visually in an accordion on this website, a screen reader will still read this content. It is also possible to place keyboard focus on hidden content like links and buttons, see success criterion 2.4.3. Make sure that when content is visually hidden, the content is also hidden to assistive technology.
This problem also occurs in the header of every page with the hidden content under the 'Choose collections' button.

Under the collapsible button "How will Triodos use your personal data?" on page colour-of-money.co.uk/privacy-and-cookie-policy is the heading "Special categories of personal data". This visual heading is not formatted with a heading-element. As a result, assistive technology cannot determine that this text is a heading. Make sure everything that every text that functions as a heading for the content directly beneath is formatted with a heading-element.
Similar issues also occur on page colour-of-money.co.uk/articles/2022/triodos-bank-discloses-intermediate-targets-in-view-of-reaching-….

On page colour-of-money.co.uk/search-results, it is visually clear which button is selected under the heading 'Refine' because that button has a different colour. This information is not available to assistive technology. Use aria-current on the selected button or a similar method to make this information available to assistive technology.

In the PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-…, no document tag was used in the code layer. In PDFs, a document tag is equivalent to an HTML tag, it must be present in the code layer and all tags of the document must be placed in it. Add a document tag to the code layer.

The PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-… is not correctly formatted (tagged). Some texts have been placed in figure tags, causing these texts to be seen as images, and headings are not placed in heading tags (for example on page 4). Additionally, the order in which the tags are placed in the code layer is not correct, see success criterion 1.3.2. Make sure the code layer of this PDF is formatted correctly.

Advice: On page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-… there is an empty h2-element above the input field 'What do you think of this article?'. Empty heading-elements can be placed in the heading list of assistive technology or can be read by screen readers. That can be confusing for users of assistive technology. Remove the empty h2-element.
An empty heading-element also appears on page colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022.

Advice: The heading structure on the homepage is not logical. The page starts with the h5-element ‘The Colour of Money', followed by an h3-element 'Investing in our planet', which in its turn is followed by an h1-element. It is better to start a page with a level 1 heading (h1-element) for the page title and let that be followed by level 2 headings (h2-element) for the subheadings, level 3 headings (h3-element) for the headings below the subheadings, etc. A logical descending heading structure is better for the accessibility of the page. For example, screen reader users can scan the page better when a logical heading structure is used.


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

Findings: In the PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-…, the code layer is formatted in such a way that the reading order of the document is incorrect. For example, headings are placed after the text and in the timeline on page 4, all year numbers are placed in the code layer before the corresponding texts. As a result, the meaning of the content is not correct when the document is read by screen readers. Make sure the code layer is formatted so that the reading order of the document is correct.


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

Findings: The sentence 'Any terms with a specific definition used in this statement, are highlighted in italics and are explained in the Glossary section.' can be found on the page colour-of-money.co.uk/privacy-and-cookie-policy. Only users who can see the page can tell if the text is in italics. Because of this, users who cannot see the page do not know which term can be found in the Glossary. Ensure that information or instructions are not dependent on the sensory characteristics of an element, such as shape, size, location, or sound.


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: On page colour-of-money.co.uk/blog-alert is a form where visitors can fill in their own e-mail address and name, among others. The purpose of these and several other fields should be able to be determined programmatically so that input fields can be filled in automatically or extra help can be provided for completion. This can be done by adding the autocomplete attribute to input elements. For example, for email address autocomplete="email".
An overview of the fields for which the autocomplete attribute is applicable, and the value required in this attribute can be found on page: www.w3.org/tr/wcag21/.
This problem also occurs in other forms, for example, the forms on page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-… and colour-of-money.co.uk/articles/2022/the-need-for-a-paradigm-shift-in-urban-planning.


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

Findings: The PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-… contains charts in which information in the legend and in the chart is linked by colour only. For example, the graph on page 8. People who cannot see colours (well) may have difficulty understanding these graphs. Make sure that information is not only linked through colour, by using shapes or by adding accessible tables.


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


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: The contrast of the label of input fields on page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-… is too low. For example, the text 'What do you think of this article?'. The contrast ratio of this text (HEX #9999C3) on the white background is 2,7:1, where it should be at least 4,5:1.
This contrast problem also occurs on other pages, for example on colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 and colour-of-money.co.uk/blog-alert.

When people hover with the mouse pointer on the text 'This is a key focus for Triodos as we make progress towards being a net-zero bank by 2035.”' on page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-…, the colour of this text changes to blue (HEX #0096ff). The contrast of this blue colour on the white background is too low. The contrast ratio is 3:1, where it should be at least 4,5:1.

When texts are placed in front of images, such as on page colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022, these texts may have low contrast with the background. For example, the text 'Q & A with Chris Packman' contains white text on a white background. The contrast ratio here is 1.4:1, which should be at least 4.5:1 throughout the entire text. Make sure the text has sufficient contrast against the background in all places.

Text placed in front of images, causing it to have low contrast, can be found on multiple pages;

The dates and subjects (HEX #B2B2D2) present next to search results on page colour-of-money.co.uk/search-results have low contrast. The contrast ratio here is 2:1, which 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: Passed


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


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 a visitor zooms in on page colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022 up to 250% at a viewport of 1280x1024px, buttons appear near the tables that allow visitors to scroll through the table horizontally. After the buttons are activated once, they disappear, and the buttons do not become visible again with hover or focus. As a result, visitors can no longer scroll through the tables, making them difficult to read. Make sure these buttons do not disappear.
Another problem with these tables is that headers in the leftmost column, such as 'Triodos Global Equities Impact Fund KR-dis', remain in view when visitors scroll through the table using the buttons. These headers are in front of data cells, making these data cells not visible. This makes the table unreadable when users zoom in on the page. Ensure users can read the table properly when they zoom in on the page.


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: The search field in the header of every page is indicated with a bottom border (HEX #E5EFF2). The contrast of this border on the white background is too low. The contrast ratio is 1,1:1, where it should be at least 3:1.

On page colour-of-money.co.uk/privacy-and-cookie-policy, links in a section of text are indicated with underlining. The contrast of this underlining (HEX #E6F2F5) is too low on the blue background (HEX #A1A9CB). The contrast ratio is 2:1, where it should be at least 3:1. The contrast ratio of this underlining is also too low when the link is placed on a white background. In this case, the contrast ratio is 2,3:1.
This contrast problem occurs on multiple pages, for example on page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-… and page colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021.

On page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-…, when the focus is placed on the links under the headings 'Related articles' and 'All our articles', the focus is indicated with a bottom border under the link. The contrast ratio of this border (HEX #EBF4F7) on the white background is too low. The contrast ratio is 1,1:1, where it should be at least 3:1.
This contrast problem occurs on other pages. For example, on pages colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022 and colour-of-money.co.uk/articles/2022/triodos-bank-discloses-intermediate-targets-in-view-of-reaching-….

The input fields on page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-… are indicated by a bottom border (HEX# 9999C4). The contrast ratio of this border on the white background is too low. The contrast ratio is 2,7:1, where it should be at least 3:1.
This contrast problem also occurs on other pages. For example, on pages colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 and colour-of-money.co.uk/blog-alert.


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: It is not possible for keyboard users to place focus on the collapsible button 'Choose collections' in the header of every page. Because of this, keyboard users cannot access the information that is hidden beneath this button. Make sure that keyboard users can place focus on this button and activate it using the keyboard.

On page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-…, it is possible to enlarge an image by clicking on it with the mouse pointer. This function is not available to keyboard users. Make sure keyboard users can enlarge images and close them using the keyboard.


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: The page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-… uses YouTube's video player. This video player uses control by some character keys. E.g., f for fullscreen. This functionality is something that can affect screen reader functionality. Solve this by modifying the embed code of the YouTube video to disable control with character keys. The property to add to the embed code is 'disablekb=1'.
This problem also occurs on page colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021.


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


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


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 first skip link on every page of the website, 'Skip to main navigation', does not move the keyboard focus. Because of this keyboard users can't use the skip link to bypass repeating content on the website, like the logo in the header. Make sure that the skip link moves the keyboard focus on the webpage.

Advice: On page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-… it is possible to place keyboard focus on the links under the headings 'Related articles' and 'All our articles'. There are a lot of links in these sections, it takes keyboard users a long time and a lot of physical action to tab through all these links. This can hinder keyboard users when visiting this page. Consider placing a skip link above this section so keyboard users do not have to tab through all these links.
These sections can also be found on other pages, for example on page colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022 and colour-of-money.co.uk/articles/2022/the-need-for-a-paradigm-shift-in-urban-planning.


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: The PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-… has the document title 'The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog'. This does not describe the content of the document. Make sure the PDF has a document title that describes the content of the document.


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: When users visit the website for the first time, a cookie notice is displayed. This notice is located at the bottom of the screen and, as a result, is positioned over content such as the footer. The cookie notice is the last element to get focus on a page. This can hinder sighted keyboard users because the notice blocks content. Make sure that when the cookie notice is on screen, it is the first thing on the page to get focus.

On the homepage, after the keyboard focus is placed on the 'Join now' link, the next item to receive focus is the skip link 'Skip to the main content'. This is not a logical focus order. Make sure that focus does not skip to the top of the page when keyboard users tab through focusable items, but that the next logical item receives focus.
This problem occurs on multiple pages of the website. For example, on colour-of-money.co.uk/privacy-and-cookie-policy and colour-of-money.co.uk/sustainable-inspiration.

On the homepage there are links and other information hidden beneath the button 'Choose collections'. It is not possible for keyboard users to operate this button, see also success criterion 2.1.1. However, it is possible for keyboard users to place focus on the links that are hidden beneath this button. This can be confusing for sighted keyboard users because they cannot tell which items have keyboard focus. These links also receive focus tfter the 'Subscribe' link. These links need to receive focus after the 'Choose collections' button. Make sure that focus can only be placed on the links when they are visible and that they have a logical place in the focus order.
It occurs multiple times on the website that non visible items receive focus. For example, when users zoom in on the homepage a menu button appears. It is possible to place keyboard focus on the links beneath this button when they are not visible.
This problem also occurs on page colour-of-money.co.uk/privacy-and-cookie-policy, it's possible to place focus on links and buttons that are hidden beneath the collapsible button (accordions).

On the homepage, when the button 'Show more articles' is activated new content appears on the page. The keyboard focus is not placed on the new content, but stays on the 'Show more articles' button. Because of this, users who can't see the screen may miss the new content that appears on the page. This can also hinder sighted keyboard users, because they need to use the tab/shift combination to tab back and place the focus on the new content. Make sure that when new content appears on the page, the keyboard focus is placed on this content.
This problem occurs on multiple pages. For example, on page colour-of-money.co.uk/sustainable-inspiration and colour-of-money.co.uk/impact-investing.

On page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-…, input fields become visible when visitors click on the 'What do you think of this article?' field. These additional input fields do not become visible when the keyboard focus is placed on them. This places focus on non-visible elements. Make sure the fields become visible as soon as the focus is on them so that keyboard users can fill them out properly.
This problem also occurs on other pages. For example, on pages colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022 and colour-of-money.co.uk/articles/2022/the-need-for-a-paradigm-shift-in-urban-planning.


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, links to articles are visually labelled with a heart or conversation cloud and a number behind it. The link text/accessible name of these links contain just the number. This does not adequately indicate where the link refers to. Make sure the link text indicates which page the link refers to, for example by supplementing it with the name of the page the link refers to. Also, the information conveyed by the icons should be reflected in the link text/accessible name of the links, see success criterium 1.1.1.
These links also appear on other pages. For example, on page colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022 and colour-of-money.co.uk/energy-and-climate.

On the page colour-of-money.co.uk/privacy-and-cookie-policy are two links with the link name 'website'. Both links refer to different website, namely to ico.org.uk/your-data-matters/ and autoriteitpersoonsgegevens.nl/en. Users cannot tell these links apart with only the link texts. Because of this people who benefit from a clear navigation structure can struggle using these links. Make sure that links with identical link names refer to the same page. You can fix this problem by changing the link name of both (or one) links.

Advice: On page colour-of-money.co.uk/articles/2022/triodos-bank-discloses-intermediate-targets-in-view-of-reaching-…, the link text 'here' is used. From the context of the link, it is clear where it refers to. However, screen reader users may find it more difficult to figure out where this link refers to, for example when using a link list. Avoid using unclear link text such as 'here' and ''click here'.


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

Findings: Advice: The search field on page colour-of-money.co.uk/search-results contains a button with the accessible name 'search.query.button'. This accessible name does not describe accurately what this button does. Make sure the accessible name of this button describes what the button does.


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: On the homepage there are blocks of content that work as links, for example 'Our vision on social inclusion'. When focus is placed on these types of links with the keyboard, the focus is not visible. It is important that focus is indicated with a visual indicator, like a focus border. That way sighted keyboard users can tell which item had focus.

It is also not indicated when other elements on the homepage have focus, like the chat cloud next to articles or the 'Show more articles' button.

This problem also occurs on other pages. For example:


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

Findings: The language setting of the PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-… is Dutch, while the content of the document is in English. Make sure the language setting of the document corresponds with its contents and is set to English.


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: On page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-…, when people enter a short message in the field 'What do you think of this article?' and submit the form, the error message 'Enter a valid message' appears. This error message does not tell the users what mistake has been made. It can be difficult for users with certain cognitive disabilities to fill in a form when error messages do not tell which mistake they made. Make sure that error messages tell users what mistake they made and name the field in which the mistake has been made.
You can find this form on other pages. For example, on colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 and colour-of-money.co.uk/articles/2022/triodos-bank-discloses-intermediate-targets-in-view-of-reaching-….


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: On the homepage, there are button-elements that are direct descendants of an a-element, these are the buttons/links that are labelled with a hart or conversation cloud icon and a number. When a button is placed in an a-element it could be difficult to operate the button with the keyboard or/and assistive technology. Make sure that buttons are not nested inside a-elements.
This issue also appears on other pages, for example on page colour-of-money.co.uk/sustainable-inspiration and colour-of-money.co.uk/impact-investing.

In the HTML code of the homepage there is an unclosed <div>. When elements are not properly closed it could give problems when users use assistive technology. Make sure this <div> is properly closed or removed.

Duplicate ids occur on page colour-of-money.co.uk/privacy-and-cookie-policy. The ids in question are:

  • 'accordion-button-1'
  • 'accordion-content-1'
  • 'accordion-button-2'
  • 'accordion-content-2'
  • 'accordion-button-3'
  • 'accordion-content-3'
  • 'accordion-button-4'
  • 'accordion-content-4'
  • 'accordion-button-5'
  • 'accordion-content-5'
  • 'accordion-button-6'
  • 'accordion-content-6'

Duplicate ids may cause problems when assistive technology is used. Make sure that ids are unique for every element.

This problem occurs on multiple pages, for example;

The 'Building with green bonds' block on page colour-of-money.co.uk/energy-and-climate is formatted in a li element. This li element is not placed in an ul or ol element, which a li-element should always be nested in. This may cause problems for assistive technology. Therefore, remove the li element or place it in a ul or ol element.
This problem also occurs on the pages colour-of-money.co.uk/sustainable-inspiration and colour-of-money.co.uk/impact-investing.


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: In the header of every page there is a search field that contains a button. This button is labelled by an icon of a magnifying glass, which is a svg-element, without an alternative text. Because of this the button does not have an accessible name (see also success criterion 1.1.1). Without an accessible name, it can be difficult for users of assistive technologies to operate this button. Make sure that this button gets an accessible name. You can do this by using aria-label or a similar technique.

Other pages also have buttons without an accessible name. For example;

The list hidden beneath the 'Choose collections' button is formatted with role="listbox". Using role="listbox" turned this list into a combobox, but the list does not work as a combobox. As a result, the wrong information is available to assistive technology. Make sure role="listbox" is used only when elements need to work as a select-element. Solve this problem by removing role="listbox" and its associated attributes from the list.

On page colour-of-money.co.uk/privacy-and-cookie-policya are collapsible buttons (accordions). Visually it clear when a button is expanded, but this information is not available to assistive technology like screen readers. Make sure assistive technology can tell when a button is expanded, by using aria-expanded on the button-element or a similar method. Aria-expanded is used on the div-element these buttons are nested in, but aria attributes cannot be used on elements without a role. That's why the information aria-expanded conveys is not available for assistive technology.
A similar problem also occurs on other pages with collapsible buttons. For example, on page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-…, with the button 'Why we finance projects like this'.

On page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-… is an iframe element without a title attribute. Because of this the element does not have an accessible name. Make sure that iframes have a title attribute that describes its contents.
This problem also occurs on iframe elements on page colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021.

When users zoom in on the homepage to 125% with a viewport of 1280x1024px, content in the header disappears beneath a menu button. This button doesn't have an accessible name. Users who use a screen reader or voice control may not be able to operate this button. Make sure this button receives an accessible name. Do this by using aria-label or a similar method.

More buttons that appear when users zoom in on the homepage do not have an accessible name. For example, the search button that appears in the header.

It also happens on other pages that when users zoom in buttons without an accessible name appear;

When users visit the page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-… for the first time, a cookie notice is placed in the YouTube video player. The button to accept the cookies with has no type=submit on the button element. This is necessary because activating the button sends data. Make sure type=submit is placed on the button element.

Advice: On the homepage, links to articles are visually labelled with a heart or conversation cloud and a number behind it. These links are formatted with the button-element but function as links because they refer users to another page. This can be confusing for screen reader users, they expect a button to carry out an action and links to refer them to another page or point on the page. It is better to format links as links and to not use a button-element when formatting an element that works as a link. A solution for this could be to use an a-element instead of a button-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: Failed

Findings: On page colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-…, when visitors make mistakes in the input fields, error messages appear on the page. These error messages are not noticed by screen readers. As a result, screen reader users miss the error messages and cannot submit the form properly. Make sure screen readers notice the error messages. For example, by using aria-live.

This also happened when users submit the form. Then, the message 'Thanks for joining the conversation. We've sent you an email - click on the link to publish your post.' appears on screen but screen readers do not notice it.

This problem also occurs on other pages. For example;

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/colour-of-money.co.uk/audit/
Printed: 2024-03-29 10:24:04 v2.4-011