Article page

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

20 violations: Light: 5Dark: 5HC Light: 5HC Dark: 5

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

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-9mu9yp4r">

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

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-9mu9yp4r">

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

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-9mu9yp4r">

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

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-9mu9yp4r">

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

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 49.76Lc (foreground color: #252627, background color: #f48225, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

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 all of the following:

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

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 all of the following:

  • Element has insufficient APCA custom level contrast of 34.75Lc (foreground color: #368ad3, background color: #252627, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

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 all of the following:

  • Element has insufficient APCA custom level contrast of 34.75Lc (foreground color: #368ad3, background color: #252627, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

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 all of the following:

  • Element has insufficient APCA custom level contrast of 34.75Lc (foreground color: #368ad3, background color: #252627, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="/users/23/" class="s-user-card--link lh-lg" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
                    Test User7 <span class="ws-nowrap"></span>

                        <span class="d-none" itemprop="name">Test User7</span>
                </a>

Target

a[itemprop="author"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 30.89Lc (foreground color: #368ad3, background color: #1c3854, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.comment-user

Summary

Fix all of the following:

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

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 all of the following:

  • Element has insufficient APCA custom level contrast of 34.75Lc (foreground color: #368ad3, background color: #252627, 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="8,376 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 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="/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 5.73 (foreground color: #000000, background color: #368ad3, 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 5.73 (foreground color: #368ad3, background color: #000000, 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 5.73 (foreground color: #368ad3, background color: #000000, 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 5.73 (foreground color: #368ad3, background color: #000000, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

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

Target

.comment-user

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.73 (foreground color: #368ad3, background color: #000000, 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 5.73 (foreground color: #368ad3, background color: #000000, 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"