WCAG Audit Detail

MNB Logo

Page: Contact Form

Page URL: https://www.example.com/contact-form.html
Back to Overview
Found violations: 18
# Impact Count Description Type WCAG Further Description
1 2 - serious 15 Elements must meet minimum color contrast ratio thresholds Automatic WCAG 2 Level AA, WCAG 1.4.3 Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
2 2 - serious 1 Links must have discernible text Automatic WCAG 2 Level A, WCAG 2.4.4, WCAG 4.1.2 Ensures links have discernible text
3 3 - moderate 1 Ensures landmarks are unique Automatic Best practice Landmarks should have a unique role or role/label/title (i.e. accessible name) combination
4 3 - moderate 1 Page should contain a level-one heading Automatic Best practice Ensure that the page, or at least one of its frames contains a level-one heading

Failed

1. Elements must meet minimum color contrast ratio thresholds
Learn more
color-contrast
WCAG 2 Level AA, WCAG 1.4.3

Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

serious
Issue Tags: cat.color wcag2aa wcag143 TTv5 TT13.c EN-301-549 EN-9.1.4.3 ACT
# Issue Description To solve this violation, you need to...
1

Element location

.contact-link > span

Element source

<span>Kontakt</span>

Fix any of the following:

  • Element has insufficient color contrast of 2.77 (foreground color: #9b9b9b, background color: #ffffff, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

header
2

Element location

.search-link > span

Element source

<span>Suche</span>

Fix any of the following:

  • Element has insufficient color contrast of 2.77 (foreground color: #9b9b9b, background color: #ffffff, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

header
3

Element location

.portal-link > span

Element source

<span>Unsere Portale / Login</span>

Fix any of the following:

  • Element has insufficient color contrast of 2.39 (foreground color: #9b9b9b, background color: #eeeeee, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

.portal-link
4

Element location

.breadcrumb-navigation__item:nth-child(3) > span

Element source

<span>Kontaktformular</span>

Fix any of the following:

  • Element has insufficient color contrast of 2.19 (foreground color: #f59b00, background color: #ffffff, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

body
5

Element location

a[title="Aktuelles"] > span

Element source

<span>Aktuelles</span>

Fix any of the following:

  • Element has insufficient color contrast of 2.19 (foreground color: #ffffff, background color: #f59b00, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

a[title="Aktuelles"]
6

Element location

.button.button--v0[title="Kontakt"] > span

Element source

<span>Kontakt</span>

Fix any of the following:

  • Element has insufficient color contrast of 2.19 (foreground color: #ffffff, background color: #f59b00, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

.button.button--v0[title="Kontakt"]
7

Element location

a[title="So finden Sie uns"] > span

Element source

<span>So finden Sie uns</span>

Fix any of the following:

  • Element has insufficient color contrast of 2.19 (foreground color: #ffffff, background color: #f59b00, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

a[title="So finden Sie uns"]
8

Element location

a[title="Unsere Portale"]

Element source

<a class="link--v2" href="https://www.example.com/de/onlineportale.html" target="_blank" title="Unsere Portale">Unsere Portale</a>

Fix any of the following:

  • Element has insufficient color contrast of 4.3 (foreground color: #716d69, background color: #ecebea, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

.footer-navigation-wrapper
9

Element location

a[title="Neuigkeiten"]

Element source

<a class="link--v2" href="https://www.example.com/de/news.html" target="_self" title="Neuigkeiten">Neuigkeiten</a>

Fix any of the following:

  • Element has insufficient color contrast of 4.3 (foreground color: #716d69, background color: #ecebea, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

.footer-navigation-wrapper
10

Element location

.link--v2[title="Karriere"][target="_blank"]

Element source

<a class="link--v2" href="https://www.example.com/de/karriere.html" target="_blank" title="Karriere">Karriere</a>

Fix any of the following:

  • Element has insufficient color contrast of 4.3 (foreground color: #716d69, background color: #ecebea, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

.footer-navigation-wrapper
11

Element location

.link--v2[title="Bauen"][target="_blank"]

Element source

<a class="link--v2" href="https://www.example.com/de/bauen.html" target="_blank" title="Bauen">Bauen</a>

Fix any of the following:

  • Element has insufficient color contrast of 4.3 (foreground color: #716d69, background color: #ecebea, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

.footer-navigation-wrapper
12

Element location

a[title="Einspeisen"]

Element source

<a class="link--v2" href="https://www.example.com/de/einspeisen.html" target="_blank" title="Einspeisen">Einspeisen</a>

Fix any of the following:

  • Element has insufficient color contrast of 4.3 (foreground color: #716d69, background color: #ecebea, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

.footer-navigation-wrapper
13

Element location

a[title="Zähler ablesen"]

Element source

<a class="link--v2" href="https://www.example.com/de/energie-verbrauchen/zaehlerstand-eingeben.html" target="_blank" title="Zähler ablesen">Zähler ablesen</a>

Fix any of the following:

  • Element has insufficient color contrast of 4.3 (foreground color: #716d69, background color: #ecebea, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

.footer-navigation-wrapper
14

Element location

a[title="Partnerfirmen"]

Element source

<a class="link--v2" href="https://www.example.com/de/fuer-partnerfirmen.html" target="_blank" title="Partnerfirmen">Partnerfirmen</a>

Fix any of the following:

  • Element has insufficient color contrast of 4.3 (foreground color: #716d69, background color: #ecebea, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

.footer-navigation-wrapper
15

Element location

a[title="Ausschreibungen"]

Element source

<a class="link--v2" href="https://www.example.com/de/about-example/unser-netz/ausschreibungen-fuer-netzverluste.html" target="_blank" title="Ausschreibungen">Ausschreibungen</a>

Fix any of the following:

  • Element has insufficient color contrast of 4.3 (foreground color: #716d69, background color: #ecebea, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

.footer-navigation-wrapper
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

a[onclick="UC_UI.showSecondLayer();"]

Element source

<a class="footer-meta__link link--v2" href="#" onclick="UC_UI.showSecondLayer();"></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. 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

.header-navigation > div > nav

Element source

<nav>

Fix any of the following:

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

Related node:

.breadcrumb-navigation
4. Page should contain a level-one heading
Learn more
page-has-heading-one
Best practice

Ensure that the page, or at least one of its frames contains a level-one heading

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

Element location

html

Element source

<html lang="de" data-locale="de" data-language="de" class="ua-windows_nt ua-windows_nt-10 ua-windows_nt-10-0 ua-chrome ua-chrome-58 ua-chrome-58-0 ua-chrome-58-0-3029 ua-chrome-58-0-3029-110 ua-desktop ua-desktop-windows ua-webkit ua-webkit-537 ua-webkit-537-36 js supports cssfilters">

Fix all of the following:

  • Page must have a level-one heading

What 'incomplete' 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.

# Count Description WCAG Further Description
1 1 Elements must only use supported ARIA attributes WCAG 2 Level A, WCAG 4.1.2 Ensures an element's role supports its ARIA attributes
2 1 ARIA attributes must be used as specified for the element's role WCAG 2 Level A, WCAG 4.1.2 Ensures ARIA attributes are used as described in the specification of the element's role
3 1 aria-hidden="true" must not be present on the document body WCAG 2 Level A, WCAG 1.3.1, WCAG 4.1.2 Ensures aria-hidden="true" is not present on the document body.
4 1 ARIA hidden element must not be focusable or contain focusable elements WCAG 2 Level A, WCAG 4.1.2 Ensures aria-hidden elements are not focusable nor contain focusable elements
5 1 Elements must only use permitted ARIA attributes WCAG 2 Level A, WCAG 4.1.2 Ensures ARIA attributes are not prohibited for an element's role
6 1 ARIA attributes must conform to valid values WCAG 2 Level A, WCAG 4.1.2 Ensures all ARIA attributes have valid values
7 1 ARIA attributes must conform to valid names WCAG 2 Level A, WCAG 4.1.2 Ensures attributes that begin with aria- are valid ARIA attributes
8 30 Inline text spacing must be adjustable with custom stylesheets WCAG 2.1 Level AA, WCAG 1.4.1.2 Ensure that text spacing set through style attributes can be adjusted with custom stylesheets
9 15 Buttons must have discernible text WCAG 2 Level A, WCAG 4.1.2 Ensures buttons have discernible text
10 1 Page must have means to bypass repeated blocks WCAG 2 Level A, WCAG 2.4.1 Ensures each page has at least one mechanism for a user to bypass navigation and jump straight to the content
11 37 Elements must meet minimum color contrast ratio thresholds WCAG 2 Level AA, WCAG 1.4.3 Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
12 1 Documents must have <title> element to aid in navigation WCAG 2 Level A, WCAG 2.4.2 Ensures each HTML document contains a non-empty <title> element
13 1 IDs used in ARIA and labels must be unique WCAG 2 Level A, WCAG 4.1.2 Ensures every id attribute value used in ARIA and in labels is unique
14 5 Headings should not be empty Best practice Ensures headings have discernible text
15 5 Heading levels should only increase by one Best practice Ensures the order of headings is semantically correct
16 1 <html> element must have a lang attribute WCAG 2 Level A, WCAG 3.1.1 Ensures every HTML document has a lang attribute
17 1 <html> element must have a valid value for the lang attribute WCAG 2 Level A, WCAG 3.1.1 Ensures the lang attribute of the <html> element has a valid value
18 9 Images must have alternate text WCAG 2 Level A, WCAG 1.1.1 Ensures <img> elements have alternate text or a role of none or presentation
19 9 Alternative text of images should not be repeated as text Best practice Ensure image alternative is not repeated as text
20 1 Banner landmark should not be contained in another landmark Best practice Ensures the banner landmark is at top level
21 1 Contentinfo landmark should not be contained in another landmark Best practice Ensures the contentinfo landmark is at top level
22 1 Main landmark should not be contained in another landmark Best practice Ensures the main landmark is at top level
23 1 Document should not have more than one banner landmark Best practice Ensures the document has at most one banner landmark
24 1 Document should not have more than one contentinfo landmark Best practice Ensures the document has at most one contentinfo landmark
25 1 Document should not have more than one main landmark Best practice Ensures the document has at most one main landmark
26 1 Document should have one main landmark Best practice Ensures the document has a main landmark
27 3 Ensures landmarks are unique Best practice Landmarks should have a unique role or role/label/title (i.e. accessible name) combination
28 32 Links must have discernible text WCAG 2 Level A, WCAG 2.4.4, WCAG 4.1.2 Ensures links have discernible text
29 10 <ul> and <ol> must only directly contain <li>, <script> or <template> elements WCAG 2 Level A, WCAG 1.3.1 Ensures that lists are structured correctly
30 28 <li> elements must be contained in a <ul> or <ol> WCAG 2 Level A, WCAG 1.3.1 Ensures <li> elements are used semantically
31 1 Users should be able to zoom and scale the text up to 500% Best practice Ensures <meta name="viewport"> can scale a significant amount
32 1 Zooming and scaling must not be disabled WCAG 2 Level AA, WCAG 1.4.4 Ensures <meta name="viewport"> does not disable text scaling and zooming
33 24 Interactive controls must not be nested 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
34 230 All page content should be contained by landmarks Best practice Ensures all page content is contained by landmarks
35 1 Scrollable region must have keyboard access WCAG 2 Level A, WCAG 2.1.1, WCAG 2.1.3 Ensure elements that have scrollable content are accessible by keyboard