FastPass results
Scan details
- target page url:https://chaoss.community/
- scan date:2024-05-30 7:14 PM UTC
Summary
17
5
27
Automated checks
Failed instances 17Failed instances 1717 Failed
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:1Element 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. Use background color: #17847c and the original foreground color: #ffffff to meet a contrast ratio of 4.54:1.
- 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:1Element 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
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:1Element 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. 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:1Element 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. 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:1Element 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. 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:1Element 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. 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:1Element 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. Use background color: #4d8220 and the original foreground color: #ffffff to meet a contrast ratio of 4.64:1.
- 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:1Element 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
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
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-role: Ensures role attribute has an appropriate value for the element(WCAG 1.3.1, WCAG 4.1.2)Best Practice
aria-conditional-attr: Ensures ARIA attributes are used as described in the specification of the element's role(WCAG 4.1.2)
aria-hidden-focus: Ensures aria-hidden elements are not focusable nor contain focusable elements(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)
duplicate-id-aria: Ensures every id attribute value used in ARIA and in labels is unique(WCAG 4.1.2)
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)
Tab stops
Failed instances 0Failed instances 00 Failed
Keyboard navigation: All interactive elements can be reached using the Tab and arrow keys. (Partially automated)(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)