ARIA attributes in templates in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an ARIA label to the button for accessibility.

Angular

<button aria-label=[1]>Click me</button>

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

ASubmit form

B"Submit form"

C'Submit form'

DSubmit_form

Attempts:

3 left

💡 Hint

Common Mistakes

Not wrapping the label text in quotes causes invalid HTML.

Using variable names without quotes for ARIA labels.

The ARIA label value must be a string wrapped in quotes inside the template to be valid HTML.

2fill in blank

medium

Complete the code to bind the ARIA hidden attribute dynamically using Angular syntax.

Angular

<div [attr.aria-hidden]=[1]>Content</div>

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

A"isHidden"

B'isHidden'

CisHidden

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around the variable name makes it a string literal, not a variable.

Using static values instead of variables for dynamic ARIA attributes.

Angular binding uses the variable name without quotes to bind dynamic values.

3fill in blank

hard

Fix the error in the code to correctly bind the ARIA role attribute in Angular.

Angular

<nav role=[1]>Navigation</nav>

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

A[navigation]

Bnavigation

C'navigation'

D"navigation"

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted values causes invalid HTML.

Using square brackets incorrectly for static attribute values.

The role attribute value must be a string in quotes for valid HTML. Angular template binding without brackets treats it as a string literal, so quotes are needed.

4fill in blank

hard

Fill both blanks to bind ARIA attributes dynamically with correct Angular syntax.

Angular

<button [attr.aria-pressed]=[1] [attr.aria-label]=[2]>Toggle</button>

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

AisPressed

B"Toggle button"

C'Toggle button'

Dpressed

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around boolean variables.

Not quoting string literals for ARIA labels.

Use variable names without quotes for boolean ARIA attributes and string literals with quotes for labels.

5fill in blank

hard

Fill all three blanks to create an accessible input with ARIA attributes bound dynamically.

Angular

<input type="text" id=[1] [attr.aria-labelledby]=[2] [attr.aria-required]=[3]>

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

A"usernameInput"

B"usernameLabel"

CisRequired

Drequired

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting id and label attribute values.

Quoting boolean variables causing them to be treated as strings.

Use quoted strings for static id and label references, and a variable without quotes for the boolean ARIA required attribute.