system/components/toggle-switch

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

9 violations: Light: 2Dark: 3HC Light: 2HC Dark: 2

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

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

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

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

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

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

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

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

  • 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 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:

  • 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 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:

  • 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 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:

  • 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 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

<em class="fc-black-350">N/A</em>

Target

em

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc