cypress-axe for accessibility - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the accessibility testing library in Cypress.

Cypress

import '[1]';

Drag options to blanks, or click blank then click option'

Acypress-axe

Baxe-core

Ccypress-accessibility

Daxe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'axe-core' instead of 'cypress-axe'.

Forgetting to import the accessibility plugin.

The cypress-axe package is the official Cypress plugin for accessibility testing.

2fill in blank

medium

Complete the code to inject axe into the page before running accessibility checks.

Cypress

cy.visit('/');
cy.[1]();

Drag options to blanks, or click blank then click option'

AcheckA11y

BinjectAxe

Cinject

DaxeInject

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'checkA11y' before injecting axe.

Using a non-existent command like 'axeInject'.

The injectAxe() command injects the axe-core library into the page so accessibility checks can run.

3fill in blank

hard

Fix the error in the code to run accessibility checks on the entire page.

Cypress

cy.[1]();

Drag options to blanks, or click blank then click option'

AcheckA11y

BcheckAccessibility

CrunAxe

DtestA11y

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect command names like 'checkAccessibility' or 'runAxe'.

Forgetting to call the command as a function.

The correct command to run accessibility checks is checkA11y().

4fill in blank

hard

Fill both blanks to run accessibility checks only on the main content area.

Cypress

cy.[1]('[2]');

Drag options to blanks, or click blank then click option'

AcheckA11y

BinjectAxe

Cmain

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'injectAxe' instead of 'checkA11y' for the first blank.

Using 'header' instead of 'main' for the selector.

Use checkA11y('main') to run accessibility checks only on the <main> element.

5fill in blank

hard

Fill all three blanks to run accessibility checks with options to skip color contrast rules.

Cypress

cy.[1]([2], { rules: { '[3]': { enabled: false } } });

Drag options to blanks, or click blank then click option'

AcheckA11y

B'body'

Ccolor-contrast

DinjectAxe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'injectAxe' instead of 'checkA11y' for the first blank.

Using incorrect selectors like 'html' instead of 'body'.

Misspelling the rule name 'color-contrast'.

This runs checkA11y on the whole body but disables the 'color-contrast' rule.