Ask Question

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

21 violations: Light: 5 Dark: 6 HC Light: 5 HC Dark: 5

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 elements with an ARIA role that require parent roles are contained by them. Certain ARIA roles must be contained by particular parents. Help URL

HTML

<a href="#" class="s-topbar--menu-btn js-left-sidebar-toggle" role="menuitem" aria-haspopup="true" aria-controls="left-sidebar" aria-expanded="false"><span></span></a>

Target

.s-topbar--menu-btn

Summary

Fix any of the following:

  • Required ARIA parents role not present: menu, menubar, group

Ensure elements with an ARIA role that require parent roles are contained by them. Certain ARIA roles must be contained by particular parents. Help URL

HTML

<a href="#" class="s-topbar--menu-btn js-left-sidebar-toggle" role="menuitem" aria-haspopup="true" aria-controls="left-sidebar" aria-expanded="false"><span></span></a>

Target

.s-topbar--menu-btn

Summary

Fix any of the following:

  • Required ARIA parents role not present: menu, menubar, group

Ensure elements with an ARIA role that require parent roles are contained by them. Certain ARIA roles must be contained by particular parents. Help URL

HTML

<a href="#" class="s-topbar--menu-btn js-left-sidebar-toggle" role="menuitem" aria-haspopup="true" aria-controls="left-sidebar" aria-expanded="false"><span></span></a>

Target

.s-topbar--menu-btn

Summary

Fix any of the following:

  • Required ARIA parents role not present: menu, menubar, group

Ensure elements with an ARIA role that require parent roles are contained by them. Certain ARIA roles must be contained by particular parents. Help URL

HTML

<a href="#" class="s-topbar--menu-btn js-left-sidebar-toggle" role="menuitem" aria-haspopup="true" aria-controls="left-sidebar" aria-expanded="false"><span></span></a>

Target

.s-topbar--menu-btn

Summary

Fix any of the following:

  • Required ARIA parents role not present: menu, menubar, group

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 26.53Lc (foreground color: #c4c6c7, background color: #f7f8f8, 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 19.29Lc (foreground color: #d0d3d5, background color: #f7f8f8, 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 26.53Lc (foreground color: #c4c6c7, background color: #f7f8f8, 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 19.29Lc (foreground color: #d0d3d5, background color: #f7f8f8, 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 26.53Lc (foreground color: #c4c6c7, background color: #f7f8f8, 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

.mb0.s-description

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 19.29Lc (foreground color: #d0d3d5, background color: #f7f8f8, 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 15.51Lc (foreground color: #5e6061, background color: #2e2f31, 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 12.31Lc (foreground color: #56585a, background color: #2e2f31, 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 15.51Lc (foreground color: #5e6061, background color: #2e2f31, 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 12.31Lc (foreground color: #56585a, background color: #2e2f31, 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 15.51Lc (foreground color: #5e6061, background color: #2e2f31, 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

.mb0.s-description

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 12.31Lc (foreground color: #56585a, background color: #2e2f31, 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 links have discernible text. Links must have discernible text. Help URL

HTML

<a href="#" class="s-topbar--menu-btn js-left-sidebar-toggle" role="menuitem" aria-haspopup="true" aria-controls="left-sidebar" aria-expanded="false"><span></span></a>

Target

.s-topbar--menu-btn

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • 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 links have discernible text. Links must have discernible text. Help URL

HTML

<a href="#" class="s-topbar--menu-btn js-left-sidebar-toggle" role="menuitem" aria-haspopup="true" aria-controls="left-sidebar" aria-expanded="false"><span></span></a>

Target

.s-topbar--menu-btn

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • 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 links have discernible text. Links must have discernible text. Help URL

HTML

<a href="#" class="s-topbar--menu-btn js-left-sidebar-toggle" role="menuitem" aria-haspopup="true" aria-controls="left-sidebar" aria-expanded="false"><span></span></a>

Target

.s-topbar--menu-btn

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • 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 links have discernible text. Links must have discernible text. Help URL

HTML

<a href="#" class="s-topbar--menu-btn js-left-sidebar-toggle" role="menuitem" aria-haspopup="true" aria-controls="left-sidebar" aria-expanded="false"><span></span></a>

Target

.s-topbar--menu-btn

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • 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 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-_8dc5babd-312b-4c7d-a253-795b6839535f-D656A59B0BCD8E2854D9C3B0CCA29BE0">

Target

#js-similar-questions-expandable-_8dc5babd-312b-4c7d-a253-795b6839535f-D656A59B0BCD8E2854D9C3B0CCA29BE0

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-_8dc5babd-312b-4c7d-a253-795b6839535f-D656A59B0BCD8E2854D9C3B0CCA29BE0">

Target

#js-similar-questions-expandable-_8dc5babd-312b-4c7d-a253-795b6839535f-D656A59B0BCD8E2854D9C3B0CCA29BE0

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-_8dc5babd-312b-4c7d-a253-795b6839535f-D656A59B0BCD8E2854D9C3B0CCA29BE0">

Target

#js-similar-questions-expandable-_8dc5babd-312b-4c7d-a253-795b6839535f-D656A59B0BCD8E2854D9C3B0CCA29BE0

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-_8dc5babd-312b-4c7d-a253-795b6839535f-D656A59B0BCD8E2854D9C3B0CCA29BE0">

Target

#js-similar-questions-expandable-_8dc5babd-312b-4c7d-a253-795b6839535f-D656A59B0BCD8E2854D9C3B0CCA29BE0

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable