AXE Accessibility Results for ./public/a11y/dopper-com/2024-10-15-17 project

Page URL: https://www.dopper.com/nl/mission/story
axe-core found 28 violations
# Description Axe rule ID WCAG Impact Count
1 Buttons must have discernible text button-name WCAG 2 Level A, WCAG 4.1.2 critical 1
2 Headings should not be empty empty-heading Best practice minor 5
3 Ensures landmarks are unique landmark-unique Best practice moderate 1
4 Links must have discernible text link-name WCAG 2 Level A, WCAG 2.4.4, WCAG 4.1.2 serious 1
5 Zooming and scaling must not be disabled meta-viewport WCAG 2 Level AA, WCAG 1.4.4 critical 1
6 Interactive controls must not be nested nested-interactive WCAG 2 Level A, WCAG 4.1.2 serious 2
7 All page content should be contained by landmarks region Best practice moderate 17

Failed

1. Buttons must have discernible text
Learn more
button-name
WCAG 2 Level A, WCAG 4.1.2

Ensures buttons have discernible text

critical
Issue Tags: cat.name-role-value wcag2a wcag412 section508 section508.22.a TTv5 TT6.a EN-301-549 EN-9.4.1.2 ACT
# Issue Description To solve this violation, you need to...
1

Element location

dopper-footer,button[type="submit"]

Element source

<button type="submit">

Fix any of the following:

  • Element does not have inner text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
  • Element's default semantics were not overridden with role="none" or role="presentation"
2. Headings should not be empty
Learn more
empty-heading
Best practice

Ensures headings have discernible text

minor
Issue Tags: cat.name-role-value best-practice
# Issue Description To solve this violation, you need to...
1

Element location

.WithBubbles_headingBottom__Bjh7M

Element source

<h1 class="SplitText_text__Ko6zu WithBubbles_heading__Q2ylG h1 WithBubbles_headingBottom__Bjh7M SplitText_visible__nn6S9">

Fix any of the following:

  • Element does not have text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
2

Element location

h2

Element source

<h2 class="SplitText_text__Ko6zu h2-l">

Fix any of the following:

  • Element does not have text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
3

Element location

.framedMediaAndCopy_copyWrapper__KWkw2 > .h2-l.SplitText_text__Ko6zu

Element source

<h3 class="SplitText_text__Ko6zu h2-l">

Fix any of the following:

  • Element does not have text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
4

Element location

#\38 aba7d5d-1787-4b16-ad03-e8b46238cf77-ContentModule > .copyAndFramedMedia_wrapper__iXhwf > .copyAndFramedMedia_container__iM_yE > .copyAndFramedMedia_contentWrapper__s0gvm > .copyAndFramedMedia_copyWrapper__x_etA > .h2-l.SplitText_text__Ko6zu

Element source

<h3 class="SplitText_text__Ko6zu h2-l">

Fix any of the following:

  • Element does not have text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
5

Element location

.mediaAndFramedCopy_copyWrapper__Wv8TR > .h2-l.SplitText_text__Ko6zu

Element source

<h3 class="SplitText_text__Ko6zu h2-l">

Fix any of the following:

  • Element does not have text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
3. Ensures landmarks are unique
Learn more
landmark-unique
Best practice

Landmarks should have a unique role or role/label/title (i.e. accessible name) combination

moderate
Issue Tags: cat.semantics best-practice
# Issue Description To solve this violation, you need to...
1

Element location

dopper-navigation,.dopper-nav

Element source

<nav class="dopper-nav">

Fix any of the following:

  • The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable

Related node:

dopper-navigation,.sub-menu-wrapper
dopper-footer,.nav-primary
4. Links must have discernible text
Learn more
link-name
WCAG 2 Level A, WCAG 2.4.4, WCAG 4.1.2

Ensures links have discernible text

serious
Issue Tags: cat.name-role-value wcag2a wcag244 wcag412 section508 section508.22.a TTv5 TT6.a EN-301-549 EN-9.2.4.4 EN-9.4.1.2 ACT
# Issue Description To solve this violation, you need to...
1

Element location

dopper-navigation,.logo__wrapper

Element source

<a class="logo__wrapper" href="/nl/" data-linktype="other" is="dopper-next-link">

Fix all of the following:

  • Element is in tab order and does not have accessible text

Fix any of the following:

  • Element does not have text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
