Dashboard

ID:: dashboard
Automated score:: 90.8
URL:: https://sem1.dev.stackenterprise.co/metrics-dashboard

13 violations: Light: 3Dark: 3HC Light: 4HC Dark: 3

aria-required-children

Light Critical Go to issue aria-required-children-light

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]

HTML

<ul id="trending-content-tablist" class="s-navigation" role="tablist" aria-owns="tab-content-questions tab-articles" data-controller="s-navigation-tablist">

Target

#trending-content-tablist

Summary

Fix any of the following:

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

HTML

<ul id="user-breakdown-tablist" class="s-navigation" role="tablist" aria-owns="tab-questions tab-answers tab-reputation" data-controller="s-navigation-tablist">

Target

#user-breakdown-tablist

Summary

Fix any of the following:

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

aria-required-children

Dark Critical Go to issue aria-required-children-dark

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]

HTML

<ul id="trending-content-tablist" class="s-navigation" role="tablist" aria-owns="tab-content-questions tab-articles" data-controller="s-navigation-tablist">

Target

#trending-content-tablist

Summary

Fix any of the following:

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

HTML

<ul id="user-breakdown-tablist" class="s-navigation" role="tablist" aria-owns="tab-questions tab-answers tab-reputation" data-controller="s-navigation-tablist">

Target

#user-breakdown-tablist

Summary

Fix any of the following:

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

aria-required-children

HC Light Critical Go to issue aria-required-children-light-highcontrast

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]

HTML

<ul id="trending-content-tablist" class="s-navigation" role="tablist" aria-owns="tab-content-questions tab-articles" data-controller="s-navigation-tablist">

Target

#trending-content-tablist

Summary

Fix any of the following:

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

HTML

<ul id="user-breakdown-tablist" class="s-navigation" role="tablist" aria-owns="tab-questions tab-answers tab-reputation" data-controller="s-navigation-tablist">

Target

#user-breakdown-tablist

Summary

Fix any of the following:

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

aria-required-children

HC Dark Critical Go to issue aria-required-children-dark-highcontrast

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]

HTML

<ul id="trending-content-tablist" class="s-navigation" role="tablist" aria-owns="tab-content-questions tab-articles" data-controller="s-navigation-tablist">

Target

#trending-content-tablist

Summary

Fix any of the following:

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

HTML

<ul id="user-breakdown-tablist" class="s-navigation" role="tablist" aria-owns="tab-questions tab-answers tab-reputation" data-controller="s-navigation-tablist">

Target

#user-breakdown-tablist

Summary

Fix any of the following:

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

color-contrast-enhanced

HC Light Serious Go to issue color-contrast-enhanced-light-highcontrast

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

.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 href="metrics-dashboard/connectivity" class="s-link s-link__muted js-header-link-dashboard" aria-current="false">Connectivity</a>

Target

.s-link__muted

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

<label for="trendlines-dates" class="">Compare dates</label>

Target

label[for="trendlines-dates"]

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

<label for="trendlines-benchmark" class="">Benchmarks</label>

Target

label[for="trendlines-benchmark"]

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

list

Light Serious Go to issue list-light

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__vertical.s-navigation

Summary

Fix all of the following:

List element has direct children that are not allowed: ul

list

Dark Serious Go to issue list-dark

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__vertical.s-navigation

Summary

Fix all of the following:

List element has direct children that are not allowed: ul

list

HC Light Serious Go to issue list-light-highcontrast

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__vertical.s-navigation

Summary

Fix all of the following:

List element has direct children that are not allowed: ul

list

HC Dark Serious Go to issue list-dark-highcontrast

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__vertical.s-navigation

Summary

Fix all of the following:

List element has direct children that are not allowed: ul

listitem

Light Serious Go to issue listitem-light

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"

HTML

<li class="js-widget" data-widgetid="0">

Target

