Report Title: clogsflips
May 14, 2022 03:19
  • Followed links in specfied domain only
Maximum page limit was reached
You need to increase the page limit to evaluate more pages in the website, which may require purchasing or increasing your subscription level.

Focus must be visible

Violations Warnings Manual
Checks
Passed
Number of Pages - - 25 -
25 pages with manual checks;

Details

Rule ID Focus 2
Definition The element with keyboard focus must have a visible focus style that is different from the non-focus state.
Purpose
  • Many browsers don't provide a prominent or consistent visible keyboard focus styling for interactive elements, making it difficult for users to identify and track the element with keyboard focus.
  • Author defined visible keyboard focus style makes it easier for users to know which interactive element has keyboard focus and provides more consistent user experience between browsers and operating systems.
WCAG Success Criteria

2.4.7 Focus Visible (Level AA, Primary Success Criterion)

Rule Category Keyboard Support
Scope Page
Target Resources a, area, input, textarea and select elements and elements with widget roles with tabindex values
  • a
  • applet
  • area
  • button
  • input
  • object
  • select
Techniques
  • Use CSS psuedo element selector :focus to change the styling of elements with keyboard focus.
  • Use focus and blur event handlers on checkboxes and radio buttons to change the styling of not only the form control, but also its label text to make it easier to see.
  • Styling changes should include creating a border around the interactive element and its label, typically using the CSS border or outline properties.
  • For consistent look and feel to the website it is often useful for the focus and hover styles to be the same or similar.
Manual Checks
  • Use the the keyboard (i.e. typically he "tab" key, but in the case of widgets other keys) to move focus through the links, form controls, embedded applications and widgets on the page.
  • Check if the element with keyboard focus is clearly visible for all focusable elements on the page as you move focus between elements, and that it changes more than just color (i.e. border/outline around element with focus).
  • Test keyboard focus styling using more than one browser and operating system, since there is a wide varability of between operating systems and browsers for styling keyboard focus.
Informational Links

Page Results

Element Results Implementation Level
Page Page Title Result V W MC P Score Status
All Pages Manual Check - - - - 0 R

Implementation Score Definitions

  • The implementation score is based on the rule results across all pages and ranges from 0 to 100.
  • '-' means there were no rule results for that group (e.g. rules were not applicable).
  • The following messages give a general idea of the overall implementation of the rules for a website.
Abbrev Score Status Description
C 100 Complete Complete means all rules have passed. There were either no manual checks or all manual checks have been resolved.
R 0 Required Manual Checks
  • Manual checks are required to verify accessibility. Markup has been identified that needs to be reviewed to determine if accessibility requirements have been met.
  • Start with the website and page level manual checks since they affect website and page navigation and identification of content and then start on the element level manual checks.
AC
AC-R
95-99 Almost Complete
  • Almost Complete means that you seem to understand the accessibility requirements of the rules, and are close to fully implementing their requirements on all pages within the website.
  • "-R" means there are required Manual Checks. Markup has been identified that needs to be reviewed to determine if accessibility requirements have been met.
PI
PI-R
50-94 Partial Implementation
  • Partial Implementation means that you may understand at least some of the accessibility requirements.
  • "-R" means there are required Manual Checks. Markup has been identified that needs to be reviewed to determine if accessibility requirements have been met.
  • Please re-read the accessibility requirement and review the techniques before trying to improve the accessibility.
NI
NI-R
0-50 Not Implemented
  • Incomplete means that you do not understand the accessibility requirements of the rules or did not consider accessibility in the design of the website.
  • "-R" means there are required Manual Checks. Markup has been identified that needs to be reviewed to determine if accessibility requirements have been met.
  • Please read the accessibility requirements and review the techniques before trying to improve the accessibility.
na - Not Applicable No markup was found that identifed a known or possible accessibility issue.

Note: Future versions of FAE will allow you to mark manual checks as, pass, fail or not applicable.

Implementation Score Computation

Implementation Score = P / (P + F + MC)

Each variable represents the number of element level results for a particular rule, where:

  • P = elements that passed
  • F = elements that failed
  • MC = elements that require a manual check

The score ranges in value from 0 to 100, that is from no implementation to all accessibility requirements met. In the future, FAE will allow you to change manual checks to pass, fail or not applicable, and will recompute the Implementation Score based on the updated manual checking results.

Note: When a manual check is changed to not applicable that element result is removed from the implementation score computation.

Implementation Score Combinations

Implementation scores are rule-based and are computed for the following combinations:

Pages Rules Calculation
1 1 Element level results determine the implementation score for a rule on a specific page.
1 All The implementation score for a page is the average of all implementation scores for all rules on the page, with all rules being equally weighted.
All 1 The implementation score for a rule across all the pages in a website is based on the aggregation of all element results for the rule across all pages.
All All The implementation score for a website is the average of the website rule implementation scores.

Example Rule Implementation Scores on Individual Page

Description Pass Fail Manual Check Implementation Score
A rule with scope of element, like "Image must have alt text". 8 2 0 80
A rule with scope of page like "Page must have main landmark". 0 1 0 0
A rule with scope of element with elment results of pass, fail and manual checks that may occur for the color contrast rule. 134 29 37 67

Example Rule Implementation Score for All Pages in a Website

This is a hypothetical example for a website

Page results for Rule X Pass Fail Manual Check Implementation Score
Page 1 element results for rule X. 23 12 4 59
Page 2 element results for rule X. 12 4 0 75
Page 3 element results for rule X. 45 0 0 100
Website element results for Rule X 80 16 4 80