AXE Accessibility Results for ./public/a11y/ben-nl/2024-10-15-19 project

Page URL: https://www.ben.nl/inloggen
axe-core found 8 violations
# Description Axe rule ID WCAG Impact Count
1 Ensures landmarks are unique landmark-unique Best practice moderate 2
2 Links must have discernible text link-name WCAG 2 Level A, WCAG 2.4.4, WCAG 4.1.2 serious 5
3 All page content should be contained by landmarks region Best practice moderate 1

Failed

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

.navbar

Element source

<nav class="navbar navbar-expand-xl navbar-light bg-light">

Fix any of the following:

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

Related node:

nav[arial-label="Service menu"]
2

Element location

.col-xl-3.col-12:nth-child(1) > .d-xl-flex.d-none.flex-grow-1 > nav[aria-label="Subcategories menu"]

Element source

<nav aria-label="Subcategories menu">

Fix any of the following:

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

Related node:

.col-xl-3.col-12:nth-child(2) > .d-xl-flex.d-none.flex-grow-1 > nav[aria-label="Subcategories menu"]
.col-xl-3.col-12:nth-child(3) > .d-xl-flex.d-none.flex-grow-1 > nav[aria-label="Subcategories menu"]
.col-xl-3.col-12:nth-child(4) > .d-xl-flex.d-none.flex-grow-1 > nav[aria-label="Subcategories menu"]
2. 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

.navbar-brand

Element source

<a class="navbar-brand" href="/">

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
2

Element location

.justify-content-center > li:nth-child(1) > a

Element source

<a href="https://www.facebook.com/groetenvanBen"> <span id="block-ben-redesign-social-links" class="icon icon-facebook text-white cursor-pointer me-5 fs-2"></span> </a>

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
3

Element location

a[href$="benwebcare"]

Element source

<a href="https://twitter.com/benwebcare"> <span class="icon icon-twitter text-white cursor-pointer me-5 fs-2"></span> </a>

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
4

Element location

.justify-content-center > li:nth-child(3) > a

Element source

<a href="https://www.instagram.com/groetenvanben/"> <span class="icon icon-instagram text-white cursor-pointer me-5 fs-2"></span> </a>

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

Element location

.justify-content-center > li:nth-child(4) > a

Element source

<a href="https://www.youtube.com/channel/UCCj8UzZ9CLE9ZkMMb0TJdhQ"> <span class="icon icon-youtube text-white cursor-pointer me-5 fs-2"></span> </a>

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

.focusable

Element source

<a href="#main-content" class="visually-hidden focusable"> Overslaan en naar de inhoud gaan </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 dialog and alertdialog nodes should have an accessible name aria-dialog-name Best practice 1
6 aria-hidden="true" must not be present on the document body aria-hidden-body WCAG 2 Level A, WCAG 4.1.2 1
7 ARIA hidden element must not be focusable or contain focusable elements aria-hidden-focus WCAG 2 Level A, WCAG 4.1.2 1
8 Elements must only use permitted ARIA attributes aria-prohibited-attr WCAG 2 Level A, WCAG 4.1.2 1
9 Required ARIA attributes must be provided aria-required-attr WCAG 2 Level A, WCAG 4.1.2 1
10 ARIA roles used must conform to valid values aria-roles WCAG 2 Level A, WCAG 4.1.2 1
11 ARIA attributes must conform to valid values aria-valid-attr-value WCAG 2 Level A, WCAG 4.1.2 1
12 ARIA attributes must conform to valid names aria-valid-attr WCAG 2 Level A, WCAG 4.1.2 1
13 Buttons must have discernible text button-name WCAG 2 Level A, WCAG 4.1.2 1
14 Page must have means to bypass repeated blocks bypass WCAG 2 Level A, WCAG 2.4.1 1
15 Documents must have <title> element to aid in navigation document-title WCAG 2 Level A, WCAG 2.4.2 1
16 IDs used in ARIA and labels must be unique duplicate-id-aria WCAG 2 Level A, WCAG 4.1.2 1
17 Headings should not be empty empty-heading Best practice 1
18 Form field must not have multiple label elements form-field-multiple-labels WCAG 2 Level A, WCAG 3.3.2 1
19 Frames must have a unique title attribute frame-title-unique WCAG 2 Level A, WCAG 4.1.2 1
20 Frames must have an accessible name frame-title WCAG 2 Level A, WCAG 4.1.2 1
21 Heading levels should only increase by one heading-order Best practice 1
22 <html> element must have a lang attribute html-has-lang WCAG 2 Level A, WCAG 3.1.1 1
23 <html> element must have a valid value for the lang attribute html-lang-valid WCAG 2 Level A, WCAG 3.1.1 1
24 Images must have alternate text image-alt WCAG 2 Level A, WCAG 1.1.1 1
25 Alternative text of images should not be repeated as text image-redundant-alt Best practice 1
26 Form elements should have a visible label label-title-only Best practice 1
27 Form elements must have labels label WCAG 2 Level A, WCAG 4.1.2 1
28 Banner landmark should not be contained in another landmark landmark-banner-is-top-level Best practice 1
29 Contentinfo landmark should not be contained in another landmark landmark-contentinfo-is-top-level Best practice 1
30 Main landmark should not be contained in another landmark landmark-main-is-top-level Best practice 1
31 Document should not have more than one banner landmark landmark-no-duplicate-banner Best practice 1
32 Document should not have more than one contentinfo landmark landmark-no-duplicate-contentinfo Best practice 1
33 Document should not have more than one main landmark landmark-no-duplicate-main Best practice 1
34 Document should have one main landmark landmark-one-main Best practice 1
35 Ensures landmarks are unique landmark-unique Best practice 1
36 Links must be distinguishable without relying on color link-in-text-block WCAG 2 Level A, WCAG 1.4.1 1
37 Links must have discernible text link-name WCAG 2 Level A, WCAG 2.4.4, WCAG 4.1.2 1
38 <ul> and <ol> must only directly contain <li>, <script> or <template> elements list WCAG 2 Level A, WCAG 1.3.1 1
39 <li> elements must be contained in a <ul> or <ol> listitem WCAG 2 Level A, WCAG 1.3.1 1
40 Users should be able to zoom and scale the text up to 500% meta-viewport-large Best practice 1
41 Zooming and scaling must not be disabled meta-viewport WCAG 2 Level AA, WCAG 1.4.4 1
42 Interactive controls must not be nested nested-interactive WCAG 2 Level A, WCAG 4.1.2 1
43 Page should contain a level-one heading page-has-heading-one Best practice 1
44 Ensure elements marked as presentational are consistently ignored presentation-role-conflict Best practice 1
45 All page content should be contained by landmarks region Best practice 1
46 Elements should not have tabindex greater than zero tabindex Best practice 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.

