Axe-core® Accessibility Results

Page URL: http://localhost:3000/

axe-core found 19 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 Elements must meet minimum color contrast ratio thresholds color-contrast WCAG 2 Level AA, WCAG 1.4.3 serious 2
3 <html> element must have a lang attribute html-has-lang WCAG 2 Level A, WCAG 3.1.1 serious 1
4 Document should have one main landmark landmark-one-main Best practice moderate 1
5 Links must be distinguishable without relying on color link-in-text-block WCAG 2 Level A, WCAG 1.4.1 serious 2
6 Ensure elements marked as presentational are consistently ignored presentation-role-conflict Best practice minor 1
7 All page content should be contained by landmarks region Best practice moderate 11

Failed

1. Buttons must have discernible text

Learn more

button-name

WCAG 2 Level A, WCAG 4.1.2

Ensure 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

#dropbtn

Element source

<button id="dropbtn" data-testid="btn-dropdown" class="dropbtn">
        <img id="avatar" src="/data/icons/user.png" style="width: 30px !important; height: 30px !important; padding: 0" alt="">
      </button>

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 does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • Element's default semantics were not overridden with role="none" or role="presentation"

2. Elements must meet minimum color contrast ratio thresholds

Learn more

color-contrast

WCAG 2 Level AA, WCAG 1.4.3

Ensure 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

#footer-container > a[href$="jaktestowac.pl"][target="_blank"][rel="noopener"]

Element source

<a href="https://jaktestowac.pl" target="_blank" rel="noopener" aria-label="Visit jaktestowac.pl (opens in a new tab)">jaktestowac.pl</a>

