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 focus order doesn't always correspond to the user's expectations, making the experience less accessible for visitors who use the keyboard to navigate the website.
- Several buttons do not have accessible names. This makes these buttons impossible or difficult to operate for users of assistive technologies.
- The audited pdf is not accessible. As a result, the file cannot be read by users of assistive technology.
- Several images have no (or proper) alternative text. This makes the information on the images unavailable to visitors who cannot see the screen.
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:
|
| 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.
- Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
- Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
- Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
- Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
- CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
- Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
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:
- https://colour-of-money.co.uk/energy-and-climate
- https://colour-of-money.co.uk/sustainable-inspiration
- https://colour-of-money.co.uk/impact-investing
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.
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;
- https://colour-of-money.co.uk/energy-and-climate
- https://colour-of-money.co.uk/articles/2022/investing-in-a-future-fit-energy-system
- https://colour-of-money.co.uk/sustainable-inspiration
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;
- https://colour-of-money.co.uk/energy-and-climate, the plus icon in the 'Show more article' button.
- https://colour-of-money.co.uk/articles/2022/triodos-bank-discloses-intermediate-targets-in-view-of-reaching-net-zero-by-2035, the plus icon in the 'Show 4 comments' button.
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.
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.
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.
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.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:
- Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
- Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.
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 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)
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 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.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 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, 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 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.
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.
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.
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.
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.
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.
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.
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 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)
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 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.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:
- The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
- The content is implemented using technologies with support for identifying the expected meaning for form input data.
Information about success criterion 1.3.5 Identify Input Purpose
Outcome: Failed
Findings: 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)
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 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.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:
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Information about success criterion 1.4.3 Contrast (Minimum)
Outcome: Failed
Findings: 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.
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.
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;
- https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future. Among others, the text 'Taking a rural holiday park off-grid in West Wales' has too low contrast.
- https://colour-of-money.co.uk/articles/2022/triodos-bank-discloses-intermediate-targets-in-view-of-reaching-net-zero-by-2035. Among others, the text 'Organic, sustainable, regenerative, or circular agriculture?' has too low contrast.
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.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:
- Customizable: The image of text can be visually customized to the user's requirements;
- Essential: A particular presentation of text is essential to the information being conveyed.
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:
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels;
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 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)
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
- User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
- Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
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 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.
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.
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.
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:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
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:
- Dismissable: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
- Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
- Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
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 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.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:
- Turn off: A mechanism is available to turn the shortcut off;
- Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc);
- Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.
Information about success criterion 2.1.4 Character Key Shortcuts
Outcome: Failed
Findings: 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.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:
- Turn off: The user is allowed to turn off the time limit before encountering it; or
- Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or
- Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or
- Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or
- Essential Exception: The time limit is essential and extending it would invalidate the activity; or
- 20 Hour Exception: The time limit is longer than 20 hours.
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:
- Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
- Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
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 Navigable
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 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)
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 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)
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 https://colour-of-money.co.uk/privacy-and-cookie-policy and https://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 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).
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.
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.
2.4.4 Link Purpose (In Context) (Level A)
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 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.
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.
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.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 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)
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:
- https://colour-of-money.co.uk/privacy-and-cookie-policy, on the items in the sub navigation, among others.
- https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future, when focus is placed on the buttons under the text '11 November 2022'.
- https://colour-of-money.co.uk/sustainable-inspiration. Among others, when focus is placed on the article links.
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:
- No Down-Event: The down-event of the pointer is not used to execute any part of the function;
- Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;
- Up Reversal: The up-event reverses any outcome of the preceding down-event;
- Essential: Completing the function on the down-event is essential.
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:
- Supported Interface: The motion is used to operate functionality through an accessibility supported interface;
- Essential: The motion is essential for the function and doing so would invalidate the activity.
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 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.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 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.
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
3.3.4 Error Prevention (Legal, Financial, Data) (Level AA)
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:
- Reversible: Submissions are reversible.
- Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
- 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 https://colour-of-money.co.uk/sustainable-inspiration and https://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 https://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;
- https://colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021, with the ids 'accordion-button-1' and 'accordion-content-1'.
- https://colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022, with the ids 'accordion-button-1' and 'accordion-content-1'.
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)
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;
- https://colour-of-money.co.uk/privacy-and-cookie-policy, the buttons that are hidden beneath the collapsible buttons (accordions) on the page. For example, under the collapsible button 'What personal data will Triodos use?'.
- https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future. Among others, the next and previous buttons in the image slider.
- https://colour-of-money.co.uk/articles/2022/the-need-for-a-paradigm-shift-in-urban-planning, the button labelled with a heart icon.
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 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'.
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.
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;
- https://colour-of-money.co.uk/energy-and-climate
- https://colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022
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.
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 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
- https://colour-of-money.co.uk/
- https://colour-of-money.co.uk/privacy-and-cookie-policy
- https://colour-of-money.co.uk/articles/2022/homes-with-a-community-in-mind---climate-positive-houses-providing-a-model-for-the-future
- https://colour-of-money.co.uk/articles/2021/five-moments-to-remember-from-the-annual-meeting-2021
- https://colour-of-money.co.uk/articles/2022/triodos-global-equities-impact-fund-investor-update-q3-2022
- https://colour-of-money.co.uk/energy-and-climate
- https://colour-of-money.co.uk/sustainable-inspiration
- https://colour-of-money.co.uk/impact-investing
- https://colour-of-money.co.uk/articles/2022/triodos-bank-discloses-intermediate-targets-in-view-of-reaching-net-zero-by-2035
- 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
- https://colour-of-money.co.uk/blog-alert
- https://colour-of-money.co.uk/search-results?q=Investing
- https://colour-of-money.co.uk/articles/2022/the-need-for-a-paradigm-shift-in-urban-planning
- https://colour-of-money.co.uk/articles/2022/investing-in-a-future-fit-energy-system
Relied upon techniques
Web browsers (User Agents) and other software
The following software was used in this evaluation:- Chrome
- Firefox
- NVDA 2022.3
- Adobe Acrobat Pro
Resources:
-
Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
www.w3.org/WAI/eval/conformance -
Web Content Accessibility Guidelines (WCAG)
www.w3.org/WAI/intro/wcag -
How to Meet WCAG 2.1 Quick Reference
www.w3.org/WAI/WCAG21/quickref/
This report is mainly created with the online W3C report tool.