.flex--item8 > .js-widget[data-widgetid="0"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="1">

Target

.flex--item8 > .js-widget[data-widgetid="1"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="2">

Target

.flex--item8 > .js-widget[data-widgetid="2"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="3">

Target

.flex--item8 > .js-widget[data-widgetid="3"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="4">

Target

li[data-widgetid="4"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="5">

Target

li[data-widgetid="5"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="6">

Target

li[data-widgetid="6"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="7">

Target

li[data-widgetid="7"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="0">

Target

.flex--item4 > .js-widget[data-widgetid="0"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="1">

Target

.flex--item4 > .js-widget[data-widgetid="1"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="2">

Target

.flex--item4 > .js-widget[data-widgetid="2"]

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-content-questions" aria-selected="true" aria-controls="panel-content-questions" class="s-navigation--item is-selected ">
                    Questions
                </button>
            </li>

Target

#trending-content-tablist > li:nth-child(1)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-articles" aria-selected="false" aria-controls="panel-content-articles" tabindex="-1" class="s-navigation--item ">
                    Articles
                </button>
            </li>

Target

#trending-content-tablist > li:nth-child(2)

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="3">

Target

.flex--item4 > .js-widget[data-widgetid="3"]

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-questions" aria-selected="true" aria-controls="panel-user-questions" class="s-navigation--item is-selected ">
                    Questions
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(1)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-answers" aria-selected="false" aria-controls="panel-user-answers" tabindex="-1" class="s-navigation--item ">
                    Answers
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(2)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-reputation" aria-selected="false" aria-controls="panel-user-reputation" tabindex="-1" class="s-navigation--item ">
                    Reputation
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(3)

Summary

Fix any of the following:

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

listitem

Dark Serious Go to issue listitem-dark

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"

HTML

<li class="js-widget" data-widgetid="0">

Target

.flex--item8 > .js-widget[data-widgetid="0"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="1">

Target

.flex--item8 > .js-widget[data-widgetid="1"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="2">

Target

.flex--item8 > .js-widget[data-widgetid="2"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="3">

Target

.flex--item8 > .js-widget[data-widgetid="3"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="4">

Target

li[data-widgetid="4"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="5">

Target

li[data-widgetid="5"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="6">

Target

li[data-widgetid="6"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="7">

Target

li[data-widgetid="7"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="0">

Target

.flex--item4 > .js-widget[data-widgetid="0"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="1">

Target

.flex--item4 > .js-widget[data-widgetid="1"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="2">

Target

.flex--item4 > .js-widget[data-widgetid="2"]

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-content-questions" aria-selected="true" aria-controls="panel-content-questions" class="s-navigation--item is-selected ">
                    Questions
                </button>
            </li>

Target

#trending-content-tablist > li:nth-child(1)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-articles" aria-selected="false" aria-controls="panel-content-articles" tabindex="-1" class="s-navigation--item ">
                    Articles
                </button>
            </li>

Target

#trending-content-tablist > li:nth-child(2)

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="3">

Target

.flex--item4 > .js-widget[data-widgetid="3"]

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-questions" aria-selected="true" aria-controls="panel-user-questions" class="s-navigation--item is-selected ">
                    Questions
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(1)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-answers" aria-selected="false" aria-controls="panel-user-answers" tabindex="-1" class="s-navigation--item ">
                    Answers
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(2)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-reputation" aria-selected="false" aria-controls="panel-user-reputation" tabindex="-1" class="s-navigation--item ">
                    Reputation
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(3)

Summary

Fix any of the following:

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

listitem

HC Light Serious Go to issue listitem-light-highcontrast

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"

HTML

<li class="js-widget" data-widgetid="0">

Target

.flex--item8 > .js-widget[data-widgetid="0"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="1">

Target

.flex--item8 > .js-widget[data-widgetid="1"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="2">

Target

.flex--item8 > .js-widget[data-widgetid="2"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="3">

Target

.flex--item8 > .js-widget[data-widgetid="3"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="4">

Target

li[data-widgetid="4"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="5">

Target

li[data-widgetid="5"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="6">

Target

li[data-widgetid="6"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="7">

Target

li[data-widgetid="7"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="0">

Target

.flex--item4 > .js-widget[data-widgetid="0"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="1">

Target

.flex--item4 > .js-widget[data-widgetid="1"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="2">

Target

.flex--item4 > .js-widget[data-widgetid="2"]

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-content-questions" aria-selected="true" aria-controls="panel-content-questions" class="s-navigation--item is-selected ">
                    Questions
                </button>
            </li>

Target

#trending-content-tablist > li:nth-child(1)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-articles" aria-selected="false" aria-controls="panel-content-articles" tabindex="-1" class="s-navigation--item ">
                    Articles
                </button>
            </li>

Target

#trending-content-tablist > li:nth-child(2)

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="3">

Target

.flex--item4 > .js-widget[data-widgetid="3"]

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-questions" aria-selected="true" aria-controls="panel-user-questions" class="s-navigation--item is-selected ">
                    Questions
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(1)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-answers" aria-selected="false" aria-controls="panel-user-answers" tabindex="-1" class="s-navigation--item ">
                    Answers
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(2)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-reputation" aria-selected="false" aria-controls="panel-user-reputation" tabindex="-1" class="s-navigation--item ">
                    Reputation
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(3)

Summary

Fix any of the following:

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

listitem

HC Dark Serious Go to issue listitem-dark-highcontrast

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"

HTML

<li class="js-widget" data-widgetid="0">

Target

.flex--item8 > .js-widget[data-widgetid="0"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="1">

Target

.flex--item8 > .js-widget[data-widgetid="1"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="2">

Target

.flex--item8 > .js-widget[data-widgetid="2"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="3">

Target

.flex--item8 > .js-widget[data-widgetid="3"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="4">

Target

li[data-widgetid="4"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="5">

Target

li[data-widgetid="5"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="6">

Target

li[data-widgetid="6"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="7">

Target

li[data-widgetid="7"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="0">

Target

.flex--item4 > .js-widget[data-widgetid="0"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="1">

Target

.flex--item4 > .js-widget[data-widgetid="1"]

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="2">

Target

.flex--item4 > .js-widget[data-widgetid="2"]

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-content-questions" aria-selected="true" aria-controls="panel-content-questions" class="s-navigation--item is-selected ">
                    Questions
                </button>
            </li>

Target

#trending-content-tablist > li:nth-child(1)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-articles" aria-selected="false" aria-controls="panel-content-articles" tabindex="-1" class="s-navigation--item ">
                    Articles
                </button>
            </li>

Target

#trending-content-tablist > li:nth-child(2)

Summary

Fix any of the following:

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

HTML

<li class="js-widget" data-widgetid="3">

Target

.flex--item4 > .js-widget[data-widgetid="3"]

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-questions" aria-selected="true" aria-controls="panel-user-questions" class="s-navigation--item is-selected ">
                    Questions
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(1)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-answers" aria-selected="false" aria-controls="panel-user-answers" tabindex="-1" class="s-navigation--item ">
                    Answers
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(2)

Summary

Fix any of the following:

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

HTML

<li>
                <button type="button" role="tab" id="tab-reputation" aria-selected="false" aria-controls="panel-user-reputation" tabindex="-1" class="s-navigation--item ">
                    Reputation
                </button>
            </li>

Target

#user-breakdown-tablist > li:nth-child(3)

Summary

Fix any of the following:

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