Article page

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

13 violations: Light: 4Dark: 4HC 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-tjd7t5xk">

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"

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

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"

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

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"

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

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"

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="disabled-link">Comments disabled on deleted / locked posts / reviews</span>

Target

.disabled-link

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 42.52Lc (foreground color: #a09fa4, background color: #fceded, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

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="disabled-link">Comments disabled on deleted / locked posts / reviews</span>

Target

.disabled-link

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 9.21Lc (foreground color: #5b4d52, background color: #502020, font size: 9.8pt (13px), font weight: 400). 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

<li class="fs-fine tt-uppercase ml12 mt24 mb4 fc-light">
            Private 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

.s-btn__filled

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

<span title="2024-12-17 10:05:18Z" class="relativetime-clean">Dec 17, 2024 at 10:05</span>

Target

span[title="2024-12-17 10:05:18Z"]

Summary

Fix any of the following:

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

HTML

<span title="2025-05-09 09:56:49Z" class="relativetime-clean">May 9, 2025 at 9:56</span>

Target

span[title="2025-05-09 09:56:49Z"]

Summary

Fix any of the following:

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

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="/help/deleted-articles">deleted</a>

Target

a[href$="deleted-articles"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="/users/3/" dir="auto">Test Engineering Admin</a>

Target

a[dir="auto"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="/help/deleted-articles">deleted</a>

Target

a[href$="deleted-articles"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.46:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #e3e6e8)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="/users/3/" dir="auto">Test Engineering Admin</a>

Target

a[dir="auto"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.46:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #e3e6e8)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

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