Communities

ID:: communities
Automated score:: 89.7
URL:: https://sem1.dev.stackenterprise.co/communities

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

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]

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]

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]

color-contrast-apca-custom

Light Serious Go to issue color-contrast-apca-custom-light

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

Target

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

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

.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

<p class="s-page-title--description">

Target

.s-page-title--description

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="/communities/new" class="s-btn s-btn__filled">Add Community</a>

Target

.s-btn__filled

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 ml8 mb8 s-btn__outlined" data-controller="communities-toggle-membership-button" data-communities-toggle-membership-button-is-member-value="false" data-communities-toggle-membership-button-url-value="/communities/toggle-membership/4580" data-communities-toggle-membership-button-origin-value="CommunitiesList" data-communities-toggle-membership-button-fkey-value="01526e6a9a46946565be575104e4b840f59e05f3219089449799c1e093fc955d" data-communities-toggle-membership-button-loading-class="is-loading" data-communities-toggle-membership-button-selected-class="is-selected" data-communities-toggle-membership-button-danger-classes-value="s-btn__danger">

Target

.ml8

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

<h3 class="fs-body3 fw-normal mb12">Community-Mg9mJPCCzu</h3>

Target

h3

Summary

Fix any of the following:

Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), 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.s-navigation__vertical

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.s-navigation__vertical

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.s-navigation__vertical

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.s-navigation__vertical

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"

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"

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"

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"