Article Page

ID:
article
Automated score:
94.7
URL:
https://stackoverflowteams.com/c/gherkins/articles/1543
View JSON file

6 violations: Light: 1Dark: 1HC Light: 2HC Dark: 2

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

HTML

<button class="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-upvote-btn mt4 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-selected-classes="bg-orange-200 bc-orange-400 fc-orange-400" data-unselected-classes="bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-selected-tooltip="This article is useful and clear (click again to undo)" data-unselected-tooltip="Mark this post as useful and clear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-f1u9jzfk">

Target

.ac-center

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 class="s-btn s-btn__outlined bar-circle p12 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" type="button" aria-pressed="false" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-action="s-modal#show" aria-describedby="--stacks-s-tooltip-v81t0f3c">

Target

.bar-circle

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="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-upvote-btn mt4 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-selected-classes="bg-orange-200 bc-orange-400 fc-orange-400" data-unselected-classes="bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-selected-tooltip="This article is useful and clear (click again to undo)" data-unselected-tooltip="Mark this post as useful and clear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-f1u9jzfk">

Target

.ac-center

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 class="s-btn s-btn__outlined bar-circle p12 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" type="button" aria-pressed="false" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-action="s-modal#show" aria-describedby="--stacks-s-tooltip-v81t0f3c">

Target

.bar-circle

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="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-upvote-btn mt4 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-selected-classes="bg-orange-200 bc-orange-400 fc-orange-400" data-unselected-classes="bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-selected-tooltip="This article is useful and clear (click again to undo)" data-unselected-tooltip="Mark this post as useful and clear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-f1u9jzfk">

Target

.ac-center

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 class="s-btn s-btn__outlined bar-circle p12 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" type="button" aria-pressed="false" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-action="s-modal#show" aria-describedby="--stacks-s-tooltip-v81t0f3c">

Target

.bar-circle

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="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-upvote-btn mt4 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-selected-classes="bg-orange-200 bc-orange-400 fc-orange-400" data-unselected-classes="bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-selected-tooltip="This article is useful and clear (click again to undo)" data-unselected-tooltip="Mark this post as useful and clear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-f1u9jzfk">

Target

.ac-center

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 class="s-btn s-btn__outlined bar-circle p12 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" type="button" aria-pressed="false" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-action="s-modal#show" aria-describedby="--stacks-s-tooltip-v81t0f3c">

Target

.bar-circle

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

<a class="s-breadcrumbs--link" href="https://stackoverflowteams.com/c/gherkins">

Target

.s-breadcrumbs--item:nth-child(1) > .s-breadcrumbs--link

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a class="s-breadcrumbs--link" href="/c/gherkins/articles">Articles</a>

Target

.s-breadcrumbs--link[href$="articles"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<span class="fc-black-400 mr2">Created</span>

Target

.ws-nowrap.flex--item[title="2023-11-27 10:43:53Z"] > .fc-black-400.mr2

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<span class="fc-black-400 mr2">Active</span>

Target

.ws-nowrap.flex--item[title="2023-11-29 21:27:38Z"]:nth-child(2) > .fc-black-400.mr2

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<span class="fc-black-400 mr2">Last edited</span>

Target

.ws-nowrap.flex--item[title="2023-11-29 21:27:38Z"]:nth-child(3) > .fc-black-400.mr2

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<span class="fc-black-400 mr2">Viewed</span>

Target

div[title="Viewed 44 times"] > .fc-black-400.mr2

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="/c/gherkins/users/101/" class="s-user-card--link lh-lg" itemprop="author" itemscope="" itemtype="http://schema.org/Person">

Target

a[itemprop="author"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.68 (foreground color: #145799, background color: #edf5fd, font size: 9.0pt (12px), 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

<a href="/c/gherkins/users/101/" class="s-user-card--link lh-lg" itemprop="author" itemscope="" itemtype="http://schema.org/Person">

Target

a[itemprop="author"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.87 (foreground color: #8cbff2, background color: #22313f, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1