For You

ID:
for-you
Automated score:
88.2
URL:
https://sem1.dev.stackenterprise.co/for-you
View JSON file

16 violations: Light: 4Dark: 4HC Light: 4HC 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]

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="s-post-summary--stats-item-number">1</span>

Target

div[title="Score of 1"] > .s-post-summary--stats-item-number

Summary

Fix all of the following:

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

HTML

<span class="s-post-summary--stats-item-unit">vote</span>

Target

div[title="Score of 1"] > .s-post-summary--stats-item-unit

Summary

Fix all of the following:

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

HTML

<span class="s-post-summary--stats-item-number">1</span>

Target

#question-summary-38756 > .s-post-summary--stats.js-post-summary-stats > .has-answers.has-accepted-answer.s-post-summary--stats-item > .s-post-summary--stats-item-number

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 53.34Lc (foreground color: #898f96, background color: #f3f4f5, font size: 9.8pt (13px), font weight: 500). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-post-summary--stats-item-unit">answer</span>

Target

#question-summary-38756 > .s-post-summary--stats.js-post-summary-stats > .has-answers.has-accepted-answer.s-post-summary--stats-item > .s-post-summary--stats-item-unit

Summary

Fix all of the following:

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

HTML

<span class="s-post-summary--stats-item-number">14</span>

Target

div[title="14 views"] > .s-post-summary--stats-item-number

Summary

Fix all of the following:

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

HTML

<span class="s-post-summary--stats-item-unit">views</span>

Target

div[title="14 views"] > .s-post-summary--stats-item-unit

Summary

Fix all of the following:

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

HTML

<a href="/questions/38756" class="s-link">Can I use python in our codebase?</a>

Target

a[href="/questions/38756"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.86Lc (foreground color: #898f96, background color: #f9fafa, font size: 12.8pt (17px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="/users/23/" class="flex--item">Test User7</a>

Target

.s-user-card--link.gs4.d-flex > a[href="/users/23/"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.86Lc (foreground color: #898f96, background color: #f9fafa, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

#question-summary-38756 > .s-post-summary--content > .s-post-summary--meta > .s-user-card__minimal.s-user-card[aria-live="polite"] > .s-user-card--info > .s-user-card--awards > .s-user-card--rep > .todo-no-class-here[title="reputation score "][dir="ltr"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.86Lc (foreground color: #898f96, background color: #f9fafa, font size: 9.0pt (12px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<time class="s-user-card--time">asked <span title="2024-02-29 09:15:29Z" class="relativetime">Feb 29 at 9:15</span></time>

Target

#question-summary-38756 > .s-post-summary--content > .s-post-summary--meta > .s-user-card__minimal.s-user-card[aria-live="polite"] > time

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.86Lc (foreground color: #898f96, background color: #f9fafa, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.86Lc (foreground color: #898f96, background color: #f9fafa, font size: 9.0pt (12px), 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="s-post-summary--stats-item-number">1</span>

Target

div[title="Score of 1"] > .s-post-summary--stats-item-number

Summary

Fix all of the following:

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

HTML

<span class="s-post-summary--stats-item-unit">vote</span>

Target

div[title="Score of 1"] > .s-post-summary--stats-item-unit

Summary

Fix all of the following:

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

HTML

<span class="s-post-summary--stats-item-number">1</span>

Target

#question-summary-38756 > .s-post-summary--stats.js-post-summary-stats > .has-answers.has-accepted-answer.s-post-summary--stats-item > .s-post-summary--stats-item-number

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 47.15Lc (foreground color: #a1a5a8, background color: #323436, font size: 9.8pt (13px), font weight: 500). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-post-summary--stats-item-unit">answer</span>

Target

#question-summary-38756 > .s-post-summary--stats.js-post-summary-stats > .has-answers.has-accepted-answer.s-post-summary--stats-item > .s-post-summary--stats-item-unit

Summary

Fix all of the following:

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

HTML

<span class="s-post-summary--stats-item-number">14</span>

Target

div[title="14 views"] > .s-post-summary--stats-item-number

Summary

Fix all of the following:

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

HTML

<span class="s-post-summary--stats-item-unit">views</span>

Target

div[title="14 views"] > .s-post-summary--stats-item-unit

Summary

Fix all of the following:

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

HTML

<a href="/questions/38756" class="s-link">Can I use python in our codebase?</a>

Target

a[href="/questions/38756"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.56Lc (foreground color: #a1a5a8, background color: #2d2e2f, font size: 12.8pt (17px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="/questions/tagged/72" class="s-tag post-tag flex--item mt0 js-tagname-python" title="show questions tagged 'python'" aria-label="show questions tagged 'python'" rel="tag" data-tag-menu-tagname="72" aria-labelledby="tag-python-tooltip-container" data-tag-menu-origin="Unknown">python</a>

Target

#question-summary-38756 > .s-post-summary--content > .s-post-summary--meta > .t-python.s-post-summary--meta-tags.d-inline-block > .ml0.list-ls-none.js-post-tag-list-wrapper > .mr4.js-post-tag-list-item.d-inline > .js-tagname-python[href="/questions/tagged/72"][title="show questions tagged 'python'"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57.82Lc (foreground color: #b6b8ba, background color: #323436, font size: 9.0pt (12px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="/users/23/" class="flex--item">Test User7</a>

Target

.s-user-card--link.gs4.d-flex > a[href="/users/23/"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.56Lc (foreground color: #a1a5a8, background color: #2d2e2f, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

#question-summary-38756 > .s-post-summary--content > .s-post-summary--meta > .s-user-card__minimal.s-user-card[aria-live="polite"] > .s-user-card--info > .s-user-card--awards > .s-user-card--rep > .todo-no-class-here[title="reputation score "][dir="ltr"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.56Lc (foreground color: #a1a5a8, background color: #2d2e2f, font size: 9.0pt (12px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<time class="s-user-card--time">asked <span title="2024-02-29 09:15:29Z" class="relativetime">Feb 29 at 9:15</span></time>

Target

#question-summary-38756 > .s-post-summary--content > .s-post-summary--meta > .s-user-card__minimal.s-user-card[aria-live="polite"] > time

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.56Lc (foreground color: #a1a5a8, background color: #2d2e2f, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.56Lc (foreground color: #a1a5a8, background color: #2d2e2f, font size: 9.0pt (12px), 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

<h4 class="js-feed-item-title ">Your question is due for a Content Health review</h4>

Target

.bg-black-100 > .bb.px16.pt4 > .md\:as-start.as-center.flex--item > h4

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

<p class="flex--item ws-nowrap" title="2024-12-04 04:30:00Z">Dec 4 at 4:30</p>

Target

p[title="2024-12-04 04:30:00Z"]

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="/questions/tagged/72" class="s-tag post-tag flex--item mt0 js-tagname-python" title="show questions tagged 'python'" aria-label="show questions tagged 'python'" rel="tag" data-tag-menu-tagname="72" aria-labelledby="tag-python-tooltip-container" data-tag-menu-origin="Unknown">python</a>

Target

#question-summary-38756 > .s-post-summary--content > .s-post-summary--meta > .t-python.s-post-summary--meta-tags.d-inline-block > .ml0.list-ls-none.js-post-tag-list-wrapper > .mr4.js-post-tag-list-item.d-inline > .js-tagname-python[href="/questions/tagged/72"][title="show questions tagged 'python'"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.6 (foreground color: #6b6f72, background color: #f3f4f5, font size: 9.0pt (12px), font weight: bold). 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

<span class="s-post-summary--stats-item-unit">vote</span>

Target

div[title="Score of 1"] > .s-post-summary--stats-item-unit

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.48 (foreground color: #a1a5a8, background color: #2d2e2f, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<span class="s-post-summary--stats-item-unit">answer</span>

Target

#question-summary-38756 > .s-post-summary--stats.js-post-summary-stats > .has-answers.has-accepted-answer.s-post-summary--stats-item > .s-post-summary--stats-item-unit

Summary

Fix any of the following:

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

HTML

<span class="s-post-summary--stats-item-number">14</span>

Target

div[title="14 views"] > .s-post-summary--stats-item-number

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.48 (foreground color: #a1a5a8, background color: #2d2e2f, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<span class="s-post-summary--stats-item-unit">views</span>

Target

div[title="14 views"] > .s-post-summary--stats-item-unit

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.48 (foreground color: #a1a5a8, background color: #2d2e2f, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="/questions/38756" class="s-link">Can I use python in our codebase?</a>

Target

a[href="/questions/38756"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.48 (foreground color: #a1a5a8, background color: #2d2e2f, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="/questions/tagged/72" class="s-tag post-tag flex--item mt0 js-tagname-python" title="show questions tagged 'python'" aria-label="show questions tagged 'python'" rel="tag" data-tag-menu-tagname="72" aria-labelledby="tag-python-tooltip-container" data-tag-menu-origin="Unknown">python</a>

Target

#question-summary-38756 > .s-post-summary--content > .s-post-summary--meta > .t-python.s-post-summary--meta-tags.d-inline-block > .ml0.list-ls-none.js-post-tag-list-wrapper > .mr4.js-post-tag-list-item.d-inline > .js-tagname-python[href="/questions/tagged/72"][title="show questions tagged 'python'"]

Summary

Fix any of the following:

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

HTML

<a href="/users/23/" class="flex--item">Test User7</a>

Target

.s-user-card--link.gs4.d-flex > a[href="/users/23/"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.48 (foreground color: #a1a5a8, background color: #2d2e2f, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

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

Target

#question-summary-38756 > .s-post-summary--content > .s-post-summary--meta > .s-user-card__minimal.s-user-card[aria-live="polite"] > .s-user-card--info > .s-user-card--awards > .s-user-card--rep > .todo-no-class-here[title="reputation score "][dir="ltr"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.48 (foreground color: #a1a5a8, background color: #2d2e2f, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 7:1

HTML

<time class="s-user-card--time">asked <span title="2024-02-29 09:15:29Z" class="relativetime">Feb 29 at 9:15</span></time>

Target

#question-summary-38756 > .s-post-summary--content > .s-post-summary--meta > .s-user-card__minimal.s-user-card[aria-live="polite"] > time

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.48 (foreground color: #a1a5a8, background color: #2d2e2f, 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 at 9:15</span>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.48 (foreground color: #a1a5a8, background color: #2d2e2f, font size: 9.0pt (12px), 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"