Axe-core® Accessibility Results

axe-core found 3 violations

#	Description	Axe rule ID	WCAG	Impact	Count
1	ARIA input fields must have an accessible name	aria-input-field-name	WCAG 2 Level A, WCAG 4.1.2	serious	1
2	Certain ARIA roles must contain particular children	aria-required-children	WCAG 2 Level A, WCAG 1.3.1	critical	1
3	All page content should be contained by landmarks	region	Best practice	moderate	1

Failed

1. ARIA input fields must have an accessible name

Learn more

aria-input-field-name

WCAG 2 Level A, WCAG 4.1.2

Ensure every ARIA input field has an accessible name

serious

Issue Tags: cat.aria wcag2a wcag412 TTv5 TT5.c EN-301-549 EN-9.4.1.2 ACT RGAAv4 RGAA-11.1.1

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

#	Issue Description	To solve this violation, you need to...
1	Element location `.product-color-container` Element source `<div aria-invalid="false" role="listbox" class="product-color-container" data-testid="product-color-selector"><img class="product-color-container__image" src="img/sticks1.png" alt="Amber"></div>`	Fix any of the following: 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 location

.product-color-container

Element source

<div aria-invalid="false" role="listbox" class="product-color-container" data-testid="product-color-selector"><img class="product-color-container__image" src="img/sticks1.png" alt="Amber"></div>

Fix any of the following:

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. Certain ARIA roles must contain particular children

Learn more

aria-required-children

WCAG 2 Level A, WCAG 1.3.1

Ensure elements with an ARIA role that require child roles contain them

critical

Issue Tags: cat.aria wcag2a wcag131 EN-301-549 EN-9.1.3.1 RGAAv4 RGAA-9.3.1

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

#	Issue Description	To solve this violation, you need to...
1	Element location `.product-color-container` Element source `<div aria-invalid="false" role="listbox" class="product-color-container" data-testid="product-color-selector"><img class="product-color-container__image" src="img/sticks1.png" alt="Amber"></div>`	Fix any of the following: Element has children which are not allowed: img[tabindex] Related node: `img`

Element location

.product-color-container

Element source

<div aria-invalid="false" role="listbox" class="product-color-container" data-testid="product-color-selector"><img class="product-color-container__image" src="img/sticks1.png" alt="Amber"></div>

Fix any of the following:

Element has children which are not allowed: img[tabindex]

Related node:

img

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 RGAAv4 RGAA-9.2.1

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

#	Issue Description	To solve this violation, you need to...
1	Element location `#storybook-root` Element source `<div id="storybook-root">`	Fix any of the following: Some page content is not contained by landmarks

Element location

#storybook-root

Element source

<div id="storybook-root">

Fix any of the following:

Some page content is not contained by landmarks