Question page

ID:
question
Automated score:
89.1
URL:
https://sem1.dev.stackenterprise.co/questions/38756
View JSON file

15 violations: Light: 4Dark: 4HC Light: 4HC Dark: 3

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

.s-topbar--content

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

.s-topbar--content

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

.s-topbar--content

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

.s-topbar--content

Summary

Fix any of the following:

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

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">
                Questions
            </div>

Target

#nav-questions > .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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-w19etlr7"] > .js-add-reaction-label.fc-black-350.pl6

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-0paem3k5"] > .js-add-reaction-label.fc-black-350.pl6

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 41.51Lc (foreground color: #a7adb4, background color: #f9fafa, 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="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-w19etlr7"] > .js-add-reaction-label.fc-black-350.pl6

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-0paem3k5"] > .js-add-reaction-label.fc-black-350.pl6

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.01Lc (foreground color: #acb3b9, background color: #2d2e2f, 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

.mb4

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 href="/questions/ask" class="ws-nowrap s-btn s-btn__filled">
        Ask a question
    </a>

Target

.aside-cta.print\:d-none.ml12 > a[href$="ask"]

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

<button type="button" class="s-btn s-btn__sm p4 my2 va-middle js-inline-mentions-edit-link">
                        Edit
                    </button>

Target

.js-inline-mentions-edit-link

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

<button id="edit-tags" class="s-btn s-btn__sm p4" title="Edit this question's tags">Edit</button>

Target

#edit-tags

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

<div class="user-action-time fl-grow1">
            asked <span title="2024-02-29 09:15:29Z" class="relativetime">Feb 29, 2024 at 9:15</span>
        </div>

Target

.owner > .user-info > .d-flex > .user-action-time.fl-grow1

Summary

Fix any of the following:

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

HTML

<span title="2024-02-29 09:15:29Z" class="relativetime">Feb 29, 2024 at 9:15</span>

Target

.relativetime[title="2024-02-29 09:15:29Z"]

Summary

Fix any of the following:

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

HTML

<span class="reputation-score" title="reputation score " dir="ltr">48</span>

Target

.owner > .user-info > .user-details[itemprop="author"][itemtype="http://schema.org/Person"] > .-flair > .reputation-score[title="reputation score "][dir="ltr"]

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-w19etlr7"] > .js-add-reaction-label.fc-black-350.pl6

Summary

Fix any of the following:

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

HTML

<a href="/users/3/" title="5,358 reputation" class="comment-user">Test Engineering Admin</a>

Target

#comment-33295 > .comment-text.js-comment-text-and-form > .comment-body.js-comment-edit-hide > .d-inline-flex.ai-center > .comment-user[href="/users/3/"][title="5,358 reputation"]

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

#comments-link-38756 > .js-add-link.comments-link[role="button"]

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 href="/users/9/" itemprop="url" dir="auto">Test Moderator To Be</a>

Target

a[href="/users/9/"][dir="auto"][itemprop="url"]

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

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-0paem3k5"] > .js-add-reaction-label.fc-black-350.pl6

Summary

Fix any of the following:

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

HTML

<a href="/users/3/" title="5,358 reputation" class="comment-user">Test Engineering Admin</a>

Target

#comment-33298 > .comment-text.js-comment-text-and-form > .comment-body.js-comment-edit-hide > .d-inline-flex.ai-center > .comment-user[href="/users/3/"][title="5,358 reputation"]

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 ask for more information or suggest improvements. Say thanks by reacting to the answer." href="#" role="button">Add a comment</a>

Target

#comments-link-38757 > .js-add-link.comments-link[role="button"]

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

<button class="js-add-another-answer s-btn s-btn__filled" data-confirm-text="Are you sure you want to answer your own question?

If you're responding to answers left on your question, enter comments under each answer.

If you need to add details to your question, use the edit link under your question." data-confirm-use-fancy="False" data-confirm-fancy-title="" data-confirm-fancy-body="" data-confirm-fancy-accept-button="">

Target

.js-add-another-answer

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

<button class="s-btn s-btn__link js-fetch-add-to-collection-modal mt10 py8">
            <svg aria-hidden="true" class="va-text-top svg-icon iconPlusSm" width="14" height="14" viewBox="0 0 14 14"><path d="M8 2H6v4H2v2h4v4h2V8h4V6H8z"></path></svg> Add this question to a collection
        </button>

Target

.js-fetch-add-to-collection-modal

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 href="https://sem1.dev.stackenterprise.co/questions/16597?rq=1" class="question-hyperlink">solid Gloves Plastic Oriental Center</a>

Target

div[data-question-id="16597"] > .question-hyperlink

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 href="https://sem1.dev.stackenterprise.co/questions/26496?rq=1" class="question-hyperlink">indigo navigating overriding lime Modern</a>

Target

div[data-question-id="26496"] > .question-hyperlink

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 href="https://sem1.dev.stackenterprise.co/questions/27946?rq=1" class="question-hyperlink">Intuitive virtual initiatives Borders B2B payment Soft</a>

Target

div[data-question-id="27946"] > .question-hyperlink

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 href="https://sem1.dev.stackenterprise.co/questions/30168?rq=1" class="question-hyperlink">Buckinghamshire Nepal New Granite Home Buckinghamshire Lek indigo innovative compress Cambridgeshire Corporate</a>

Target

div[data-question-id="30168"] > .question-hyperlink

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 href="https://sem1.dev.stackenterprise.co/questions/32985?rq=1" class="question-hyperlink">Administrator Borders Tuna Tactics AI Direct Texas Walks</a>

Target

div[data-question-id="32985"] > .question-hyperlink

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 href="https://sem1.dev.stackenterprise.co/questions/34129?rq=1" class="question-hyperlink">encompassing system of Antillian generate Locks Tuna auxiliary Glens Mauritius Handmade Oriental transition</a>

Target

div[data-question-id="34129"] > .question-hyperlink

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 href="https://sem1.dev.stackenterprise.co/questions/35844?rq=1" class="question-hyperlink">Bespoke Maryland Trinidad Coordinator Borders</a>

Target

div[data-question-id="35844"] > .question-hyperlink

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

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

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

HTML

<li>

Target

.s-topbar--content > 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

.s-topbar--content > 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

.s-topbar--content > 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

.s-topbar--content > 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

.s-topbar--content > 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

.s-topbar--content > 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

.s-topbar--content > 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

.s-topbar--content > li:nth-child(9)

Summary

Fix any of the following:

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