system/components/buttons

ID:
system/components/buttons
Automated score:
95.4
URL:
https://stackoverflow.design/system/components/buttons
View JSON file

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

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a href="#" class="s-btn ws-nowrap is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(1) > .px4.ta-center.va-middle:nth-child(4) > .is-selected.ws-nowrap[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__clear is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(2) > .px4.ta-center.va-middle:nth-child(4) > .is-selected.s-btn__clear[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__danger is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(3) > .px4.ta-center.va-middle:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__danger s-btn__clear is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(4) > .px4.ta-center.va-middle:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__featured is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

.s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__tonal is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

.s-btn__tonal.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a href="#" class="s-btn ws-nowrap is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(1) > .px4.ta-center.va-middle:nth-child(4) > .is-selected.ws-nowrap[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__clear is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(2) > .px4.ta-center.va-middle:nth-child(4) > .is-selected.s-btn__clear[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__danger is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(3) > .px4.ta-center.va-middle:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__danger s-btn__clear is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(4) > .px4.ta-center.va-middle:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__featured is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

.s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__tonal is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

.s-btn__tonal.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a href="#" class="s-btn ws-nowrap is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(1) > .px4.ta-center.va-middle:nth-child(4) > .is-selected.ws-nowrap[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__clear is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(2) > .px4.ta-center.va-middle:nth-child(4) > .is-selected.s-btn__clear[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__danger is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(3) > .px4.ta-center.va-middle:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__danger s-btn__clear is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(4) > .px4.ta-center.va-middle:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__featured is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

.s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__tonal is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

.s-btn__tonal.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a href="#" class="s-btn ws-nowrap is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(1) > .px4.ta-center.va-middle:nth-child(4) > .is-selected.ws-nowrap[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__clear is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(2) > .px4.ta-center.va-middle:nth-child(4) > .is-selected.s-btn__clear[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__danger is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(3) > .px4.ta-center.va-middle:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__danger s-btn__clear is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

tr:nth-child(4) > .px4.ta-center.va-middle:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__featured is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

.s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="s-btn ws-nowrap s-btn__tonal is-selected" aria-pressed="true"><!--[!--><!--]--><!--[--><!---->Ask question<!----><!--]--><!----></a>

Target

.s-btn__tonal.is-selected[href="#"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-pressed="true"

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

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

Target

tr:nth-child(1) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(1) > td:nth-child(4) > .fc-black-350

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

HTML

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

Target

tr:nth-child(2) > td:nth-child(4) > .fc-black-350

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

HTML

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

Target

tr:nth-child(3) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(4) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(5) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(6) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(8) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(9) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(10) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(11) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(12) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(13) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(14) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(15) > td:nth-child(3) > .fc-black-350

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

HTML

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

Target

tr:nth-child(16) > td:nth-child(3) > .fc-black-350

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

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: 10.5pt (14px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="/system/components/links">link</a>

Target

a[href$="links"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 13.31Lc (foreground color: #0000ee, background color: #141414, font size: 10.5pt (14px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc