Collectives Article

ID:
collectives-article
Automated score:
89.2
URL:
https://stackoverflow.com/collectives/aws/articles/77217753/code-change-best-practices-smaller-pull-requests-for-smoother-merging
View JSON file

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

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 m0 mb4 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-zmnl3izf">

Target

.js-upvote-btn

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="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-downvote-btn m0 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 h:fc-black-500 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 not useful or unclear (click again to undo)" data-unselected-tooltip="Mark this post as not useful or unclear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-xos4exon">

Target

.js-downvote-btn

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="js-saves-btn s-btn s-btn__unset c-pointer py4" type="button" id="saves-btn-77217753" data-controller="s-tooltip" data-s-tooltip-placement="right" data-s-popover-placement="" aria-pressed="false" data-post-id="77217753" data-post-type-id="9" data-user-privilege-for-post-click="0" aria-controls="" data-s-popover-auto-show="false" aria-describedby="--stacks-s-tooltip-fuyi9gs5">

Target

#saves-btn-77217753

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="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-upvote-btn m0 mb4 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-zmnl3izf">

Target

.js-upvote-btn

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="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-downvote-btn m0 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 h:fc-black-500 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 not useful or unclear (click again to undo)" data-unselected-tooltip="Mark this post as not useful or unclear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-xos4exon">

Target

.js-downvote-btn

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="js-saves-btn s-btn s-btn__unset c-pointer py4" type="button" id="saves-btn-77217753" data-controller="s-tooltip" data-s-tooltip-placement="right" data-s-popover-placement="" aria-pressed="false" data-post-id="77217753" data-post-type-id="9" data-user-privilege-for-post-click="0" aria-controls="" data-s-popover-auto-show="false" aria-describedby="--stacks-s-tooltip-fuyi9gs5">

Target

#saves-btn-77217753

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="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-upvote-btn m0 mb4 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-zmnl3izf">

Target

.js-upvote-btn

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="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-downvote-btn m0 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 h:fc-black-500 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 not useful or unclear (click again to undo)" data-unselected-tooltip="Mark this post as not useful or unclear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-xos4exon">

Target

.js-downvote-btn

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="js-saves-btn s-btn s-btn__unset c-pointer py4" type="button" id="saves-btn-77217753" data-controller="s-tooltip" data-s-tooltip-placement="right" data-s-popover-placement="" aria-pressed="false" data-post-id="77217753" data-post-type-id="9" data-user-privilege-for-post-click="0" aria-controls="" data-s-popover-auto-show="false" aria-describedby="--stacks-s-tooltip-fuyi9gs5">

Target

#saves-btn-77217753

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="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-upvote-btn m0 mb4 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-zmnl3izf">

Target

.js-upvote-btn

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="flex--item d-flex s-btn ai-center ac-center ba bar-pill js-downvote-btn m0 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 h:fc-black-500 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 not useful or unclear (click again to undo)" data-unselected-tooltip="Mark this post as not useful or unclear" aria-pressed="false" aria-describedby="--stacks-s-tooltip-xos4exon">

Target

.js-downvote-btn

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="js-saves-btn s-btn s-btn__unset c-pointer py4" type="button" id="saves-btn-77217753" data-controller="s-tooltip" data-s-tooltip-placement="right" data-s-popover-placement="" aria-pressed="false" data-post-id="77217753" data-post-type-id="9" data-user-privilege-for-post-click="0" aria-controls="" data-s-popover-auto-show="false" aria-describedby="--stacks-s-tooltip-fuyi9gs5">

Target

#saves-btn-77217753

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"

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 class="js-add-link comments-link disabled-link" title="Use comments to ask for more information or suggest improvements." href="#" role="button">Add a comment</a>

Target

