Axe-core® Accessibility Results

Page URL: https://www.saucedemo.com/inventory.html

axe-core found 24 violations

# Description Axe rule ID WCAG Impact Count
1 Document should have one main landmark landmark-one-main Best practice moderate 1
2 Page should contain a level-one heading page-has-heading-one Best practice moderate 1
3 All page content should be contained by landmarks region Best practice moderate 21
4 Select element must have an accessible name select-name WCAG 2 Level A, WCAG 4.1.2 critical 1

Failed

1. 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 lang="en">

Fix all of the following:

  • Document does not have a main landmark

2. 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="en">

Fix all of the following:

  • Page must have a level-one heading

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

.bm-icon

Element source

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAwIDc5LmRhNGE3ZTVlZiwgMjAyMi8xMS8yMi0xMzo1MDowNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjEgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTA3QzBCMEVBRUYzMTFFREIwRThFMzc3OTlDRTMyNUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTA3QzBCMEZBRUYzMTFFREIwRThFMzc3OTlDRTMyNUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMDdDMEIwQ0FFRjMxMUVEQjBFOEUzNzc5OUNFMzI1QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMDdDMEIwREFFRjMxMUVEQjBFOEUzNzc5OUNFMzI1QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pq0LVkQAAAERSURBVHjaYvz//z/DQAImhgEGow5gARE379wx8IuN2f/2/XsBeliqqqj4YMHkKYHqKioXwCEwb+mSAnpZDgK3799XmL9sWT48CrQ1NS/QO+gtTUwOgmhGWDY8c+GCw9NnzxToYbm0lNQDEwODAygOGM2Gow4Y0ILo+YsXCgtWLM//+OkzXcoCfj7eDwkRURMlJcQfgB0wf/mygr6ZM/Pp6XNg7mOsKiwqGBxRkBAZNQFEf/r8hZ8elvLx8nxMiIyeMFoQjTpg8BREA1kdgx2wcdu2hOSiwvn09HlfY1NhXHj4BHAUHDt9yoHeQX/t5k19eBpIio6ZAGoo0styYUHBD4lRURNHC6JRB4w6AAQAAgwA/fRn191dMT8AAAAASUVORK5CYII=" class="bm-icon" srcset="/static/media/menu3x.52cc17a3.svg" alt="Open Menu" data-test="open-menu" style="width: 100%; height: 100%;">

Fix any of the following:

  • Some page content is not contained by landmarks
2

Element location

.header_label

Element source

<div class="header_label"><div class="app_logo">Swag Labs</div></div>

Fix any of the following:

  • Some page content is not contained by landmarks
3

Element location

.header_secondary_container

Element source

<div class="header_secondary_container" data-test="secondary-header">

Fix any of the following:

  • Some page content is not contained by landmarks
4

Element location

.inventory_item[data-test="inventory-item"]:nth-child(1) > .inventory_item_img

Element source

<div class="inventory_item_img"><a href="#" id="item_4_img_link" data-test="item-4-img-link"><img alt="Sauce Labs Backpack" class="inventory_item_img" src="/static/media/sauce-backpack-1200x1500.0a0b85a3.jpg" data-test="inventory-item-sauce-labs-backpack-img"></a></div>

Fix any of the following:

  • Some page content is not contained by landmarks
5

Element location

.inventory_item[data-test="inventory-item"]:nth-child(1) > .inventory_item_description[data-test="inventory-item-description"] > .inventory_item_label

Element source

<div class="inventory_item_label">

Fix any of the following:

  • Some page content is not contained by landmarks
6

Element location

.inventory_item[data-test="inventory-item"]:nth-child(1) > .inventory_item_description[data-test="inventory-item-description"] > .pricebar > .inventory_item_price[data-test="inventory-item-price"]

Element source

<div class="inventory_item_price" data-test="inventory-item-price">$29.99</div>

Fix any of the following:

  • Some page content is not contained by landmarks
7

Element location

.inventory_item[data-test="inventory-item"]:nth-child(2) > .inventory_item_img

Element source

<div class="inventory_item_img"><a href="#" id="item_0_img_link" data-test="item-0-img-link"><img alt="Sauce Labs Bike Light" class="inventory_item_img" src="/static/media/bike-light-1200x1500.37c843b0.jpg" data-test="inventory-item-sauce-labs-bike-light-img"></a></div>

