Keyboard Focus Indicator
DescriptionThis API tests all focusable elements on a webpage by comparing the color contrast between the keyboard focus indicator and the component itself in its active vs. inactive states. It covers the following Issue IDs:
Issue ID: cr_focus_low
Definition
When active interface controls (buttons, links, forms, page tabs, etc.) receive keyboard focus, the visual focus indicator does not meet the required color contrast ratio of at least 3:1.
User Impact
Low-vision users may have trouble seeing the visual keyboard focus indicator and may not be able to orient themselves on the page to effectively navigate content. Colorblind users may also be affected.
Recommendation
Ensure that the visual keyboard focus indicator provides a sufficient color contrast ratio of at least 3:1 with adjacent colors (background and/or the control colors). Possible solutions include: using the CSS outline property to provide an outline around the focused element, and inverting the foreground and background colors.
Success Criterion
1.4.11 Non-text Contrast (Level AA)
Related Success Criteria (if applicable):
2.4.7 Focus Visible (Level AA)
More details can be found at Understanding Success Criterion 1.4.11.
Issue ID: cr_focus_missing
Definition
There is no visual keyboard focus indication when using TAB or SHIFT+TAB, and/or arrow keys (when applicable) to navigate through the controls (buttons, links, forms, page tabs, etc.) of the website.
User Impact
Sighted keyboard-only users are not able to orient themselves on the page and will not be able to effectively navigate content.
Recommendation
All interactive content must provide a visual indication of keyboard focus. Focus can be provided in a number of ways including change background, invert colors, border, outline, and other visual methods. Avoid the use of the “outline: none” CSS property.
Success Criterion
2.4.7 Focus Visible (Level AA)
Related Success Criteria (if applicable):
1.4.11 Non-text Contrast (Level AA)
More details can be found at Understanding Success Criterion 2.4.7.
Request
URLURL
Response
Response BodyResponse Body
200 OK
The Success response contains categories that aggregate all the Error and Alert related issues.
{
"categories": {
"error": {
"count": 2,
"description": "Errors",
"items": {
"cr_focus_low": {
"count": 1,
"description": "Low contrast on Focus",
"id": "cr_focus_low",
"level": "AA",
"xpaths": [
"/html[1]/body[1]/div[1]/a[1]"
]
},
"cr_focus_missing": {
"count": 1,
"description": "Focus not visible",
"id": "cr_focus_missing",
"level": "AA",
"xpaths": [
"/html[1]/body[1]/div[1]/a[2]"
]
}
}
}
},
"statistics": {
"allitemcount": 2,
"pageurl": "http://www.abc.com",
"time": 5.13,
"totalelements": 60
},
"status": {
"httpstatuscode": 200,
"success": "True"
}
}
Errors
Bad Request, missing something, or the request body wasn’t correct.
