Article Page

ID:: article
Automated score:: 88.9
URL:: https://stackoverflowteams.com/c/gherkins/articles/1543

14 violations: Light: 3Dark: 3HC Light: 4HC Dark: 4

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], div[aria-live]

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], div[aria-live]

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], div[aria-live]

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], div[aria-live]

button-name

Light Critical Go to issue button-name-light

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-upvote-btn mt4 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-selected-classes="bg-orange-200 bc-orange-400 fc-orange-400" data-unselected-classes="bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-selected-tooltip="This article is useful and clear (click again to undo)" data-unselected-tooltip="Mark this post as useful and clear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-a6o9mbdq">

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

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"

button-name

Dark Critical Go to issue button-name-dark

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-upvote-btn mt4 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-selected-classes="bg-orange-200 bc-orange-400 fc-orange-400" data-unselected-classes="bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-selected-tooltip="This article is useful and clear (click again to undo)" data-unselected-tooltip="Mark this post as useful and clear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-a6o9mbdq">

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

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"

button-name

HC Light Critical Go to issue button-name-light-highcontrast

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-upvote-btn mt4 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-selected-classes="bg-orange-200 bc-orange-400 fc-orange-400" data-unselected-classes="bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-selected-tooltip="This article is useful and clear (click again to undo)" data-unselected-tooltip="Mark this post as useful and clear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-a6o9mbdq">

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

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"

button-name

HC Dark Critical Go to issue button-name-dark-highcontrast

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-upvote-btn mt4 bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-controller="s-tooltip" data-s-tooltip-placement="right-end" data-selected-classes="bg-orange-200 bc-orange-400 fc-orange-400" data-unselected-classes="bc-black-225 fc-black-500 h:fc-black-500 f:fc-black-050" data-selected-tooltip="This article is useful and clear (click again to undo)" data-unselected-tooltip="Mark this post as useful and clear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-a6o9mbdq">

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

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"

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

<a class="s-breadcrumbs--link" href="https://stackoverflowteams.com/c/gherkins">

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="/c/gherkins/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="2023-11-27 10:43:53Z"] > .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="2023-11-29 21:27:38Z"]: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="2023-11-29 21:27:38Z"]: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 43 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="/c/gherkins/users/101/" class="s-user-card--link lh-lg" itemprop="author" itemscope="" itemtype="http://schema.org/Person">

Target

a[itemprop="author"]

Summary

Fix any of the following:

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

color-contrast-enhanced

HC Dark Serious Go to issue color-contrast-enhanced-dark-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

<a href="/c/gherkins/users/101/" class="s-user-card--link lh-lg" itemprop="author" itemscope="" itemtype="http://schema.org/Person">

Target

a[itemprop="author"]

Summary

Fix any of the following:

Element has insufficient color contrast of 6.87 (foreground color: #8cbff2, background color: #22313f, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

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(2)

Summary

Fix any of the following:

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

HTML

<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(2)

Summary

Fix any of the following:

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

HTML

<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(2)

Summary

Fix any of the following:

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

HTML

<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(2)

Summary

Fix any of the following:

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

HTML

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