Accessibility checker plugins in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an accessibility checker plugin in Figma.

Figma

const plugin = figma.[1]('accessibility-checker');

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

AusePlugin

BloadPlugin

CinstallPlugin

DimportPlugin

Attempts:

3 left

💡 Hint

Common Mistakes

Using importPlugin or usePlugin which are not valid Figma API methods.

Trying to install a plugin via code instead of loading it.

The correct method to load a plugin in Figma's API is loadPlugin.

2fill in blank

medium

Complete the code to check color contrast using the accessibility plugin.

Figma

const contrast = plugin.[1](element.colors);

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

AscanColors

BvalidateColors

CtestContrast

DcheckContrast

Attempts:

3 left

💡 Hint

Common Mistakes

Using validateColors or scanColors which are not standard method names.

Using testContrast which is not the correct method.

The method to check color contrast is usually named checkContrast in accessibility plugins.

3fill in blank

hard

Fix the error in the code to get accessibility issues from the plugin.

Figma

const issues = plugin.get[1]();

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

AAccessibilityIssues

BAccessIssues

CIssueList

DErrors

Attempts:

3 left

💡 Hint

Common Mistakes

Using getAccessIssues which is incomplete.

Using getIssueList or getErrors which are not valid methods.

The correct method is getAccessibilityIssues to retrieve accessibility problems.

4fill in blank

hard

Fill both blanks to filter accessibility issues by severity and type.

Figma

const filtered = issues.filter(issue => issue.[1] === 'high' && issue.[2] === 'color');

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

Aseverity

Btype

Clevel

Dcategory

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'level' or 'category' which are not the correct property names.

Mixing up severity and type properties.

Issues have properties 'severity' and 'type' to filter by importance and kind.

5fill in blank

hard

Fill all three blanks to create a summary report of accessibility issues.

Figma

const summary = {
  total: issues.[1],
  highSeverity: issues.filter(i => i.[2] === 'high').[3],
  colorIssues: issues.filter(i => i.[2] === 'color').length
};

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

Alength

Bseverity

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using count instead of length which is not a JavaScript array property.

Using wrong property names for filtering.

Use length to get total count, severity to filter by importance, and length again to count filtered items.