Fix any of the following:

  • Some page content is not contained by landmarks
8

Element location

.inventory_item[data-test="inventory-item"]:nth-child(2) > .inventory_item_description[data-test="inventory-item-description"] > .inventory_item_label

Element source

<div class="inventory_item_label">

Fix any of the following:

  • Some page content is not contained by landmarks
9

Element location

.inventory_item[data-test="inventory-item"]:nth-child(2) > .inventory_item_description[data-test="inventory-item-description"] > .pricebar > .inventory_item_price[data-test="inventory-item-price"]

Element source

<div class="inventory_item_price" data-test="inventory-item-price">$9.99</div>

Fix any of the following:

  • Some page content is not contained by landmarks
10

Element location

.inventory_item[data-test="inventory-item"]:nth-child(3) > .inventory_item_img

Element source

<div class="inventory_item_img"><a href="#" id="item_1_img_link" data-test="item-1-img-link"><img alt="Sauce Labs Bolt T-Shirt" class="inventory_item_img" src="/static/media/bolt-shirt-1200x1500.c2599ac5.jpg" data-test="inventory-item-sauce-labs-bolt-t-shirt-img"></a></div>

Fix any of the following:

  • Some page content is not contained by landmarks
11

Element location

.inventory_item[data-test="inventory-item"]:nth-child(3) > .inventory_item_description[data-test="inventory-item-description"] > .inventory_item_label

Element source

<div class="inventory_item_label">

Fix any of the following:

  • Some page content is not contained by landmarks
12

Element location

.inventory_item[data-test="inventory-item"]:nth-child(3) > .inventory_item_description[data-test="inventory-item-description"] > .pricebar > .inventory_item_price[data-test="inventory-item-price"]

Element source

<div class="inventory_item_price" data-test="inventory-item-price">$15.99</div>

Fix any of the following:

  • Some page content is not contained by landmarks
13

Element location

.inventory_item[data-test="inventory-item"]:nth-child(4) > .inventory_item_img

Element source

<div class="inventory_item_img"><a href="#" id="item_5_img_link" data-test="item-5-img-link"><img alt="Sauce Labs Fleece Jacket" class="inventory_item_img" src="/static/media/sauce-pullover-1200x1500.51d7ffaf.jpg" data-test="inventory-item-sauce-labs-fleece-jacket-img"></a></div>

Fix any of the following:

  • Some page content is not contained by landmarks
14

Element location

.inventory_item[data-test="inventory-item"]:nth-child(4) > .inventory_item_description[data-test="inventory-item-description"] > .inventory_item_label

Element source

<div class="inventory_item_label">

Fix any of the following:

  • Some page content is not contained by landmarks
15

Element location

.inventory_item[data-test="inventory-item"]:nth-child(4) > .inventory_item_description[data-test="inventory-item-description"] > .pricebar > .inventory_item_price[data-test="inventory-item-price"]

Element source

<div class="inventory_item_price" data-test="inventory-item-price">$49.99</div>

Fix any of the following:

  • Some page content is not contained by landmarks
16

Element location

.inventory_item[data-test="inventory-item"]:nth-child(5) > .inventory_item_img

Element source

<div class="inventory_item_img"><a href="#" id="item_2_img_link" data-test="item-2-img-link"><img alt="Sauce Labs Onesie" class="inventory_item_img" src="/static/media/red-onesie-1200x1500.2ec615b2.jpg" data-test="inventory-item-sauce-labs-onesie-img"></a></div>

Fix any of the following:

  • Some page content is not contained by landmarks
17

Element location

.inventory_item[data-test="inventory-item"]:nth-child(5) > .inventory_item_description[data-test="inventory-item-description"] > .inventory_item_label

Element source

<div class="inventory_item_label">

Fix any of the following:

  • Some page content is not contained by landmarks
18

Element location

.inventory_item[data-test="inventory-item"]:nth-child(5) > .inventory_item_description[data-test="inventory-item-description"] > .pricebar > .inventory_item_price[data-test="inventory-item-price"]

Element source

<div class="inventory_item_price" data-test="inventory-item-price">$7.99</div>

Fix any of the following:

  • Some page content is not contained by landmarks
19

Element location

.inventory_item[data-test="inventory-item"]:nth-child(6) > .inventory_item_img

Element source

