product/foundation/accessibility

ID:
product/foundation/accessibility
Automated score:
93.9
URL:
https://stackoverflow.design/product/foundation/accessibility
View JSON file

7 violations: Light: 2 Dark: 2 HC Light: 2 HC Dark: 1

Ensure every form element has a label. Form elements must have labels. Help URL

HTML

<input class="s-toggle-switch " type="checkbox" role="presentation">

Target

.ta-center:nth-child(3) > .s-toggle-switch[type="checkbox"]

Summary

Fix any of the following:

  • Form element does not have an implicit (wrapped) <label>
  • Form 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 has no placeholder attribute
  • Element's role is not presentational because it is focusable

HTML

<input class="s-toggle-switch focus" type="checkbox" role="presentation">

Target

.focus

Summary

Fix any of the following:

  • Form element does not have an implicit (wrapped) <label>
  • Form 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 has no placeholder attribute
  • Element's role is not presentational because it is focusable

HTML

<input type="radio" name="toggle-(multi)-default" id="toggle-(multi)-default-four" checked="">

Target

#toggle-\(multi\)-default-four

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-default" id="toggle-(multi)-default-one">

Target

#toggle-\(multi\)-default-one

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-focused" id="toggle-(multi)-focused-four" checked="">

Target

#toggle-\(multi\)-focused-four

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-focused" id="toggle-(multi)-focused-one">

Target

#toggle-\(multi\)-focused-one

Summary

Fix any of the following:

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

Ensure every form element has a label. Form elements must have labels. Help URL

HTML

<input class="s-toggle-switch " type="checkbox" role="presentation">

Target

.ta-center:nth-child(3) > .s-toggle-switch[type="checkbox"]

Summary

Fix any of the following:

  • Form element does not have an implicit (wrapped) <label>
  • Form 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 has no placeholder attribute
  • Element's role is not presentational because it is focusable

HTML

<input class="s-toggle-switch focus" type="checkbox" role="presentation">

Target

.focus

Summary

Fix any of the following:

  • Form element does not have an implicit (wrapped) <label>
  • Form 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 has no placeholder attribute
  • Element's role is not presentational because it is focusable

HTML

<input type="radio" name="toggle-(multi)-default" id="toggle-(multi)-default-four" checked="">

Target

#toggle-\(multi\)-default-four

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-default" id="toggle-(multi)-default-one">

Target

#toggle-\(multi\)-default-one

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-focused" id="toggle-(multi)-focused-four" checked="">

Target

#toggle-\(multi\)-focused-four

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-focused" id="toggle-(multi)-focused-one">

Target

#toggle-\(multi\)-focused-one

Summary

Fix any of the following:

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

Ensure every form element has a label. Form elements must have labels. Help URL

HTML

<input class="s-toggle-switch " type="checkbox" role="presentation">

Target

.ta-center:nth-child(3) > .s-toggle-switch[type="checkbox"]

Summary

Fix any of the following:

  • Form element does not have an implicit (wrapped) <label>
  • Form 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 has no placeholder attribute
  • Element's role is not presentational because it is focusable

HTML

<input class="s-toggle-switch focus" type="checkbox" role="presentation">

Target

.focus

Summary

Fix any of the following:

  • Form element does not have an implicit (wrapped) <label>
  • Form 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 has no placeholder attribute
  • Element's role is not presentational because it is focusable

HTML

<input type="radio" name="toggle-(multi)-default" id="toggle-(multi)-default-four" checked="">

Target

#toggle-\(multi\)-default-four

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-default" id="toggle-(multi)-default-one">

Target

#toggle-\(multi\)-default-one

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-focused" id="toggle-(multi)-focused-four" checked="">

Target

#toggle-\(multi\)-focused-four

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-focused" id="toggle-(multi)-focused-one">

Target

#toggle-\(multi\)-focused-one

Summary

Fix any of the following:

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

Ensure every form element has a label. Form elements must have labels. Help URL

HTML

<input class="s-toggle-switch " type="checkbox" role="presentation">

Target

