Back to Accessibility Report

Axe-core® Accessibility Results

axe-core found 18 violations

# Description Axe rule ID WCAG Impact Count
1 Certain ARIA roles must be contained by particular parents aria-required-parent WCAG 2 Level A, WCAG 1.3.1 critical 9
2 ARIA toggle fields must have an accessible name aria-toggle-field-name WCAG 2 Level A, WCAG 4.1.2 serious 9

Failed

1. Certain ARIA roles must be contained by particular parents

Learn more

aria-required-parent

WCAG 2 Level A, WCAG 1.3.1

Ensure elements with an ARIA role that require parent roles are contained by them

critical

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

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

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(1)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA"><div style="background-color: red;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: red;"></span></div></div></div>

Fix any of the following:

  • Required ARIA parents role not present: group, listbox
2

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(2)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA"><div style="background-color: blue;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: blue;"></span></div></div></div>

Fix any of the following:

  • Required ARIA parents role not present: group, listbox
3

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(3)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA ColorSelector-module-dotActive-8jURz"><div style="background-color: green;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: green;"></span></div></div></div>

Fix any of the following:

  • Required ARIA parents role not present: group, listbox
4

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(4)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA ColorSelector-module-dotDisabled-Ect7k"><div style="background-color: orange;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: orange;"></span></div></div></div>

Fix any of the following:

  • Required ARIA parents role not present: group, listbox
5

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(5)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA ColorSelector-module-dotDisabled-Ect7k"><div style="background-color: pink;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: pink;"></span></div></div></div>

Fix any of the following:

  • Required ARIA parents role not present: group, listbox
6

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(6)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA ColorSelector-module-dotDisabled-Ect7k"><div style="background-color: brown;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: brown;"></span></div></div></div>

Fix any of the following:

  • Required ARIA parents role not present: group, listbox
7

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(7)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA"><div style="background-color: white;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: white;"></span></div></div></div>

Fix any of the following:

  • Required ARIA parents role not present: group, listbox
8

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(8)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option">

Fix any of the following:

  • Required ARIA parents role not present: group, listbox
9

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(9)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option">

Fix any of the following:

  • Required ARIA parents role not present: group, listbox

2. ARIA toggle fields must have an accessible name

Learn more

aria-toggle-field-name

WCAG 2 Level A, WCAG 4.1.2

Ensure every ARIA toggle field has an accessible name

serious

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

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

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(1)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA"><div style="background-color: red;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: red;"></span></div></div></div>

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

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(2)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA"><div style="background-color: blue;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: blue;"></span></div></div></div>

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

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(3)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA ColorSelector-module-dotActive-8jURz"><div style="background-color: green;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: green;"></span></div></div></div>

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

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(4)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA ColorSelector-module-dotDisabled-Ect7k"><div style="background-color: orange;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: orange;"></span></div></div></div>

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

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(5)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA ColorSelector-module-dotDisabled-Ect7k"><div style="background-color: pink;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: pink;"></span></div></div></div>

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
6

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(6)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA ColorSelector-module-dotDisabled-Ect7k"><div style="background-color: brown;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: brown;"></span></div></div></div>

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
7

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(7)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option"><div class="ColorSelector-module-dot-fpwwA"><div style="background-color: white;"><span class="ColorSelector-module-dotLine-qOgKq" style="border-top-color: white;"></span></div></div></div>

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
8

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(8)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option">

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
9

Element location

.ColorSelector-module-dotContainer-G-ylF[role="option"]:nth-child(9)

Element source

<div class="ColorSelector-module-dotContainer-G-ylF" role="option">

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