system/components/banners

ID:
system/components/banners
Automated score:
95.9
URL:
https://stackoverflow.design/system/components/banners
View JSON file

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

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

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

section[aria-labelledby="base"] > .overflow-visible.example-container.svelte-1jonvzi > .s-banner.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

section[aria-labelledby="base"] > .overflow-visible.example-container.svelte-1jonvzi > .s-banner__important.mt8.s-banner > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__info.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__info.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__success.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__success.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__warning.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__warning.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__danger.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__danger.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__featured.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__featured.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__activity.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__activity.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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 type="button" class="s-link s-banner--dismiss">

Target

section[aria-labelledby="base"] > .overflow-visible.example-container.svelte-1jonvzi > .s-banner.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

section[aria-labelledby="base"] > .overflow-visible.example-container.svelte-1jonvzi > .s-banner__important.mt8.s-banner > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__info.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__info.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__success.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__success.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__warning.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__warning.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__danger.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__danger.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__featured.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__featured.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__activity.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__activity.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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 type="button" class="s-link s-banner--dismiss">

Target

section[aria-labelledby="base"] > .overflow-visible.example-container.svelte-1jonvzi > .s-banner.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

section[aria-labelledby="base"] > .overflow-visible.example-container.svelte-1jonvzi > .s-banner__important.mt8.s-banner > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__info.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__info.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__success.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__success.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__warning.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__warning.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__danger.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__danger.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__featured.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__featured.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__activity.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__activity.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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 type="button" class="s-link s-banner--dismiss">

Target

section[aria-labelledby="base"] > .overflow-visible.example-container.svelte-1jonvzi > .s-banner.is-pinned[role="presentation"]:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

section[aria-labelledby="base"] > .overflow-visible.example-container.svelte-1jonvzi > .s-banner__important.mt8.s-banner > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__info.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__info.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__success.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__success.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__warning.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__warning.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__danger.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__danger.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__featured.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__featured.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__activity.s-banner.is-pinned:nth-child(1) > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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"

HTML

<button type="button" class="s-link s-banner--dismiss">

Target

.s-banner__activity.s-banner__important.mt8 > .s-banner--actions > .s-banner--dismiss.s-link[type="button"]

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

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

Target

.v-truncate-fade > table > tbody > 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(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(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(7) > 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

div[aria-label="event.detail table"] > table > tbody > tr > 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