5. Zooming and scaling must not be disabled
Learn more
meta-viewport
WCAG 2 Level AA, WCAG 1.4.4

Ensures <meta name="viewport"> does not disable text scaling and zooming

critical
Issue Tags: cat.sensory-and-visual-cues wcag2aa wcag144 EN-301-549 EN-9.1.4.4 ACT
# Issue Description To solve this violation, you need to...
1

Element location

meta[name="viewport"]

Element source

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Fix any of the following:

  • maximum-scale on <meta> tag disables zooming on mobile devices
6. Interactive controls must not be nested
Learn more
nested-interactive
WCAG 2 Level A, WCAG 4.1.2

Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies

serious
Issue Tags: cat.keyboard wcag2a wcag412 TTv5 TT6.a EN-301-549 EN-9.4.1.2
# Issue Description To solve this violation, you need to...
1

Element location

.copyAndFramedMedia_ctaWrapper__6qOHG > button[type="button"]

Element source

<button type="button">

Fix any of the following:

  • Element has focusable descendants

Related node:

a[href$="pledge"]
2

Element location

.mediaAndFramedCopy_ctaWrapper__sUaGM > button[type="button"]

Element source

<button type="button">

Fix any of the following:

  • Element has focusable descendants

Related node:

a[href$="sustainability"]
7. All page content should be contained by landmarks
Learn more
region
Best practice

Ensures all page content is contained by landmarks

moderate
Issue Tags: cat.keyboard best-practice
# Issue Description To solve this violation, you need to...
1

Element location

.WithBubbles_mediaWrapper__ZZ1GA

Element source

<div class="WithBubbles_mediaWrapper__ZZ1GA">

Fix any of the following:

  • Some page content is not contained by landmarks
2

Element location

#e40afa84-7c8d-4243-a1e6-3d0ef40c7354-ContentModule > .copyAndFramedMedia_wrapper__iXhwf > .copyAndFramedMedia_container__iM_yE > .copyAndFramedMedia_contentWrapper__s0gvm > .copyAndFramedMedia_copyWrapper__x_etA > .body:nth-child(2)

Element source

<p class="body">Water is de levensader van onze planeet. Wij geloven dat het niet verpakt, geplastificeerd en gelabeld hoort te worden.</p>

Fix any of the following:

  • Some page content is not contained by landmarks
3

Element location

#e40afa84-7c8d-4243-a1e6-3d0ef40c7354-ContentModule > .copyAndFramedMedia_wrapper__iXhwf > .copyAndFramedMedia_container__iM_yE > .copyAndFramedMedia_contentWrapper__s0gvm > .copyAndFramedMedia_copyWrapper__x_etA > .body:nth-child(3)

Element source

<p class="body">Niet zinloos vervoerd. Van hot naar her, van hier naar daar.</p>

Fix any of the following:

  • Some page content is not contained by landmarks
4

Element location

.body:nth-child(4)

Element source

<p class="body">Het zou niet geïmporteerd, geëxporteerd of belast moeten worden. Het zou niet schaars moeten zijn. Niet gemonopoliseerd.</p>

Fix any of the following:

  • Some page content is not contained by landmarks
5

Element location

.body:nth-child(5)

Element source

<p class="body">Het zou niet gecommercialiseerd moeten worden. Niet verkocht. Het mag jou en ons niets kosten.</p>

Fix any of the following:

  • Some page content is not contained by landmarks
6

Element location

.body:nth-child(6)

Element source

<p class="body">Maar dat doet het wel. Water wordt zozeer verpest dat we er niet meer mee kunnen doen waarvoor het bedoeld is: Drinken, uit de kraan.</p>

Fix any of the following:

  • Some page content is not contained by landmarks
7

Element location

#e40afa84-7c8d-4243-a1e6-3d0ef40c7354-ContentModule > .copyAndFramedMedia_wrapper__iXhwf > .copyAndFramedMedia_container__iM_yE > .copyAndFramedMedia_mediaWrapper__jSPPs

Element source

<div class="copyAndFramedMedia_mediaWrapper__jSPPs">

Fix any of the following:

  • Some page content is not contained by landmarks
8

Element location

.framedMediaAndCopy_mediaWrapper__tdPwp

Element source

<div class="framedMediaAndCopy_mediaWrapper__tdPwp">

Fix any of the following:

  • Some page content is not contained by landmarks
9

Element location

