product/components/toggle-switch

ID:
product/components/toggle-switch
Automated score:
95.9
URL:
https://stackoverflow.design/product/components/toggle-switch
View JSON file

5 violations: Light: 1 Dark: 2 HC Light: 1 HC Dark: 1

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

HTML

<input class="s-toggle-switch" id="toggle-example-checked-disabled" type="checkbox" disabled="" checked="">

Target

#toggle-example-checked-disabled

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" id="toggle-example-checked-disabled" type="checkbox" disabled="" checked="">

Target

#toggle-example-checked-disabled

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" id="toggle-example-checked-disabled" type="checkbox" disabled="" checked="">

Target

#toggle-example-checked-disabled

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" id="toggle-example-checked-disabled" type="checkbox" disabled="" checked="">

Target

#toggle-example-checked-disabled

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

<div class="stacks-badge-dotnet--text d-flex flex__center brr-sm px8 py4">Razor</div>

Target

.stacks-badge-dotnet--text

Summary

Fix all of the following:

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