Ask Question

ID:
ask-question
Automated score:
89.6
URL:
https://stackoverflow.com/questions/ask
View JSON file

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

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<div class="ps-relative z-base s-textarea overflow-auto hmn2 w100 p0 d-flex fd-column s-editor-resizable" readonly="" aria-readonly="true">

Target

#problem-details > .z-base[readonly=""][aria-readonly="true"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-readonly="true"

HTML

<div class="ps-relative z-base s-textarea overflow-auto hmn2 w100 p0 d-flex fd-column s-editor-resizable" readonly="" aria-readonly="true">

Target

#problem-results > .z-base[readonly=""][aria-readonly="true"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-readonly="true"

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<div class="ps-relative z-base s-textarea overflow-auto hmn2 w100 p0 d-flex fd-column s-editor-resizable" readonly="" aria-readonly="true">

Target

#problem-details > .z-base[readonly=""][aria-readonly="true"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-readonly="true"

HTML

<div class="ps-relative z-base s-textarea overflow-auto hmn2 w100 p0 d-flex fd-column s-editor-resizable" readonly="" aria-readonly="true">

Target

#problem-results > .z-base[readonly=""][aria-readonly="true"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-readonly="true"

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<div class="ps-relative z-base s-textarea overflow-auto hmn2 w100 p0 d-flex fd-column s-editor-resizable" readonly="" aria-readonly="true">

Target

#problem-details > .z-base[readonly=""][aria-readonly="true"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-readonly="true"

HTML

<div class="ps-relative z-base s-textarea overflow-auto hmn2 w100 p0 d-flex fd-column s-editor-resizable" readonly="" aria-readonly="true">

Target

#problem-results > .z-base[readonly=""][aria-readonly="true"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-readonly="true"

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<div class="ps-relative z-base s-textarea overflow-auto hmn2 w100 p0 d-flex fd-column s-editor-resizable" readonly="" aria-readonly="true">

Target

#problem-details > .z-base[readonly=""][aria-readonly="true"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-readonly="true"

HTML

<div class="ps-relative z-base s-textarea overflow-auto hmn2 w100 p0 d-flex fd-column s-editor-resizable" readonly="" aria-readonly="true">

Target

#problem-results > .z-base[readonly=""][aria-readonly="true"]

Summary

Fix all of the following:

  • ARIA attribute is not allowed: aria-readonly="true"

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

<label for="problem-details" class="d-block s-label c-not-allowed">

Target