.framedMediaAndCopy_copyWrapper__KWkw2 > .body:nth-child(2)

Element source

<p class="body">Onze oprichter, Merijn Everaarts, had er genoeg van al die wegwerpwaterflesjes in de zee te zien drijven. Hij wilde iedereen een alternatief bieden voor wegwerpplastic. En zo werd in 2010 de eerste Dopper-fles geboren.</p>

Fix any of the following:

  • Some page content is not contained by landmarks
10

Element location

.framedMediaAndCopy_copyWrapper__KWkw2 > .body:nth-child(3)

Element source

<p class="body">Sindsdien ontwikkelen we voortdurend nieuwe oplossingen om een einde te maken aan verpakt water en mensen kraanwater te laten drinken.</p>

Fix any of the following:

  • Some page content is not contained by landmarks
11

Element location

#\38 aba7d5d-1787-4b16-ad03-e8b46238cf77-ContentModule > .copyAndFramedMedia_wrapper__iXhwf > .copyAndFramedMedia_container__iM_yE > .copyAndFramedMedia_contentWrapper__s0gvm > .copyAndFramedMedia_copyWrapper__x_etA > .body:nth-child(2)

Element source

<p class="body">Zo'n groot doel bereik je niet door één persoon te veranderen, maar door het hele systeem te veranderen.</p>

Fix any of the following:

  • Some page content is not contained by landmarks
12

Element location

#\38 aba7d5d-1787-4b16-ad03-e8b46238cf77-ContentModule > .copyAndFramedMedia_wrapper__iXhwf > .copyAndFramedMedia_container__iM_yE > .copyAndFramedMedia_contentWrapper__s0gvm > .copyAndFramedMedia_copyWrapper__x_etA > .body:nth-child(3)

Element source

<p class="body">Daarom moedigen we iedereen aan om hun hervulbare fles mee te nemen en bij te vullen, vragen we bedrijven om kraanwater aan te bieden en te promoten, en lobbyen we bij overheden om kraanwater veilig en toegankelijk te maken voor iedereen.</p>

Fix any of the following:

  • Some page content is not contained by landmarks
13

Element location

a[rel="noreferrer"]

Element source

<a class="link_link__JtDHX link_background__vwwg3 link_buttonSecondary__uW_lP" href="https://25209588.fs1.hubspotusercontent-eu1.net/hubfs/25209588/Theory-of-Change_Dopper-Copyright-Digital.jpg" target="_blank" rel="noreferrer" style="--background:#000f2e;--color:var(--sand)">

Fix any of the following:

  • Some page content is not contained by landmarks
14

Element location

#\38 aba7d5d-1787-4b16-ad03-e8b46238cf77-ContentModule > .copyAndFramedMedia_wrapper__iXhwf > .copyAndFramedMedia_container__iM_yE > .copyAndFramedMedia_mediaWrapper__jSPPs

Element source

<div class="copyAndFramedMedia_mediaWrapper__jSPPs">

Fix any of the following:

  • Some page content is not contained by landmarks
15

Element location

.mediaAndFramedCopy_mediaWrapper__wYcJ5

Element source

<div class="mediaAndFramedCopy_mediaWrapper__wYcJ5">

Fix any of the following:

  • Some page content is not contained by landmarks
16

Element location

.body-s

Element source

<p class="body-s">

Fix any of the following:

  • Some page content is not contained by landmarks
17

Element location

.link_buttonSecondary__uW_lP.link_link__JtDHX[href$="reports-2023"]

Element source

<a class="link_link__JtDHX link_background__vwwg3 link_buttonSecondary__uW_lP" style="--background:#000f2e;--color:var(--sand)" href="/nl/mission/reports-2023">Lees ons Impact Report</a>

Fix any of the following:

  • Some page content is not contained by landmarks