Fix any of the following:

  • Element has insufficient color contrast of 4.06 (foreground color: #0275d8, background color: #f0f0f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

body
2

Element location

#footer-container > a[target="_blank"][rel="noopener"]:nth-child(4)

Element source

<a href="https://github.com/jaktestowac/gad-gui-api-demo" target="_blank" rel="noopener" aria-label="Visit GitHub Repository (opens in a new tab)"><i class="fab fa-github"></i> GitHub Repository</a>

Fix any of the following:

  • Element has insufficient color contrast of 4.06 (foreground color: #0275d8, background color: #f0f0f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

Related node:

body

3. <html> element must have a lang attribute

Learn more

html-has-lang

WCAG 2 Level A, WCAG 3.1.1

Ensure every HTML document has a lang attribute

serious

Issue Tags: cat.language wcag2a wcag311 TTv5 TT11.a EN-301-549 EN-9.3.1.1 ACT

# Issue Description To solve this violation, you need to...
1

Element location

html

Element source

<html>

Fix any of the following:

  • The <html> element does not have a lang attribute

4. Document should have one main landmark

Learn more

landmark-one-main

Best practice

Ensure the document has a main landmark

moderate

Issue Tags: cat.semantics best-practice

# Issue Description To solve this violation, you need to...
1

Element location

html

Element source

<html>

Fix all of the following:

  • Document does not have a main landmark

5. Links must be distinguishable without relying on color

Learn more

link-in-text-block

WCAG 2 Level A, WCAG 1.4.1

Ensure links are distinguished from surrounding text in a way that does not rely on color

serious

Issue Tags: cat.color wcag2a wcag141 TTv5 TT13.a EN-301-549 EN-9.1.4.1

# Issue Description To solve this violation, you need to...
1

Element location

#footer-container > a[href$="jaktestowac.pl"][target="_blank"][rel="noopener"]

Element source

<a href="https://jaktestowac.pl" target="_blank" rel="noopener" aria-label="Visit jaktestowac.pl (opens in a new tab)">jaktestowac.pl</a>

Fix any of the following:

  • The link has insufficient color contrast of 2.1:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0275d8, surrounding text: #444444)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

Related node:

#footer-container
#footer-container
2

Element location

#footer-container > a[target="_blank"][rel="noopener"]:nth-child(4)

Element source

<a href="https://github.com/jaktestowac/gad-gui-api-demo" target="_blank" rel="noopener" aria-label="Visit GitHub Repository (opens in a new tab)"><i class="fab fa-github"></i> GitHub Repository</a>

Fix any of the following:

  • The link has insufficient color contrast of 2.1:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0275d8, surrounding text: #444444)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

Related node:

#footer-container
#footer-container

6. Ensure elements marked as presentational are consistently ignored

Learn more

presentation-role-conflict

Best practice

Elements marked as presentational should not have global ARIA or tabindex to ensure all screen readers ignore them

minor

Issue Tags: cat.aria best-practice ACT

# Issue Description To solve this violation, you need to...
1

Element location

#frontbanner

Element source

<img src="./data/gad-front-banner.png" id="frontbanner" aria-label="Front banner of GAD application" style="max-width: 200px !important; max-height: 200px !important; margin: 10px; border-radius: 100%;" alt="">

Fix all of the following:

  • Element does not have global ARIA attribute

7. All page content should be contained by landmarks

Learn more

region

Best practice

Ensure 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

.page-header

Element source

<div class="container page-header" id="pageHeader">
    <h1>
      Welcome on <span aria-label="GAD">🦎</span><span style="color: rgb(8, 195, 1)">G</span>UI <span style="color: rgb(8, 195, 1)">A</span>PI
      <span style="color: rgb(8, 195, 1)">D</span>emo
    </h1>
  </div>

Fix any of the following:

  • Some page content is not contained by landmarks
2

Element location

.page-subheader

Element source

<div class="container page-subheader" id="pageHeader">
    <h2>Practice your test automation skills!</h2>
  </div>

Fix any of the following:

  • Some page content is not contained by landmarks
3

Element location

div[align="center"]:nth-child(7)

Element source

<div align="center" style="justify-content: center !important">
    <img src="./data/gad-front-banner.png" id="frontbanner" aria-label="Front banner of GAD application" style="max-width: 200px !important; max-height: 200px !important; margin: 10px; border-radius: 100%;" alt="">
  </div>

Fix any of the following:

  • Some page content is not contained by landmarks
4

Element location

div[align="center"]:nth-child(9)

Element source

<div align="center">
    Choose a module to start practicing:
  </div>

Fix any of the following:

  • Some page content is not contained by landmarks
5

Element location

a[href$="articles.html"] > .module-content > div > div:nth-child(2)

Element source

<div style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">

Fix any of the following:

  • Some page content is not contained by landmarks
6

Element location

a[href$="practice"] > .module-content > div > div:nth-child(2)

Element source

<div style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
              <span class="module-description">Special pages to test!<br><br>Practice on elements states, tables, dynamic IDs, API, popups, charts, iframes and more!</span>
            </div>

Fix any of the following:

  • Some page content is not contained by landmarks
7

Element location

a[href$="games"] > .module-content > div > div:nth-child(2)

Element source

<div style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
              <span class="module-description">Special pages to test!<br><br>Practice automation on non-standard elements, animations, games, and more!</span>
            </div>

Fix any of the following:

  • Some page content is not contained by landmarks
8

Element location

a[href$="dashboard.html"] > .module-content > div > div:nth-child(2)

Element source

<div style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
              <span class="module-description">Discover and manage bookstore!<br><br>Handle books, items, orders, accounts, payments, and roles</span>
            </div>

Fix any of the following:

  • Some page content is not contained by landmarks
9

Element location

.new-badge

Element source

<span class="new-badge">NEW</span>

Fix any of the following:

  • Some page content is not contained by landmarks
10

Element location

a[href$="welcome.html"] > .module-content > div > div:nth-child(2)

Element source

<div style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
              <span class="module-description">Explore courses!<br><br>Handle courses, users, questions, progress, and learning paths</span>
            </div>

Fix any of the following:

  • Some page content is not contained by landmarks
11

Element location

.container:nth-child(13)

Element source

<div class="container" style="align-content: center; display: flex; align-items: center; justify-content: center; font-size: 24px">

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 8
2 ARIA attributes must be used as specified for the element's role aria-conditional-attr WCAG 2 Level A, WCAG 4.1.2 8
3 aria-hidden="true" must not be present on the document body aria-hidden-body WCAG 2 Level A, WCAG 1.3.1, WCAG 4.1.2 1
4 Elements must only use permitted ARIA attributes aria-prohibited-attr WCAG 2 Level A, WCAG 4.1.2 6
5 ARIA attributes must conform to valid values aria-valid-attr-value WCAG 2 Level A, WCAG 4.1.2 8
6 ARIA attributes must conform to valid names aria-valid-attr WCAG 2 Level A, WCAG 4.1.2 8
7 Inline text spacing must be adjustable with custom stylesheets avoid-inline-spacing WCAG 2.1 Level AA, WCAG 1.4.1.2 33
8 Buttons must have discernible text button-name WCAG 2 Level A, WCAG 4.1.2 5
9 Page must have means to bypass repeated blocks bypass WCAG 2 Level A, WCAG 2.4.1 1
10 Elements must meet minimum color contrast ratio thresholds color-contrast WCAG 2 Level AA, WCAG 1.4.3 17
11 Documents must have <title> element to aid in navigation document-title WCAG 2 Level A, WCAG 2.4.2 1
12 Headings should not be empty empty-heading Best practice 8
13 Heading levels should only increase by one heading-order Best practice 8
14 Images must have alternative text image-alt WCAG 2 Level A, WCAG 1.1.1 5
15 Alternative text of images should not be repeated as text image-redundant-alt Best practice 5
16 Banner landmark should not be contained in another landmark landmark-banner-is-top-level Best practice 1
17 Contentinfo landmark should not be contained in another landmark landmark-contentinfo-is-top-level Best practice 1
18 Document should not have more than one banner landmark landmark-no-duplicate-banner Best practice 1
19 Document should not have more than one contentinfo landmark landmark-no-duplicate-contentinfo Best practice 1
20 Landmarks should have a unique role or role/label/title (i.e. accessible name) combination landmark-unique Best practice 2
21 Links must have discernible text link-name WCAG 2 Level A, WCAG 2.4.4, WCAG 4.1.2 12
22 Users should be able to zoom and scale the text up to 500% meta-viewport-large Best practice 1
23 Zooming and scaling must not be disabled meta-viewport WCAG 2 Level AA, WCAG 1.4.4 1
24 Interactive controls must not be nested nested-interactive WCAG 2 Level A, WCAG 4.1.2 9
25 Page should contain a level-one heading page-has-heading-one Best practice 1
26 Ensure elements marked as presentational are consistently ignored presentation-role-conflict Best practice 2
27 All page content should be contained by landmarks region Best practice 94

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 Elements must only use permitted ARIA attributes aria-prohibited-attr WCAG 2 Level A, WCAG 4.1.2 2
2 Elements must meet minimum color contrast ratio thresholds color-contrast WCAG 2 Level AA, WCAG 1.4.3 4

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 alternative text area-alt WCAG 2 Level A, WCAG 2.4.4, WCAG 4.1.2
3 ARIA role should be appropriate for the element aria-allowed-role Best practice
4 aria-braille attributes must have a non-braille equivalent aria-braille-equivalent WCAG 2 Level A, WCAG 4.1.2
5 ARIA commands must have an accessible name aria-command-name WCAG 2 Level A, WCAG 4.1.2
6 Deprecated ARIA roles must not be used aria-deprecated-role WCAG 2 Level A, WCAG 4.1.2
7 ARIA dialog and alertdialog nodes should have an accessible name aria-dialog-name Best practice
8 ARIA hidden element must not be focusable or contain focusable elements aria-hidden-focus WCAG 2 Level A, WCAG 4.1.2
9 ARIA input fields must have an accessible name aria-input-field-name WCAG 2 Level A, WCAG 4.1.2
10 ARIA meter nodes must have an accessible name aria-meter-name WCAG 2 Level A, WCAG 1.1.1
11 ARIA progressbar nodes must have an accessible name aria-progressbar-name WCAG 2 Level A, WCAG 1.1.1
12 Required ARIA attributes must be provided aria-required-attr WCAG 2 Level A, WCAG 4.1.2
13 Certain ARIA roles must contain particular children aria-required-children WCAG 2 Level A, WCAG 1.3.1
14 Certain ARIA roles must be contained by particular parents aria-required-parent WCAG 2 Level A, WCAG 1.3.1
15 ARIA roles used must conform to valid values aria-roles WCAG 2 Level A, WCAG 4.1.2
16 "role=text" should have no focusable descendants aria-text Best practice
17 ARIA toggle fields must have an accessible name aria-toggle-field-name WCAG 2 Level A, WCAG 4.1.2
18 ARIA tooltip nodes must have an accessible name aria-tooltip-name WCAG 2 Level A, WCAG 4.1.2
19 ARIA treeitem nodes should have an accessible name aria-treeitem-name Best practice
20 autocomplete attribute must be used correctly autocomplete-valid WCAG 2.1 Level AA, WCAG 1.3.5
21 <blink> elements are deprecated and must not be used blink WCAG 2 Level A, WCAG 2.2.2
22 <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
23 <dt> and <dd> elements must be contained by a <dl> dlitem WCAG 2 Level A, WCAG 1.3.1
24 IDs used in ARIA and labels must be unique duplicate-id-aria WCAG 2 Level A, WCAG 4.1.2
25 Table header text should not be empty empty-table-header Best practice
26 Form field must not have multiple label elements form-field-multiple-labels WCAG 2 Level A, WCAG 3.3.2
27 Frames with focusable content must not have tabindex=-1 frame-focusable-content WCAG 2 Level A, WCAG 2.1.1
28 Frames should be tested with axe-core frame-tested Best practice
29 Frames must have a unique title attribute frame-title-unique WCAG 2 Level A, WCAG 4.1.2
30 Frames must have an accessible name frame-title WCAG 2 Level A, WCAG 4.1.2
31 <html> element must have a valid value for the lang attribute html-lang-valid WCAG 2 Level A, WCAG 3.1.1
32 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
33 Input buttons must have discernible text input-button-name WCAG 2 Level A, WCAG 4.1.2
34 Image buttons must have alternative text input-image-alt WCAG 2 Level A, WCAG 1.1.1, WCAG 4.1.2
35 Form elements should have a visible label label-title-only Best practice
36 Form elements must have labels label WCAG 2 Level A, WCAG 4.1.2
37 Aside should not be contained in another landmark landmark-complementary-is-top-level Best practice
38 Main landmark should not be contained in another landmark landmark-main-is-top-level Best practice
39 Document should not have more than one main landmark landmark-no-duplicate-main Best practice
40 <ul> and <ol> must only directly contain <li>, <script> or <template> elements list WCAG 2 Level A, WCAG 1.3.1
41 <li> elements must be contained in a <ul> or <ol> listitem WCAG 2 Level A, WCAG 1.3.1
42 <marquee> elements are deprecated and must not be used marquee WCAG 2 Level A, WCAG 2.2.2
43 Delayed refresh under 20 hours must not be used meta-refresh WCAG 2 Level A, WCAG 2.2.1
44 <object> elements must have alternative text object-alt WCAG 2 Level A, WCAG 1.1.1
45 [role="img"] elements must have an alternative text role-img-alt WCAG 2 Level A, WCAG 1.1.1
46 scope attribute should be used correctly scope-attr-valid Best practice
47 Scrollable region must have keyboard access scrollable-region-focusable WCAG 2 Level A, WCAG 2.1.1, WCAG 2.1.3
48 Select element must have an accessible name select-name WCAG 2 Level A, WCAG 4.1.2
49 Server-side image maps must not be used server-side-image-map WCAG 2 Level A, WCAG 2.1.1
50 The skip-link target should exist and be focusable skip-link Best practice
51 Summary elements must have discernible text summary-name WCAG 2 Level A, WCAG 4.1.2
52 <svg> elements with an img role must have an alternative text svg-img-alt WCAG 2 Level A, WCAG 1.1.1
53 Elements should not have tabindex greater than zero tabindex Best practice
54 Tables should not have the same summary and caption table-duplicate-name Best practice
55 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
56 Table headers in a data table must refer to data cells th-has-data-cells WCAG 2 Level A, WCAG 1.3.1
57 lang attribute must have a valid value valid-lang WCAG 2 Level AA, WCAG 3.1.2
58 <video> elements must have captions video-caption WCAG 2 Level A, WCAG 1.2.2
59 <video> or <audio> elements must not play automatically no-autoplay-audio WCAG 2 Level A, WCAG 1.4.2