Accessibility Evaluation

Issues:
Digital accessibility audit The Colour of Money website

(Issues only)

Scope of the evaluation

Website name The Colour of Money
Date 12 December 2022
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

Detailed audit results

Number of findings: 64

1. Perceivable

1.1 Text Alternatives

1.1.1 Non-text Content (Level A)

Information about success criterion 1.1.1 Non-text Content

Outcome: Failed

Finding 1: 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.

Finding 2: 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.

Finding 3: 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:

Finding 4: 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 https://colour-of-money.co.uk/energy-and-climate and https://colour-of-money.co.uk/sustainable-inspiration.

Finding 5: 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;

Finding 6: On page https://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;

Finding 7: Page https://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.

Finding 8: On page https://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.

Finding 9: In the PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on https://www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-zero-banking-alliance/20221021---triodos-bank-nzba-intermediate-targets-disclosure.pdf, 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.

Finding 10: In the PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on https://www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-zero-banking-alliance/20221021---triodos-bank-nzba-intermediate-targets-disclosure.pdf, 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.2 Captions (Prerecorded) (Level A)

Information about success criterion 1.2.2 Captions (Prerecorded)

Outcome: Failed

Finding 11: A video is shown on page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future. 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 https://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)

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

Outcome: Failed

Finding 12: On page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future, 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 https://colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021.

1.2.5 Audio Description (Prerecorded) (Level AA)

Information about success criterion 1.2.5 Audio Description (Prerecorded)

Outcome: Failed

Finding 13: Text is shown in the video on page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future. 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 https://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 about success criterion 1.3.1 Info and Relationships

Outcome: Failed

Finding 14: There is a table on page https://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.

Finding 15: On page https://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.

Finding 16: Under the collapsible button "How will Triodos use your personal data?" on page https://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 https://colour-of-money.co.uk/articles/2022/triodos-bank-discloses-intermediate-targets-in-view-of-reaching-net-zero-by-2035.

Finding 17: On page https://colour-of-money.co.uk/search-results?q=Investing, 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.

Finding 18: In the PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on https://www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-zero-banking-alliance/20221021---triodos-bank-nzba-intermediate-targets-disclosure.pdf, 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.

Finding 19: The PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on https://www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-zero-banking-alliance/20221021---triodos-bank-nzba-intermediate-targets-disclosure.pdf 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.

Finding 20: Advice: On page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future 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 https://colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022.

Finding 21: 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)

Information about success criterion 1.3.2 Meaningful Sequence

Outcome: Failed

Finding 22: In the PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on https://www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-zero-banking-alliance/20221021---triodos-bank-nzba-intermediate-targets-disclosure.pdf, 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)

Information about success criterion 1.3.3 Sensory Characteristics

Outcome: Failed

Finding 23: 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 https://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.5 Identify Input Purpose (Level AA)

Information about success criterion 1.3.5 Identify Input Purpose

Outcome: Failed

Finding 24: On page https://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: https://www.w3.org/tr/wcag21/#input-purposes.
This problem also occurs in other forms, for example, the forms on page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future and https://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)

Information about success criterion 1.4.1 Use of Color

Outcome: Failed

Finding 25: The PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on https://www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-zero-banking-alliance/20221021---triodos-bank-nzba-intermediate-targets-disclosure.pdf 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.3 Contrast (Minimum) (Level AA)

Information about success criterion 1.4.3 Contrast (Minimum)

Outcome: Failed

Finding 26: The contrast of the label of input fields on page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future 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 https://colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 and https://colour-of-money.co.uk/blog-alert.

Finding 27: 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 https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future, 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.

Finding 28: When texts are placed in front of images, such as on page https://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;