# Description Axe rule ID WCAG Nodes passed check
1 Elements must only use supported ARIA attributes aria-allowed-attr WCAG 2 Level A, WCAG 4.1.2 1
2 ARIA role should be appropriate for the element aria-allowed-role Best practice 1
3 ARIA attributes must be used as specified for the element's role aria-conditional-attr WCAG 2 Level A, WCAG 4.1.2 1
4 Deprecated ARIA roles must not be used aria-deprecated-role WCAG 2 Level A, WCAG 4.1.2 1
5 aria-hidden="true" must not be present on the document body aria-hidden-body WCAG 2 Level A, WCAG 4.1.2 1
6 ARIA hidden element must not be focusable or contain focusable elements aria-hidden-focus WCAG 2 Level A, WCAG 4.1.2 1
7 Elements must only use permitted ARIA attributes aria-prohibited-attr WCAG 2 Level A, WCAG 4.1.2 1
8 Required ARIA attributes must be provided aria-required-attr WCAG 2 Level A, WCAG 4.1.2 1
9 ARIA roles used must conform to valid values aria-roles WCAG 2 Level A, WCAG 4.1.2 1
10 ARIA attributes must conform to valid values aria-valid-attr-value WCAG 2 Level A, WCAG 4.1.2 1
11 ARIA attributes must conform to valid names aria-valid-attr WCAG 2 Level A, WCAG 4.1.2 1
12 Buttons must have discernible text button-name WCAG 2 Level A, WCAG 4.1.2 1
13 Page must have means to bypass repeated blocks bypass WCAG 2 Level A, WCAG 2.4.1 1
14 Documents must have <title> element to aid in navigation document-title WCAG 2 Level A, WCAG 2.4.2 1
15 Headings should not be empty empty-heading Best practice 1
16 Form field must not have multiple label elements form-field-multiple-labels WCAG 2 Level A, WCAG 3.3.2 1
17 Heading levels should only increase by one heading-order Best practice 1
18 <html> element must have a lang attribute html-has-lang WCAG 2 Level A, WCAG 3.1.1 1
19 <html> element must have a valid value for the lang attribute html-lang-valid WCAG 2 Level A, WCAG 3.1.1 1
20 Images must have alternate text image-alt WCAG 2 Level A, WCAG 1.1.1 1
21 Alternative text of images should not be repeated as text image-redundant-alt Best practice 1
22 Form elements should have a visible label label-title-only Best practice 1
23 Form elements must have labels label WCAG 2 Level A, WCAG 4.1.2 1
24 Aside should not be contained in another landmark landmark-complementary-is-top-level Best practice 1
25 Contentinfo landmark should not be contained in another landmark landmark-contentinfo-is-top-level Best practice 1
26 Document should not have more than one contentinfo landmark landmark-no-duplicate-contentinfo Best practice 1
27 Document should have one main landmark landmark-one-main Best practice 1
28 Ensures landmarks are unique landmark-unique Best practice 1
29 Links must have discernible text link-name WCAG 2 Level A, WCAG 2.4.4, WCAG 4.1.2 1
30 Users should be able to zoom and scale the text up to 500% meta-viewport-large Best practice 1
31 Interactive controls must not be nested nested-interactive WCAG 2 Level A, WCAG 4.1.2 1
32 Page should contain a level-one heading page-has-heading-one Best practice 1
33 All page content should be contained by landmarks region Best practice 1
34 Scrollable region must have keyboard access scrollable-region-focusable WCAG 2 Level A, WCAG 2.1.1 1

What 'incomplete' axe checks means?

Incomplete results were aborted and require further testing. This can happen either because of technical restrictions to what the rule can test, or because a javascript error occurred.

Visit axe API Documentation to learn more.

What 'inapplicable' axe checks means?

The inapplicable array lists all the rules for which no matching elements were found on the page.

Visit axe API Documentation to learn more.

