Collectives Members

ID:
collectives-members
Automated score:
91.9
URL:
https://stackoverflow.com/collectives/aws?tab=members
View JSON file

11 violations: Light: 2 Dark: 3 HC Light: 3 HC Dark: 3

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

HTML

<button class="s-btn s-btn__muted m0 myn4 p4 w-auto" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="top" aria-controls="s-popover-top-contribution" aria-describedby="s-popover-top-contribution" aria-expanded="false">

Target

button[aria-controls="s-popover-top-contribution"]

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-btn s-btn__muted m0 myn4 p4 w-auto" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="top" aria-controls="s-popover-rep-notice" aria-describedby="s-popover-rep-notice" aria-expanded="false">

Target

button[aria-controls="s-popover-rep-notice"]

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 buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn s-btn__muted m0 myn4 p4 w-auto" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="top" aria-controls="s-popover-top-contribution" aria-describedby="s-popover-top-contribution" aria-expanded="false">

Target

button[aria-controls="s-popover-top-contribution"]

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-btn s-btn__muted m0 myn4 p4 w-auto" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="top" aria-controls="s-popover-rep-notice" aria-describedby="s-popover-rep-notice" aria-expanded="false">

Target

button[aria-controls="s-popover-rep-notice"]

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 buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn s-btn__muted m0 myn4 p4 w-auto" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="top" aria-controls="s-popover-top-contribution" aria-describedby="s-popover-top-contribution" aria-expanded="false">

Target

button[aria-controls="s-popover-top-contribution"]

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-btn s-btn__muted m0 myn4 p4 w-auto" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="top" aria-controls="s-popover-rep-notice" aria-describedby="s-popover-rep-notice" aria-expanded="false">

Target

button[aria-controls="s-popover-rep-notice"]

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 buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn s-btn__muted m0 myn4 p4 w-auto" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="top" aria-controls="s-popover-top-contribution" aria-describedby="s-popover-top-contribution" aria-expanded="false">

Target

button[aria-controls="s-popover-top-contribution"]

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-btn s-btn__muted m0 myn4 p4 w-auto" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="top" aria-controls="s-popover-rep-notice" aria-describedby="s-popover-rep-notice" aria-expanded="false">

Target

button[aria-controls="s-popover-rep-notice"]

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 select element has an accessible name. Select element must have an accessible name. Help URL

HTML

<select class="js-role fc-black-500" id="select-role">

Target

#select-role

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

Ensure select element has an accessible name. Select element must have an accessible name. Help URL

HTML

<select class="js-role fc-black-500" id="select-role">

Target

#select-role

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

Ensure select element has an accessible name. Select element must have an accessible name. Help URL

HTML

<select class="js-role fc-black-500" id="select-role">

Target

#select-role

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

Ensure select element has an accessible name. Select element must have an accessible name. Help URL

HTML

<select class="js-role fc-black-500" id="select-role">

Target

#select-role

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

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

<a href="/collectives/aws?tab=members" class="s-navigation--item is-selected js-gps-track" data-gps-track="collectives_nav_tab_clicked({ collectives_slug: aws, nav_tab: 8, has_activity_notification: False })">
                    Members
                </a>

Target

a[href="/collectives/aws?tab=members"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57.19Lc (foreground color: #252627, background color: #f8991c, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="js-join-community s-btn s-btn__link" type="submit" aria-pressed="false" data-slug="aws" data-url="/collectives/aws/subscriber/join" formaction="/collectives/aws/subscriber/join">
                                                Join
                                            </button>

Target

.s-btn__link.js-join-community[data-slug="aws"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 49.4Lc (foreground color: #90c4f9, background color: #6b5724, font size: 9.8pt (13px), 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="?tab=members&amp;SortField=Name&amp;SortDirection=Ascending&amp;Page=1">Username <svg aria-hidden="true" class="svg-icon iconArrowUpDownSm" width="14" height="14" viewBox="0 0 14 14"><path d="m7 2 4 4H3zm0 10 4-4H3z"></path></svg></a>

Target

th:nth-child(3) > a

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: bold). Expected contrast ratio of 7:1

HTML

<span>Top contribution</span>

Target

.w70 > .ai-center.d-flex > span

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: bold). Expected contrast ratio of 7:1

HTML

<span>Rep</span>

Target

th:nth-child(5) > .ai-center.d-flex > span

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: bold). Expected contrast ratio of 7:1

HTML

<button class="js-join-community s-btn s-btn__link" type="submit" aria-pressed="false" data-slug="aws" data-url="/collectives/aws/subscriber/join" formaction="/collectives/aws/subscriber/join">
                                                Join
                                            </button>

Target

.s-btn__link.js-join-community[data-slug="aws"]

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

<button class="js-join-community s-btn s-btn__link" type="submit" aria-pressed="false" data-slug="aws" data-url="/collectives/aws/subscriber/join" formaction="/collectives/aws/subscriber/join">
                                                Join
                                            </button>

Target

.s-btn__link.js-join-community[data-slug="aws"]

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