<div class="inventory_item_img"><a href="#" id="item_3_img_link" data-test="item-3-img-link"><img alt="Test.allTheThings() T-Shirt (Red)" class="inventory_item_img" src="/static/media/red-tatt-1200x1500.30dadef4.jpg" data-test="inventory-item-test.allthethings()-t-shirt-(red)-img"></a></div>

Fix any of the following:

  • Some page content is not contained by landmarks
20

Element location

.inventory_item[data-test="inventory-item"]:nth-child(6) > .inventory_item_description[data-test="inventory-item-description"] > .inventory_item_label

Element source

<div class="inventory_item_label">

Fix any of the following:

  • Some page content is not contained by landmarks
21

Element location

.inventory_item[data-test="inventory-item"]:nth-child(6) > .inventory_item_description[data-test="inventory-item-description"] > .pricebar > .inventory_item_price[data-test="inventory-item-price"]

Element source

<div class="inventory_item_price" data-test="inventory-item-price">$15.99</div>

Fix any of the following:

  • Some page content is not contained by landmarks

4. Select element must have an accessible name

Learn more

select-name

WCAG 2 Level A, WCAG 4.1.2

Ensure select element has an accessible name

critical

Issue Tags: cat.forms wcag2a wcag412 section508 section508.22.n TTv5 TT5.c EN-301-549 EN-9.4.1.2 ACT

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

Element location

select

Element source

<select class="product_sort_container" data-test="product-sort-container"><option value="az">Name (A to Z)</option><option value="za">Name (Z to A)</option><option value="lohi">Price (low to high)</option><option value="hilo">Price (high to low)</option></select>

Fix any of the following:

  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • 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"

# Description Axe rule ID WCAG Nodes passed check
1 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
2 ARIA hidden element must not be focusable or contain focusable elements aria-hidden-focus WCAG 2 Level A, WCAG 4.1.2 1
3 Inline text spacing must be adjustable with custom stylesheets avoid-inline-spacing WCAG 2.1 Level AA, WCAG 1.4.1.2 3
4 Buttons must have discernible text button-name WCAG 2 Level A, WCAG 4.1.2 7
5 Elements must meet minimum color contrast ratio thresholds color-contrast WCAG 2 Level AA, WCAG 1.4.3 26
6 Documents must have <title> element to aid in navigation document-title WCAG 2 Level A, WCAG 2.4.2 1
7 Form field must not have multiple label elements form-field-multiple-labels WCAG 2 Level A, WCAG 3.3.2 1
8 <html> element must have a lang attribute html-has-lang WCAG 2 Level A, WCAG 3.1.1 1
9 <html> element must have a valid value for the lang attribute html-lang-valid WCAG 2 Level A, WCAG 3.1.1 1
10 Images must have alternative text image-alt WCAG 2 Level A, WCAG 1.1.1 7
11 Alternative text of images should not be repeated as text image-redundant-alt Best practice 7
12 Form elements should have a visible label label-title-only Best practice 1
13 Contentinfo landmark should not be contained in another landmark landmark-contentinfo-is-top-level Best practice 1
14 Document should not have more than one contentinfo landmark landmark-no-duplicate-contentinfo Best practice 1
15 Landmarks should have a unique role or role/label/title (i.e. accessible name) combination landmark-unique Best practice 1
16 Links must have discernible text link-name WCAG 2 Level A, WCAG 2.4.4, WCAG 4.1.2 15
17 <ul> and <ol> must only directly contain <li>, <script> or <template> elements list WCAG 2 Level A, WCAG 1.3.1 1
18 <li> elements must be contained in a <ul> or <ol> listitem WCAG 2 Level A, WCAG 1.3.1 3
19 Users should be able to zoom and scale the text up to 500% meta-viewport-large Best practice 1
20 Zooming and scaling must not be disabled meta-viewport WCAG 2 Level AA, WCAG 1.4.4 1
21 Interactive controls must not be nested nested-interactive WCAG 2 Level A, WCAG 4.1.2 18
22 All page content should be contained by landmarks region Best practice 89

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 Page must have means to bypass repeated blocks bypass WCAG 2 Level A, WCAG 2.4.1 1
2 Elements must meet minimum color contrast ratio thresholds color-contrast WCAG 2 Level AA, WCAG 1.4.3 7
3 Links must be distinguishable without relying on color link-in-text-block WCAG 2 Level A, WCAG 1.4.1 6

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