# Description Axe rule ID WCAG
1 accesskey attribute value should be unique accesskeys Best practice
2 Active <area> elements must have alternate text area-alt WCAG 2 Level A, WCAG 2.4.4, WCAG 4.1.2
3 aria-braille attributes must have a non-braille equivalent aria-braille-equivalent WCAG 2 Level A, WCAG 4.1.2
4 ARIA commands must have an accessible name aria-command-name WCAG 2 Level A, WCAG 4.1.2
5 ARIA dialog and alertdialog nodes should have an accessible name aria-dialog-name Best practice
6 ARIA input fields must have an accessible name aria-input-field-name WCAG 2 Level A, WCAG 4.1.2
7 ARIA meter nodes must have an accessible name aria-meter-name WCAG 2 Level A, WCAG 1.1.1
8 ARIA progressbar nodes must have an accessible name aria-progressbar-name WCAG 2 Level A, WCAG 1.1.1
9 Certain ARIA roles must contain particular children aria-required-children WCAG 2 Level A, WCAG 1.3.1
10 Certain ARIA roles must be contained by particular parents aria-required-parent WCAG 2 Level A, WCAG 1.3.1
11 aria-roledescription must be on elements with a semantic role aria-roledescription WCAG 2 Level A, WCAG 4.1.2
12 "role=text" should have no focusable descendants aria-text Best practice
13 ARIA toggle fields must have an accessible name aria-toggle-field-name WCAG 2 Level A, WCAG 4.1.2
14 ARIA tooltip nodes must have an accessible name aria-tooltip-name WCAG 2 Level A, WCAG 4.1.2
15 ARIA treeitem nodes should have an accessible name aria-treeitem-name Best practice
16 <audio> elements must have a captions track audio-caption WCAG 2 Level A, WCAG 1.2.1
17 <blink> elements are deprecated and must not be used blink WCAG 2 Level A, WCAG 2.2.2
18 <dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements definition-list WCAG 2 Level A, WCAG 1.3.1
19 <dt> and <dd> elements must be contained by a <dl> dlitem WCAG 2 Level A, WCAG 1.3.1
20 IDs used in ARIA and labels must be unique duplicate-id-aria WCAG 2 Level A, WCAG 4.1.2
21 Table header text should not be empty empty-table-header Best practice
22 Frames with focusable content must not have tabindex=-1 frame-focusable-content WCAG 2 Level A, WCAG 2.1.1
23 Frames should be tested with axe-core frame-tested Best practice
24 Frames must have a unique title attribute frame-title-unique WCAG 2 Level A, WCAG 4.1.2
25 Frames must have an accessible name frame-title WCAG 2 Level A, WCAG 4.1.2
26 HTML elements with lang and xml:lang must have the same base language html-xml-lang-mismatch WCAG 2 Level A, WCAG 3.1.1
27 Input buttons must have discernible text input-button-name WCAG 2 Level A, WCAG 4.1.2
28 Image buttons must have alternate text input-image-alt WCAG 2 Level A, WCAG 1.1.1, WCAG 4.1.2
29 Banner landmark should not be contained in another landmark landmark-banner-is-top-level Best practice
30 Main landmark should not be contained in another landmark landmark-main-is-top-level Best practice
31 Document should not have more than one banner landmark landmark-no-duplicate-banner Best practice
32 Document should not have more than one main landmark landmark-no-duplicate-main Best practice
33 Links must be distinguishable without relying on color link-in-text-block WCAG 2 Level A, WCAG 1.4.1
34 <ul> and <ol> must only directly contain <li>, <script> or <template> elements list WCAG 2 Level A, WCAG 1.3.1
35 <li> elements must be contained in a <ul> or <ol> listitem WCAG 2 Level A, WCAG 1.3.1
36 <marquee> elements are deprecated and must not be used marquee WCAG 2 Level A, WCAG 2.2.2
37 Delayed refresh under 20 hours must not be used meta-refresh WCAG 2 Level A, WCAG 2.2.1
38 <object> elements must have alternate text object-alt WCAG 2 Level A, WCAG 1.1.1
39 Ensure elements marked as presentational are consistently ignored presentation-role-conflict Best practice
40 [role="img"] elements must have an alternative text role-img-alt WCAG 2 Level A, WCAG 1.1.1
41 scope attribute should be used correctly scope-attr-valid Best practice
42 Select element must have an accessible name select-name WCAG 2 Level A, WCAG 4.1.2
43 Server-side image maps must not be used server-side-image-map WCAG 2 Level A, WCAG 2.1.1
44 The skip-link target should exist and be focusable skip-link Best practice
45 <svg> elements with an img role must have an alternative text svg-img-alt WCAG 2 Level A, WCAG 1.1.1
46 Elements should not have tabindex greater than zero tabindex Best practice
47 tables should not have the same summary and caption table-duplicate-name Best practice
48 Table cells that use the headers attribute must only refer to cells in the same table td-headers-attr WCAG 2 Level A, WCAG 1.3.1
49 Table headers in a data table must refer to data cells th-has-data-cells WCAG 2 Level A, WCAG 1.3.1
50 lang attribute must have a valid value valid-lang WCAG 2 Level AA, WCAG 3.1.2
51 <video> elements must have captions video-caption WCAG 2 Level A, WCAG 1.2.2
52 <video> or <audio> elements must not play automatically no-autoplay-audio WCAG 2 Level A, WCAG 1.4.2
# Rule ID Enabled
1 color-contrast false