label[for="problem-details"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 30.85Lc (foreground color: #c4c6c7, background color: #ffffff, font size: 11.3pt (15px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<p class="s-description mt2 mb6">Introduce the problem and expand on what you put in the title. Minimum 20 characters.</p>

Target

label[for="problem-details"] > .mb6.mt2.s-description

Summary

Fix all of the following:

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

HTML

<label for="problem-results" class="d-block s-label c-not-allowed">

Target

label[for="problem-results"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 30.85Lc (foreground color: #c4c6c7, background color: #ffffff, font size: 11.3pt (15px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<p class="s-description mt2 mb6">Describe what you tried, what you expected to happen, and what actually resulted. Minimum 20 characters.</p>

Target

label[for="problem-results"] > .mb6.mt2.s-description

Summary

Fix all of the following:

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

HTML

<p class="s-label mb2">
                                        Review questions already on Stack Overflow to see if your question is a duplicate.
                                    </p>

Target

.mb2.s-label

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 30.85Lc (foreground color: #c4c6c7, background color: #ffffff, font size: 11.3pt (15px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<p class="s-description mb0">
                                        Clicking on these questions will open them in a new tab for you to review. Your progress here will be saved so you can come back and continue.
                                    </p>

Target

.s-description.mb0

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 23.6Lc (foreground color: #d0d3d5, background color: #ffffff, 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

<label for="problem-details" class="d-block s-label c-not-allowed">

Target

label[for="problem-details"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 17.32Lc (foreground color: #5e6061, background color: #252627, font size: 11.3pt (15px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<p class="s-description mt2 mb6">Introduce the problem and expand on what you put in the title. Minimum 20 characters.</p>

Target

label[for="problem-details"] > .mb6.mt2.s-description

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.12Lc (foreground color: #56585a, background color: #252627, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<label for="problem-results" class="d-block s-label c-not-allowed">

Target

label[for="problem-results"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 17.32Lc (foreground color: #5e6061, background color: #252627, font size: 11.3pt (15px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<p class="s-description mt2 mb6">Describe what you tried, what you expected to happen, and what actually resulted. Minimum 20 characters.</p>

Target

label[for="problem-results"] > .mb6.mt2.s-description

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.12Lc (foreground color: #56585a, background color: #252627, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<p class="s-label mb2">
                                        Review questions already on Stack Overflow to see if your question is a duplicate.
                                    </p>

Target

.mb2.s-label

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 17.32Lc (foreground color: #5e6061, background color: #252627, font size: 11.3pt (15px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<p class="s-description mb0">
                                        Clicking on these questions will open them in a new tab for you to review. Your progress here will be saved so you can come back and continue.
                                    </p>

Target

.s-description.mb0

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.12Lc (foreground color: #56585a, background color: #252627, 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

<a href="https://stackoverflow.com/help/how-to-ask">ask</a>

Target

.mb0.fs-body2 > a:nth-child(1)

Summary

Fix any of the following:

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

HTML

<a href="https://stackoverflow.com/help/on-topic">programming-related question</a>

Target

.mb0.fs-body2 > a:nth-child(2)

Summary

Fix any of the following:

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

HTML

<a href="https://stackexchange.com/sites#technology-traffic">the topics here</a>

Target

.mt0 > a

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.68 (foreground color: #145799, background color: #edf5fd, font size: 11.3pt (15px), 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.com/help/how-to-ask">ask</a>

Target

.mb0.fs-body2 > a:nth-child(1)

Summary

Fix any of the following:

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

HTML

<a href="https://stackoverflow.com/help/on-topic">programming-related question</a>

Target

.mb0.fs-body2 > a:nth-child(2)

Summary

Fix any of the following:

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

HTML

<a href="https://stackexchange.com/sites#technology-traffic">the topics here</a>

Target

.mt0 > a

Summary

Fix any of the following:

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

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="https://stackoverflow.com/help/how-to-ask">ask</a>

Target

.mb0.fs-body2 > a:nth-child(1)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://stackoverflow.com/help/on-topic">programming-related question</a>

Target

.mb0.fs-body2 > a:nth-child(2)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://stackexchange.com/sites#technology-traffic">the topics here</a>

Target

.mt0 > a

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="https://stackoverflow.com/help/how-to-ask">ask</a>

Target

.mb0.fs-body2 > a:nth-child(1)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.46:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #e3e6e8)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://stackoverflow.com/help/on-topic">programming-related question</a>

Target

.mb0.fs-body2 > a:nth-child(2)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.46:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #e3e6e8)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://stackexchange.com/sites#technology-traffic">the topics here</a>

Target

.mt0 > a

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.46:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #e3e6e8)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<div class="s-expandable overflow-auto hmx2 js-question-summary-scroll  d-block" id="js-similar-questions-expandable-_97a9b191-79f4-4642-80d3-93aac972e02a-019B602493FF7336B248F87B46A2BC70">

Target

#js-similar-questions-expandable-_97a9b191-79f4-4642-80d3-93aac972e02a-019B602493FF7336B248F87B46A2BC70

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<div class="s-expandable overflow-auto hmx2 js-question-summary-scroll  d-block" id="js-similar-questions-expandable-_97a9b191-79f4-4642-80d3-93aac972e02a-019B602493FF7336B248F87B46A2BC70">

Target

#js-similar-questions-expandable-_97a9b191-79f4-4642-80d3-93aac972e02a-019B602493FF7336B248F87B46A2BC70

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<div class="s-expandable overflow-auto hmx2 js-question-summary-scroll  d-block" id="js-similar-questions-expandable-_97a9b191-79f4-4642-80d3-93aac972e02a-019B602493FF7336B248F87B46A2BC70">

Target

#js-similar-questions-expandable-_97a9b191-79f4-4642-80d3-93aac972e02a-019B602493FF7336B248F87B46A2BC70

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<div class="s-expandable overflow-auto hmx2 js-question-summary-scroll  d-block" id="js-similar-questions-expandable-_97a9b191-79f4-4642-80d3-93aac972e02a-019B602493FF7336B248F87B46A2BC70">

Target

#js-similar-questions-expandable-_97a9b191-79f4-4642-80d3-93aac972e02a-019B602493FF7336B248F87B46A2BC70

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable