[{"label":"Latest (1.0.0)","version":"latest"}]
crest

Keyboard Focus Indicator

Description

This 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

Request

URL

URL


post
http://{api_host}/crest/api/perceivable/keyboard-focus-indicator
Copy

Request Body

Request Body

request_body of mimetype application/json Required
Response

Response

Response Body

Response Body

200 OK returns FocusIndicatorSuccessResponse of type application/json

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

Errors

failure_response
400

Bad Request, missing something, or the request body wasn’t correct.

Code Samples

Code Samples

cURL Command

curl -X POST -H "Content-Type: application/json" -d '{"reporttype":3,"url":"http://www.abc.com"}' http://{api_host}/crest/api/perceivable/keyboard-focus-indicator


[{"label":"Latest (1.0.0)","version":"latest"}]
crest
Feedback

Was this page helpful?