Article page

18 violations: Light: 5Dark: 4HC Light: 5HC Dark: 4

Ensure elements with an ARIA role that require child roles contain them. Certain ARIA roles must contain particular children. Help URL

HTML

<ol class="s-topbar--content" role="menubar">

Target

ol

Summary

Fix any of the following:

  • Element has children which are not allowed: li[tabindex]

Ensure elements with an ARIA role that require child roles contain them. Certain ARIA roles must contain particular children. Help URL

HTML

<ol class="s-topbar--content" role="menubar">

Target

ol

Summary

Fix any of the following:

  • Element has children which are not allowed: li[tabindex]

Ensure elements with an ARIA role that require child roles contain them. Certain ARIA roles must contain particular children. Help URL

HTML

<ol class="s-topbar--content" role="menubar">

Target

ol

Summary

Fix any of the following:

  • Element has children which are not allowed: li[tabindex]

Ensure elements with an ARIA role that require child roles contain them. Certain ARIA roles must contain particular children. Help URL

HTML

<ol class="s-topbar--content" role="menubar">

Target

ol

Summary

Fix any of the following:

  • Element has children which are not allowed: li[tabindex]

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

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

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

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

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

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

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

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

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"

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

<div class="flex--item pl6">
                Articles
            </div>

Target

#nav-articles > .w100.ai-center.d-flex > .pl6.flex--item

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 55.41Lc (foreground color: #ffffff, background color: #f48225, 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">
            Teams
        </li>

Target

.fs-fine

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="2024-12-17 09:59:54Z"]: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="2024-12-17 09:59:54Z"]: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 10 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.65 (foreground color: #ffffff, background color: #0077cc, 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="2024-12-17 09:59:54Z" class="relativetime">Dec 17, 2024 at 9:59</span></a>

Target

a[href$="revisions"]

Summary

Fix any of the following:

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

HTML

<span title="2024-12-17 09:59:54Z" class="relativetime">Dec 17, 2024 at 9:59</span>

Target

.relativetime[title="2024-12-17 09:59:54Z"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, 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="mod-flair fs-caption ml10" title="Moderator"></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.65 (foreground color: #0077cc, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="/users/6/" title="6,700 reputation" class="comment-user">Test Upvoter</a>

Target

.comment-user

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, 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">Add a comment</a>

Target

.js-add-link

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, 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

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

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

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

.pb8 > .s-navigation.s-navigation__vertical

Summary

Fix all of the following:

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

Ensure <li> elements are used semantically. <li> elements must be contained in a <ul> or <ol>. Help URL

HTML

<li>

Target

ol > li:nth-child(3)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

HTML

<li>
                <a href="/users/logout" class="s-topbar--item js-logout-button" title="Log out of Home Page">
                    Log out
                </a>
            </li>

Target

ol > li:nth-child(9)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

Ensure <li> elements are used semantically. <li> elements must be contained in a <ul> or <ol>. Help URL

HTML

<li>

Target

ol > li:nth-child(3)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

HTML

<li>
                <a href="/users/logout" class="s-topbar--item js-logout-button" title="Log out of Home Page">
                    Log out
                </a>
            </li>

Target

ol > li:nth-child(9)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

Ensure <li> elements are used semantically. <li> elements must be contained in a <ul> or <ol>. Help URL

HTML

<li>

Target

ol > li:nth-child(3)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

HTML

<li>
                <a href="/users/logout" class="s-topbar--item js-logout-button" title="Log out of Home Page">
                    Log out
                </a>
            </li>

Target

ol > li:nth-child(9)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

Ensure <li> elements are used semantically. <li> elements must be contained in a <ul> or <ol>. Help URL

HTML

<li>

Target

ol > li:nth-child(3)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

HTML

<li>
                <a href="/users/logout" class="s-topbar--item js-logout-button" title="Log out of Home Page">
                    Log out
                </a>
            </li>

Target

ol > li:nth-child(9)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"