Accessibility testing basics in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an ARIA label to the button for screen readers.

Angular

<button aria-[1]="Close menu">X</button>

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

Arole

Blabel

Cchecked

Dhidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using aria-hidden instead of aria-label hides the element from screen readers.

Using role instead of aria-label does not provide a label.

The aria-label attribute provides an accessible name for the button, helping screen readers understand its purpose.

2fill in blank

medium

Complete the code to make the navigation landmark accessible.

Angular

<nav [1]="navigation">...</nav>

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

Arole

Baria-hidden

Caria-label

Dtabindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using aria-label alone does not define the landmark role.

aria-hidden hides the element from screen readers, which is not desired here.

The role="navigation" attribute explicitly defines the element as a navigation landmark for assistive technologies.

3fill in blank

hard

Fix the error in the button to ensure it is keyboard accessible.

Angular

<button [1]="0">Click me</button>

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

Arole

Baria-label

Ctabindex

Daria-hidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using aria-hidden removes the element from accessibility tree.

aria-label does not affect keyboard focus.

Setting tabindex="0" makes the button focusable by keyboard users, ensuring accessibility.

4fill in blank

hard

Fill both blanks to create an accessible form input with a label.

Angular

<label for="[1]">Name</label>
<input id="[2]" type="text" />

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

Ausername

Buser-name

Cname

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using different values for label's for and input's id breaks accessibility.

Using spaces or special characters in id attributes.

The for attribute in the label must match the id of the input to link them for screen readers.

5fill in blank

hard

Fill all three blanks to add ARIA roles and labels for a modal dialog.

Angular

<div role="[1]" aria-[2]="[3]">
  <h2 id="label">Modal Title</h2>
  <p>Modal content here.</p>
</div>

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

Adialog

Blabelledby

Cmodal

Dlabel

Attempts:

3 left

💡 Hint

Common Mistakes

Using role="modal" is not a valid ARIA role.

Using aria-label instead of aria-labelledby when referencing an element.

The role="dialog" defines the modal region. The aria-labelledby="label" attribute points to the element that labels the dialog, improving screen reader context.