FastPass results

Scan details

target page url:https://chaoss.community/
scan date:2024-05-30 7:14 PM UTC

Summary

Automated checks

Failed instances 17

Resources for this rule

More information about color-contrastWCAG 1.4.3

Path	.swiper-slide-visible > .container > .content > .buttons > .button.solid_color > .primary-color
Snippet	<a class="primary-color" href="https://chaoss.community/kb-getting-started/">Get Started</a>
How to fix	Fix the following: Element has insufficient color contrast of 2 (foreground color: #ffffff, background color: #27ccc0, font size: 11.3pt (15px), font weight: bold). Expected contrast ratio of 4.5:1 Use background color: #17847c and the original foreground color: #ffffff to meet a contrast ratio of 4.54:1.

Path	.vc_col-sm-9 > .vc_column-inner > .wpb_wrapper > .accent-color.nectar-button.medium > span
Snippet	<span>About CHAOSS</span>
Related paths	.vc_col-sm-9 > .vc_column-inner > .wpb_wrapper > .accent-color.nectar-button.medium
How to fix	Fix the following: Element has insufficient color contrast of 2 (foreground color: #ffffff, background color: #27ccc0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1 Use background color: #17847c and the original foreground color: #ffffff to meet a contrast ratio of 4.54:1.

Path	.accent-color.nectar-button[href$="news/"] > span
Snippet	<span>Read More</span>
Related paths	.accent-color.nectar-button[href$="news/"]
How to fix	Fix the following: Element has insufficient color contrast of 2 (foreground color: #ffffff, background color: #27ccc0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1 Use background color: #17847c and the original foreground color: #ffffff to meet a contrast ratio of 4.54:1.

Path	.small.accent-color.nectar-button > span
Snippet	<span>Listen to CHAOSScast</span>
Related paths	.small.accent-color.nectar-button
How to fix	Fix the following: Element has insufficient color contrast of 2 (foreground color: #ffffff, background color: #27ccc0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1 Use background color: #17847c and the original foreground color: #ffffff to meet a contrast ratio of 4.54:1.

Path	.extra-color-1 > span
Snippet	<span>Subscribe to CHAOSStube</span>
Related paths	.extra-color-1
How to fix	Fix the following: Element has insufficient color contrast of 3.06 (foreground color: #ffffff, background color: #f6653c, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1 Use background color: #c65030 and the original foreground color: #ffffff to meet a contrast ratio of 4.57:1.

Path	#wt-cli-accept-all-btn
Snippet	<a id="wt-cli-accept-all-btn" role="button" data-cli_action="accept_all" class="wt-cli-element medium cli-plugin-button wt-cli-accept-all-btn cookie_action_close_header cli_action_button" style="color: rgb(255, 255, 255); background-color: rgb(97, 162, 41);">Accept All</a>
How to fix	Fix the following: Element has insufficient color contrast of 3.13 (foreground color: #ffffff, background color: #61a229, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1 Use background color: #4d8220 and the original foreground color: #ffffff to meet a contrast ratio of 4.64:1.

Resources for this rule

More information about link-nameWCAG 2.4.4, WCAG 4.1.2

Path	#search-btn > div > a[href$="#searchbox"]
Snippet	<a href="#searchbox"><span class="icon-salient-search" aria-hidden="true"></span></a>
How to fix	Fix the following: Element is in tab order and does not have accessible text Fix ONE 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

Path	.post-5737 > a
Snippet	<a href="https://chaoss.community/chaossweekly-may-06-10-2024/"></a>
How to fix	Fix the following: Element is in tab order and does not have accessible text Fix ONE 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

Path	.post-5725 > a
Snippet	<a href="https://chaoss.community/chaossweekly-apr-29-may-03-2024/"></a>
How to fix	Fix the following: Element is in tab order and does not have accessible text Fix ONE 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

Path	a[href$="chaossproj"]
Snippet	<a target="_blank" href="https://twitter.com/chaossproj"><i class="fa fa-twitter"></i> </a>
How to fix	Fix the following: Element is in tab order and does not have accessible text Fix ONE 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

Path	li:nth-child(2) > a[target="_blank"]
Snippet	<a target="_blank" href="https://www.linkedin.com/company/chaoss?original_referer="><i class="fa fa-linkedin"></i> </a>
How to fix	Fix the following: Element is in tab order and does not have accessible text Fix ONE 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

Path	li:nth-child(3) > a[target="_blank"]
Snippet	<a target="_blank" href="https://www.youtube.com/c/CHAOSStube"><i class="fa fa-youtube-play"></i> </a>
How to fix	Fix the following: Element is in tab order and does not have accessible text Fix ONE 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

Path	li:nth-child(4) > a[href$="chaoss"]
Snippet	<a target="_blank" href="https://github.com/chaoss"><i class="fa fa-github-alt"></i></a>
How to fix	Fix the following: Element is in tab order and does not have accessible text Fix ONE 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

Path	li:nth-child(5) > a[target="_blank"]
Snippet	<a target="_blank" href="https://join.slack.com/t/chaoss-workspace/shared_invite/zt-r65szij9-QajX59hkZUct82b0uACA6g"><i class="fa-slack"></i></a>
How to fix	Fix the following: Element is in tab order and does not have accessible text Fix ONE 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

Path	li:nth-child(6) > a[target="_blank"]
Snippet	<a target="_blank" href="https://chaoss.discourse.group/categories"><i class="fa-envelope"></i></a>
How to fix	Fix the following: Element is in tab order and does not have accessible text Fix ONE 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

Path	.slide_out_area_close
Snippet	<a class="slide_out_area_close" href="#"> <span class="icon-salient-x icon-default-style"></span> </a>
How to fix	Fix the following: Element is in tab order and does not have accessible text Fix ONE 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

Resources for this rule

More information about meta-viewportWCAG 1.4.4

Path	meta[name="viewport"]
Snippet	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
How to fix	Fix the following: user-scalable on <meta> tag disables zooming on mobile devices

aria-allowed-attr: Ensures an element's role supports its ARIA attributes(WCAG 4.1.2)

aria-allowed-role: Ensures role attribute has an appropriate value for the element(WCAG 1.3.1, WCAG 4.1.2)Best Practice

aria-command-name: Ensures every ARIA button, link and menuitem has an accessible name(WCAG 4.1.2)

aria-conditional-attr: Ensures ARIA attributes are used as described in the specification of the element's role(WCAG 4.1.2)

aria-deprecated-role: Ensures elements do not use deprecated roles(WCAG 4.1.2)

aria-hidden-body: Ensures aria-hidden="true" is not present on the document body.(WCAG 4.1.2)

aria-hidden-focus: Ensures aria-hidden elements are not focusable nor contain focusable elements(WCAG 4.1.2)

aria-prohibited-attr: Ensures ARIA attributes are not prohibited for an element's role(WCAG 4.1.2)

aria-required-attr: Ensures elements with ARIA roles have all required ARIA attributes(WCAG 4.1.2)

aria-roles: Ensures all elements with a role attribute use a valid value(WCAG 4.1.2)

aria-valid-attr-value: Ensures all ARIA attributes have valid values(WCAG 4.1.2)

aria-valid-attr: Ensures attributes that begin with aria- are valid ARIA attributes(WCAG 4.1.2)

avoid-inline-spacing: Ensure that text spacing set through style attributes can be adjusted with custom stylesheets(WCAG 1.4.12)New for WCAG 2.1

bypass: Ensures each page has at least one mechanism for a user to bypass navigation and jump straight to the content(WCAG 2.4.1)

color-contrast: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds(WCAG 1.4.3)

document-title: Ensures each HTML document contains a non-empty <title> element(WCAG 2.4.2)

duplicate-id-aria: Ensures every id attribute value used in ARIA and in labels is unique(WCAG 4.1.2)

html-has-lang: Ensures every HTML document has a lang attribute(WCAG 3.1.1)

html-lang-valid: Ensures the lang attribute of the <html> element has a valid value(WCAG 3.1.1)

image-alt: Ensures <img> elements have alternate text or a role of none or presentation(WCAG 1.1.1)

link-name: Ensures links have discernible text(WCAG 2.4.4, WCAG 4.1.2)

list: Ensures that lists are structured correctly(WCAG 1.3.1)

listitem: Ensures <li> elements are used semantically(WCAG 1.3.1)

nested-interactive: Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies(WCAG 4.1.2)

presentation-role-conflict: Elements marked as presentational should not have global ARIA or tabindex to ensure all screen readers ignore them(WCAG 1.3.1)Best Practice

scrollable-region-focusable: Ensure elements that have scrollable content are accessible by keyboard(WCAG 2.1.1)

select-name: Ensures select element has an accessible name(WCAG 4.1.2)

Tab stops

Failed instances 0

Keyboard navigation: (WCAG 2.1.1)

Keyboard traps: There are no interactive elements that “trap” input focus and prevent navigating away. (Partially automated)(WCAG 2.1.2)

Focus indicator: All interactive elements give a visible indication when they have input focus. (Manual)(WCAG 2.4.7)

Tab order: The tab order is consistent with the logical order that's communicated visually. (Partially automated)(WCAG 2.4.3)

Input focus: Input focus does not move unexpectedly without the user initiating it. (Manual)(WCAG 2.3.1)

FastPass results

Scan details

Summary

Automated checks

Failed instances 17Failed instances 1717 Failed

66 Failedcolor-contrast: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

1010 Failedlink-name: Ensures links have discernible text

11 Failedmeta-viewport: Ensures <meta name="viewport"> does not disable text scaling and zooming

Incomplete checks 0Incomplete checks 00 Incomplete

Passed checks 27Passed checks 2727 Passed

Tab stops

Failed instances 0Failed instances 00 Failed

Incomplete checks 5Incomplete checks 55 Incomplete

Passed checks 0Passed checks 00 Passed

Failed instances 17

Failed instances 0