Keyboard Focus Indicator

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

URI

POST

https://{api_host}/http://{server-ip}:{port}//crest/api/perceivable/keyboard-focus-indicator

COPY

Request Body

request_body of type(s) application/json

Required

{
    "url": "string",
    "reporttype": 0
}

string

url

Required

A URL to check WCAG violations on. It should be a valid URL.

integer

reporttype

Optional

reporttype is either xpath(value: 3) or css selector(value: 4)

Responses

200

The Success response contains categories that aggregate all the Error and Alert related issues.

Returns focus_indicator_success_response of type(s) application/json

{
    "categories": {
        "error": {
            "count": 0,
            "description": "string",
            "items": {
                "cr_focus_low": {
                    "count": 0,
                    "description": "string",
                    "id": "string",
                    "level": "string",
                    "xpaths": []
                },
                "cr_focus_missing": {
                    "count": 0,
                    "description": "string",
                    "id": "string",
                    "level": "string",
                    "xpaths": []
                }
            }
        }
    },
    "statistics": {
        "allitemcount": 0,
        "pageurl": "string",
        "time": "number",
        "totalelements": 0
    },
    "status": {
        "httpstatuscode": 0,
        "success": "string"
    }
}

focus_indicator_categories