Article page

ID:
article
Automated score:
92.8
URL:
https://sem1.dev.stackenterprise.co/articles/38759
View JSON file

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

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

HTML

<button class="flex--item d-flex mt4 s-btn ai-center ac-center ba bar-pill c-not-allowed bc-black-150 bg-white fc-black-300" role="button" data-controller="s-tooltip" data-s-tooltip-placement="right-end" aria-describedby="--stacks-s-tooltip-4cpczwif">

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

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 mt4 s-btn ai-center ac-center ba bar-pill c-not-allowed bc-black-150 bg-white fc-black-300" role="button" data-controller="s-tooltip" data-s-tooltip-placement="right-end" aria-describedby="--stacks-s-tooltip-4cpczwif">

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

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 mt4 s-btn ai-center ac-center ba bar-pill c-not-allowed bc-black-150 bg-white fc-black-300" role="button" data-controller="s-tooltip" data-s-tooltip-placement="right-end" aria-describedby="--stacks-s-tooltip-4cpczwif">

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

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 mt4 s-btn ai-center ac-center ba bar-pill c-not-allowed bc-black-150 bg-white fc-black-300" role="button" data-controller="s-tooltip" data-s-tooltip-placement="right-end" aria-describedby="--stacks-s-tooltip-4cpczwif">

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

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

<li class="fs-fine tt-uppercase ml12 mt24 mb4 fc-light">
            Teams
        </li>

Target

.tt-uppercase

Summary

Fix any of the following:

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

HTML

<a class="s-breadcrumbs--link" href="https://sem1.dev.stackenterprise.co">

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="/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="2024-02-29 09:21:48Z"] > .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="2025-05-09 09:51:36Z"]: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="2025-05-09 09:51:36Z"]: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 12 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="/articles/edit/38759" class="flex--item s-btn s-btn__filled">Edit article</a>

Target

a[href="/articles/edit/38759"]

Summary

Fix any of the following:

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

HTML

<a href="/posts/38759/revisions" title="show all edits to this post" class="js-gps-track" data-gps-track="post.click({ item: 4, priv: 17, post_type: 9 })">edited <span title="2025-05-09 09:51:36Z" class="relativetime">May 9 at 9:51</span></a>

Target

a[href$="revisions"]

Summary

Fix any of the following:

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

HTML

<span title="2025-05-09 09:51:36Z" class="relativetime">May 9 at 9:51</span>

Target

.relativetime[title="2025-05-09 09:51:36Z"]

Summary

Fix any of the following:

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

HTML

<a href="/users/3/" class="s-user-card--link lh-lg">
                    Test Engineering Admin <span class="ws-nowrap"><span class="flex--item s-badge ml2 s-badge__admin s-badge__xs mtn2 fs-fine" title="Team admin">Admin</span></span>

                </a>

Target

.s-user-card--link.lh-lg[href="/users/3/"]

Summary

Fix any of the following:

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

HTML

<a href="/users/6/" title="14,601 reputation" class="comment-user" itemprop="url">Test Upvoter</a>

Target

a[href="/users/6/"]

Summary

Fix any of the following:

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

HTML

<a href="/users/8/" title="12,685 reputation" class="comment-user" itemprop="url">Test Question Answerer</a>

Target

a[href="/users/8/"]

Summary

Fix any of the following:

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

HTML

<a class="js-add-link comments-link" title="Use comments to reply to other users or notify them of changes. If you are adding new information, edit your post instead of commenting." href="#" role="button" data-show-first-time-commenting="False">

Target

.js-add-link

Summary

Fix any of the following:

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

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ul class="s-navigation s-navigation__vertical">

Target

nav[role="navigation"] > .s-navigation.s-navigation__vertical

Summary

Fix all of the following:

  • List element has direct children that are not allowed: ul

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ul class="s-navigation s-navigation__vertical">

Target

nav[role="navigation"] > .s-navigation.s-navigation__vertical

Summary

Fix all of the following:

  • List element has direct children that are not allowed: ul

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ul class="s-navigation s-navigation__vertical">

Target

nav[role="navigation"] > .s-navigation.s-navigation__vertical

Summary

Fix all of the following:

  • List element has direct children that are not allowed: ul

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ul class="s-navigation s-navigation__vertical">

Target

nav[role="navigation"] > .s-navigation.s-navigation__vertical

Summary

Fix all of the following:

  • List element has direct children that are not allowed: ul