.ta-center:nth-child(3) > .s-toggle-switch[type="checkbox"]

Summary

Fix any of the following:

  • Form element does not have an implicit (wrapped) <label>
  • Form 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 has no placeholder attribute
  • Element's role is not presentational because it is focusable

HTML

<input class="s-toggle-switch focus" type="checkbox" role="presentation">

Target

.focus

Summary

Fix any of the following:

  • Form element does not have an implicit (wrapped) <label>
  • Form 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 has no placeholder attribute
  • Element's role is not presentational because it is focusable

HTML

<input type="radio" name="toggle-(multi)-default" id="toggle-(multi)-default-four" checked="">

Target

#toggle-\(multi\)-default-four

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-default" id="toggle-(multi)-default-one">

Target

#toggle-\(multi\)-default-one

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-focused" id="toggle-(multi)-focused-four" checked="">

Target

#toggle-\(multi\)-focused-four

Summary

Fix any of the following:

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

HTML

<input type="radio" name="toggle-(multi)-focused" id="toggle-(multi)-focused-one">

Target

#toggle-\(multi\)-focused-one

Summary

Fix any of the following:

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

Ensures the contrast between foreground and background colors meets APCA custom level conformance minimums thresholds. Elements must meet APCA conformance minimums thresholds. Help URL

HTML

<button class="s-btn s-btn__filled bg-theme-secondary-200" role="presentation">Button</button>

Target

.bg-theme-secondary-200

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.43Lc (foreground color: #ffffff, background color: #d6e8fa, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="bar-pill ta-center px8 py2 bg-green-400 fc-green-300">Robotics</div>

Target

.fc-green-300

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 37.69Lc (foreground color: #94ccae, background color: #18864b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

Ensures the contrast between foreground and background colors meets APCA custom level conformance minimums thresholds. Elements must meet APCA conformance minimums thresholds. Help URL

HTML

<button class="s-btn s-btn__filled bg-theme-secondary-200" role="presentation">Button</button>

Target

.bg-theme-secondary-200

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 16.16Lc (foreground color: #252627, background color: #2e5c8a, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="bar-pill ta-center px8 py2 bg-green-400 fc-green-300">Robotics</div>

Target

.fc-green-300

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 30.89Lc (foreground color: #2d8b5a, background color: #6ecf9c, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<span class="pe-auto">Visual cues</span>

Target

#visual-cues > .pe-auto

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.5 (foreground color: #525960, background color: #eef7f2, font size: 12.8pt (17px), font weight: bold). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Default</div>

Target

.mb32 > .ta-center:nth-child(1) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Focus</div>

Target

.mb32 > .ta-center:nth-child(2) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Navigation active default</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(15) > .ta-center:nth-child(1) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Navigation active focus</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(15) > .ta-center:nth-child(2) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<label for="one">Weekly</label>

Target

.ta-center:nth-child(3) > .h32.jc-center.ai-center > .jc-space-around.d-flex > .s-toggle-switch__multiple.s-toggle-switch > label[for="one"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Toggle (multi) default</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(15) > .ta-center:nth-child(3) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<label for="one">Weekly</label>

Target

.ta-center:nth-child(4) > .h32.jc-center.ai-center > .jc-space-around.d-flex > .s-toggle-switch__multiple.s-toggle-switch > label[for="one"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Toggle (multi) focused</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(15) > .ta-center:nth-child(4) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Button outlined default</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(18) > .ta-center:nth-child(1) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Button outlined focus</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(18) > .ta-center:nth-child(2) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Pagination default</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(18) > .ta-center:nth-child(3) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Pagination focus</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(18) > .ta-center:nth-child(4) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Navigation default</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(21) > .ta-center:nth-child(1) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Navigation focus</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(21) > .ta-center:nth-child(2) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Editor icon default</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(21) > .ta-center:nth-child(3) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Editor icon focus</div>

Target

.grid__4.md\:grid__2.fw-wrap:nth-child(21) > .ta-center:nth-child(4) > .fc-light.fs-caption.fs-italic > .w100.ta-center

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1