Finding 29: The dates and subjects (HEX #B2B2D2) present next to search results on page https://colour-of-money.co.uk/search-results?q=Investing have low contrast. The contrast ratio here is 2:1, which should be at least 4,5:1.

1.4.10 Reflow (Level AA)

Information about success criterion 1.4.10 Reflow

Outcome: Failed

Finding 30: When a visitor zooms in on page https://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)

Information about success criterion 1.4.11 Non-text Contrast

Outcome: Failed

Finding 31: 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.

Finding 32: On page https://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 https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future and page https://colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021.

Finding 33: On page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future, 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 https://colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022 and https://colour-of-money.co.uk/articles/2022/triodos-bank-discloses-intermediate-targets-in-view-of-reaching-net-zero-by-2035.

Finding 34: The input fields on page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future 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 https://colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 and https://colour-of-money.co.uk/blog-alert.

2. Operable

2.1 Keyboard Accessible

2.1.1 Keyboard (Level A)

Information about success criterion 2.1.1 Keyboard

Outcome: Failed

Finding 35: 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.

Finding 36: On page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future, 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.4 Character Key Shortcuts (Level A)

Information about success criterion 2.1.4 Character Key Shortcuts

Outcome: Failed

Finding 37: The page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future 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 https://colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021.

2.4.1 Bypass Blocks (Level A)

Information about success criterion 2.4.1 Bypass Blocks

Outcome: Failed

Finding 38: 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.

Finding 39: Advice: On page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future 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 https://colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022 and https://colour-of-money.co.uk/articles/2022/the-need-for-a-paradigm-shift-in-urban-planning.

2.4.2 Page Titled (Level A)

Information about success criterion 2.4.2 Page Titled

Outcome: Failed

Finding 40: The PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on https://www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-zero-banking-alliance/20221021---triodos-bank-nzba-intermediate-targets-disclosure.pdf 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)

Information about success criterion 2.4.3 Focus Order

Outcome: Failed

Finding 41: 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.

Finding 42: 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 https://colour-of-money.co.uk/privacy-and-cookie-policy and https://colour-of-money.co.uk/sustainable-inspiration.

Finding 43: 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 https://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).

Finding 44: 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 https://colour-of-money.co.uk/sustainable-inspiration and https://colour-of-money.co.uk/impact-investing.

Finding 45: On page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future, 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 https://colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022 and https://colour-of-money.co.uk/articles/2022/the-need-for-a-paradigm-shift-in-urban-planning.

Information about success criterion 2.4.4 Link Purpose (In Context)

Outcome: Failed

Finding 46: 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 https://colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022 and https://colour-of-money.co.uk/energy-and-climate.

Finding 47: On the page https://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 https://ico.org.uk/your-data-matters/ and https://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.

Finding 48: Advice: On page https://colour-of-money.co.uk/articles/2022/triodos-bank-discloses-intermediate-targets-in-view-of-reaching-net-zero-by-2035, 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.6 Headings and Labels (Level AA)

Information about success criterion 2.4.6 Headings and Labels

Outcome: Passed

Finding 49: Advice: The search field on page https://colour-of-money.co.uk/search-results?q=Investing 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)

Information about success criterion 2.4.7 Focus Visible

Outcome: Failed

Finding 50: 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:

3. Understandable

3.1 Readable

3.1.1 Language of Page (Level A)

Information about success criterion 3.1.1 Language of Page

Outcome: Failed

Finding 51: The language setting of the PDF 'Update on Triodos Bank's commitment to the Net-Zero Banking Alliance' on https://www.triodos.com/binaries/content/assets/tbho/other/update-on-triodos-banks-commitment-to-the-net-zero-banking-alliance/20221021---triodos-bank-nzba-intermediate-targets-disclosure.pdf 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.3 Input Assistance

3.3.1 Error Identification (Level A)

Information about success criterion 3.3.1 Error Identification

Outcome: Failed

Finding 52: On page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future, 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 https://colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021 and https://colour-of-money.co.uk/articles/2022/triodos-bank-discloses-intermediate-targets-in-view-of-reaching-net-zero-by-2035.

4. Robust

4.1 Compatible

4.1.1 Parsing (Level A)

Information about success criterion 4.1.1 Parsing

Outcome: Failed

Finding 53: 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 https://colour-of-money.co.uk/sustainable-inspiration and https://colour-of-money.co.uk/impact-investing.

Finding 54: 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.

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

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;

Finding 56: The 'Building with green bonds' block on page https://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 https://colour-of-money.co.uk/sustainable-inspiration and https://colour-of-money.co.uk/impact-investing.

4.1.2 Name, Role, Value (Level A)

Information about success criterion 4.1.2 Name, Role, Value

Outcome: Failed

Finding 57: 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;

Finding 58: 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.

Finding 59: On page https://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 https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future, with the button 'Why we finance projects like this'.

Finding 60: On page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future 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 https://colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021.

Finding 61: 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;

Finding 62: When users visit the page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future 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.

Finding 63: 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)

Information about success criterion 4.1.3 Status Messages

Outcome: Failed

Finding 64: On page https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future, 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

Resources:

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

Printed: 2024-12-27 02:50:23 v2.4-011