# Description Axe rule ID WCAG Nodes with incomplete check
1 IDs used in ARIA and labels must be unique duplicate-id-aria WCAG 2 Level A, WCAG 4.1.2 1
2 Frames should be tested with axe-core frame-tested Best practice 1

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 input fields must have an accessible name aria-input-field-name WCAG 2 Level A, WCAG 4.1.2
6 ARIA meter nodes must have an accessible name aria-meter-name WCAG 2 Level A, WCAG 1.1.1
7 ARIA progressbar nodes must have an accessible name aria-progressbar-name WCAG 2 Level A, WCAG 1.1.1
8 Certain ARIA roles must contain particular children aria-required-children WCAG 2 Level A, WCAG 1.3.1
9 Certain ARIA roles must be contained by particular parents aria-required-parent WCAG 2 Level A, WCAG 1.3.1
10 aria-roledescription must be on elements with a semantic role aria-roledescription WCAG 2 Level A, WCAG 4.1.2
11 "role=text" should have no focusable descendants aria-text Best practice
12 ARIA toggle fields must have an accessible name aria-toggle-field-name WCAG 2 Level A, WCAG 4.1.2
13 ARIA tooltip nodes must have an accessible name aria-tooltip-name WCAG 2 Level A, WCAG 4.1.2
14 ARIA treeitem nodes should have an accessible name aria-treeitem-name Best practice
15 <audio> elements must have a captions track audio-caption WCAG 2 Level A, WCAG 1.2.1
16 <blink> elements are deprecated and must not be used blink WCAG 2 Level A, WCAG 2.2.2
17 <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
18 <dt> and <dd> elements must be contained by a <dl> dlitem WCAG 2 Level A, WCAG 1.3.1
19 Table header text should not be empty empty-table-header Best practice
20 Frames with focusable content must not have tabindex=-1 frame-focusable-content WCAG 2 Level A, WCAG 2.1.1
21 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
22 Input buttons must have discernible text input-button-name WCAG 2 Level A, WCAG 4.1.2
23 Image buttons must have alternate text input-image-alt WCAG 2 Level A, WCAG 1.1.1, WCAG 4.1.2
24 Aside should not be contained in another landmark landmark-complementary-is-top-level Best practice
25 <marquee> elements are deprecated and must not be used marquee WCAG 2 Level A, WCAG 2.2.2
26 Delayed refresh under 20 hours must not be used meta-refresh WCAG 2 Level A, WCAG 2.2.1
27 <object> elements must have alternate text object-alt WCAG 2 Level A, WCAG 1.1.1
28 [role="img"] elements must have an alternative text role-img-alt WCAG 2 Level A, WCAG 1.1.1
29 scope attribute should be used correctly scope-attr-valid Best practice
30 Scrollable region must have keyboard access scrollable-region-focusable WCAG 2 Level A, WCAG 2.1.1
31 Select element must have an accessible name select-name WCAG 2 Level A, WCAG 4.1.2
32 Server-side image maps must not be used server-side-image-map WCAG 2 Level A, WCAG 2.1.1
33 The skip-link target should exist and be focusable skip-link Best practice
34 <svg> elements with an img role must have an alternative text svg-img-alt WCAG 2 Level A, WCAG 1.1.1
35 tables should not have the same summary and caption table-duplicate-name Best practice
36 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
37 Table headers in a data table must refer to data cells th-has-data-cells WCAG 2 Level A, WCAG 1.3.1
38 lang attribute must have a valid value valid-lang WCAG 2 Level AA, WCAG 3.1.2
39 <video> elements must have captions video-caption WCAG 2 Level A, WCAG 1.2.2
40 <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