.js-add-link

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.24Lc (foreground color: #a1a6ac, background color: #ffffff, font size: 9.8pt (13px), 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

<a class="js-add-link comments-link disabled-link" title="Use comments to ask for more information or suggest improvements." href="#" role="button">Add a comment</a>

Target

.js-add-link

Summary

Fix all of the following:

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

HTML

<span class="d-block fs-body2 fc-white">AWS</span>

Target

.fs-body2.fc-white.d-block

Summary

Fix all of the following:

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

HTML

<span class="d-block fs-caption fc-black-150">Collective</span>

Target

.fc-black-150

Summary

Fix all of the following:

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

HTML

<span class="s-btn s-btn__outlined s-btn__xs mr4 fc-white bc-white h:bg-theme-primary-400 f:bg-theme-primary-400">See more</span>

Target

.bc-white

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57.19Lc (foreground color: #252627, background color: #f8991c, font size: 8.3pt (11px), 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="/users/1823740/dipak" class="s-user-card--link lh-lg" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
                    Dipak <span class="ws-nowrap"></span>

                        <span class="d-none" itemprop="name">Dipak</span>
                </a>

Target

.s-user-card--link

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

HTML

<span class="d-block fs-caption fc-black-150">Collective</span>

Target

.fc-black-150

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.43 (foreground color: #f1f2f3, background color: #8a440a, font size: 9.0pt (12px), 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="/users/1823740/dipak" class="s-user-card--link lh-lg" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
                    Dipak <span class="ws-nowrap"></span>

                        <span class="d-none" itemprop="name">Dipak</span>
                </a>

Target

.s-user-card--link

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

HTML

<span class="d-block fs-caption fc-black-150">Collective</span>

Target

.fc-black-150

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.61 (foreground color: #333638, background color: #f1b27e, font size: 9.0pt (12px), 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="/collectives/aws" class="js-gps-track " data-gps-track="subcommunity_link.click({ subcommunity_user_type: 0, subcommunity_slug: aws, link_source: post_header })">AWS</a>

Target

.mb8.fc-black-400.flex--item > .js-gps-track[href$="aws"]

Summary

Fix any of the following:

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

HTML

<a href="/collectives">

Target

.bbr-sm > a[href$="collectives"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.15:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #636b74)
  • 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="/collectives/aws" class="js-gps-track " data-gps-track="subcommunity_link.click({ subcommunity_user_type: 0, subcommunity_slug: aws, link_source: post_header })">AWS</a>

Target

.mb8.fc-black-400.flex--item > .js-gps-track[href$="aws"]

Summary

Fix any of the following:

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

HTML

<a href="/collectives">

Target

.bbr-sm > a[href$="collectives"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.13:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #c8ccd0)
  • 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 class="s-breadcrumbs--link" href="https://stackoverflow.com">

Target

.s-breadcrumbs--link[href$="stackoverflow.com"]

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

HTML

<a class="themed subcommunity-avatar subcommunity-aws s-avatar s-avatar__24 mr2 js-community-tag my2 mr6 va-top" style="" data-controller="s-tooltip" href="/collectives/aws" aria-describedby="--stacks-s-tooltip-cgu4wr8v"></a>

Target

.s-avatar__24

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 class="s-breadcrumbs--link" href="https://stackoverflow.com">

Target

.s-breadcrumbs--link[href$="stackoverflow.com"]

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

HTML

<a class="themed subcommunity-avatar subcommunity-aws s-avatar s-avatar__24 mr2 js-community-tag my2 mr6 va-top" style="" data-controller="s-tooltip" href="/collectives/aws" aria-describedby="--stacks-s-tooltip-cgu4wr8v"></a>

Target

.s-avatar__24

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 class="s-breadcrumbs--link" href="https://stackoverflow.com">

Target

.s-breadcrumbs--link[href$="stackoverflow.com"]

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

HTML

<a class="themed subcommunity-avatar subcommunity-aws s-avatar s-avatar__24 mr2 js-community-tag my2 mr6 va-top" style="" data-controller="s-tooltip" href="/collectives/aws" aria-describedby="--stacks-s-tooltip-cgu4wr8v"></a>

Target

.s-avatar__24

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 class="s-breadcrumbs--link" href="https://stackoverflow.com">

Target

.s-breadcrumbs--link[href$="stackoverflow.com"]

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

HTML

<a class="themed subcommunity-avatar subcommunity-aws s-avatar s-avatar__24 mr2 js-community-tag my2 mr6 va-top" style="" data-controller="s-tooltip" href="/collectives/aws" aria-describedby="--stacks-s-tooltip-cgu4wr8v"></a>

Target

.s-avatar__24

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