Ask Question

ID:
ask-question
Automated score:
89.8
URL:
https://stackoverflowteams.com/c/gherkins/questions/ask
View JSON file

13 violations: Light: 5 Dark: 2 HC Light: 3 HC 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

ol

Summary

Fix any of the following:

  • Element has children which are not allowed: li[tabindex], div[aria-live]

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]

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]

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]

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

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
              <span class="icon-bg iconHeader"></span>
            </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(1) > div > .is-disabled.s-editor-btn[type="button"]

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's default semantics were not overridden with role="none" or role="presentation"

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
            <span class="icon-bg iconBold"></span>
          </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(1) > .is-disabled.s-editor-btn[type="button"]:nth-child(2)

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's default semantics were not overridden with role="none" or role="presentation"

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
            <span class="icon-bg iconItalic"></span>
          </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(1) > .is-disabled.s-editor-btn[type="button"]:nth-child(3)

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's default semantics were not overridden with role="none" or role="presentation"

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
            <span class="icon-bg iconCode"></span>
          </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(1) > .is-disabled.s-editor-btn[type="button"]:nth-child(4)

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's default semantics were not overridden with role="none" or role="presentation"

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
            <span class="icon-bg iconLink"></span>
          </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(2) > .is-disabled.s-editor-btn[type="button"]:nth-child(1)

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's default semantics were not overridden with role="none" or role="presentation"

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
            <span class="icon-bg iconQuote"></span>
          </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(2) > .is-disabled.s-editor-btn[type="button"]:nth-child(2)

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's default semantics were not overridden with role="none" or role="presentation"

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
            <span class="icon-bg iconCodeblock"></span>
          </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(2) > .is-disabled.s-editor-btn[type="button"]:nth-child(3)

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's default semantics were not overridden with role="none" or role="presentation"

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
            <span class="icon-bg iconImage"></span>
          </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(2) > .is-disabled.s-editor-btn[type="button"]:nth-child(4)

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's default semantics were not overridden with role="none" or role="presentation"

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
            <span class="icon-bg iconTable"></span>
          </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(2) > .is-disabled.s-editor-btn[type="button"]:nth-child(5)

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's default semantics were not overridden with role="none" or role="presentation"

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
            <span class="icon-bg iconOrderedList"></span>
          </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(3) > .is-disabled.s-editor-btn[type="button"]:nth-child(1)

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's default semantics were not overridden with role="none" or role="presentation"

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
            <span class="icon-bg iconUnorderedList"></span>
          </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(3) > .is-disabled.s-editor-btn[type="button"]:nth-child(2)

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's default semantics were not overridden with role="none" or role="presentation"

HTML

<button class="s-editor-btn s-btn is-disabled" disabled="" type="button">
            <span class="icon-bg iconHorizontalRule"></span>
          </button>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(3) > .is-disabled.s-editor-btn[type="button"]:nth-child(3)

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's default semantics were not overridden with role="none" or role="presentation"

Ensure every form element has a label. Form elements must have labels. Help URL

HTML

<input type="radio" disabled="">

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .ml24.fc-black-500.ai-center > .s-btn-group--radio > input[type="radio"]:nth-child(1)

Summary

Fix any of the following:

  • Form element does not have an implicit (wrapped) <label>
  • Form element does not have an explicit <label>
  • 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 has no placeholder attribute
  • Element's default semantics were not overridden with role="none" or role="presentation"

HTML

<input type="radio" disabled="" checked="">

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .ml24.fc-black-500.ai-center > .s-btn-group--radio > input[type="radio"]:nth-child(3)

Summary

Fix any of the following:

  • Form element does not have an implicit (wrapped) <label>
  • Form element does not have an explicit <label>
  • 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 has no placeholder attribute
  • Element's default semantics were not overridden with role="none" or role="presentation"

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="https://stackoverflow.help/en/articles/4385980-ask-a-question">Learn more about asking »</a>

Target

.s-prose__sm > .ta-right > a

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.83 (foreground color: #145799, background color: #fdf6e7, font size: 9.8pt (13px), font weight: normal). 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

<a href="https://stackoverflow.help/en/articles/4385980-ask-a-question">Learn more about asking »</a>

Target

.s-prose__sm > .ta-right > a

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.66 (foreground color: #8cbff2, background color: #38311f, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

Ensure links have discernible text. Links must have discernible text. Help URL

HTML

<a class="s-editor-btn s-btn is-disabled" tabindex="-1" href="#" target="_blank">
            <span class="icon-bg iconHelp"></span>
          </a>

Target

#js-stacks-editor-container > .js-fake-stacks-editor.s-textarea.s-input__readonly > .py6.bg-inherit.btr-sm > .overflow-x-auto.px12.py4 > .g16.fl-grow1.ai-center > .s-editor-menu-block.g2.d-flex:nth-child(5) > .is-disabled[href="#"][target="_blank"]

Summary

Fix any of the following:

  • Element does not have 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

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"

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"

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"

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"