system/develop/conditional-classes

ID:
system/develop/conditional-classes
Automated score:
92.3
URL:
https://stackoverflow.design/system/develop/conditional-classes
View JSON file

7 violations: Light: 1Dark: 2HC 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"

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="bar-md p12 bg-yellow-300 fc-yellow-600 d:bg-green-300 d:fc-green-600">This element will be yellow text and background in light mode but will become green in dark mode.</div>

Target

.fc-yellow-600

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 46.52Lc (foreground color: #ecffcc, background color: #96b364, font size: 10.5pt (14px), font weight: 300). 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

<div class="theme-light__forced bar-md p12 fc-dark bg-yellow-300 ba bc-yellow-300">This element will be rendered with light mode colors regardless of theme preference.</div>

Target

.theme-light__forced

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.01 (foreground color: #211d1e, background color: #ab8900, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

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

<div class="theme-light__forced bar-md p12 fc-dark bg-yellow-300 ba bc-yellow-300">This element will be rendered with light mode colors regardless of theme preference.</div>

Target

.theme-light__forced

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.01 (foreground color: #211d1e, background color: #ab8900, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1