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.

Practice

1. What is the main purpose of accessibility testing in Angular applications?

easy

A. To ensure the app works well for users with disabilities

B. To improve the app's loading speed

C. To add more animations and effects

D. To reduce the app's file size

Solution

1. Step 1: Understand accessibility testing goal

   Accessibility testing focuses on making apps usable by everyone, including people with disabilities.

2. Step 2: Compare options with this goal

   Only To ensure the app works well for users with disabilities matches this purpose; others relate to performance or design, not accessibility.

3. Final Answer:

   To ensure the app works well for users with disabilities -> Option A

4. Quick Check:

   Accessibility testing = help all users [OK]

Hint: Accessibility testing = usability for all users, especially disabled [OK]

Common Mistakes:

• Confusing accessibility with performance optimization
• Thinking accessibility is only about visual design
• Ignoring users with disabilities

2. Which ARIA attribute is correctly used in this Angular template snippet?

<button aria-label="Close menu">X</button>

easy

A. aria-hidden="Close menu"

B. aria-label="Close menu"

C. aria-checked="Close menu"

D. aria-live="Close menu"

Solution

1. Step 1: Identify correct ARIA attribute for labeling

   The attribute aria-label provides an accessible name for elements like buttons.

2. Step 2: Check each option's meaning

   aria-hidden hides content, aria-checked is for checkboxes, aria-live is for dynamic updates. Only aria-label fits the usage.

3. Final Answer:

   aria-label="Close menu" -> Option B

4. Quick Check:

   aria-label names elements for screen readers [OK]

Hint: Use aria-label to name buttons for screen readers [OK]

Common Mistakes:

• Using aria-hidden to label elements
• Confusing aria-checked with aria-label
• Applying aria-live incorrectly on static buttons

3. What will be the effect of this Angular template code on screen readers?

<input type="text" aria-describedby="emailHelp" />
<small id="emailHelp">Enter your email address</small>

medium

A. Screen readers will read the label twice

B. Screen readers will ignore the input field

C. Screen readers will read only 'input text' without description

D. Screen readers will read 'Enter your email address' when focusing the input

Solution

1. Step 1: Understand aria-describedby usage

   aria-describedby links an element to descriptive text read by screen readers.

2. Step 2: Analyze the code behavior

   The input references the small element with id 'emailHelp', so screen readers read that description on focus.

3. Final Answer:

   Screen readers will read 'Enter your email address' when focusing the input -> Option D

4. Quick Check:

   aria-describedby adds extra description [OK]

Hint: aria-describedby links input to extra text for screen readers [OK]

Common Mistakes:

• Thinking aria-describedby hides the input
• Assuming aria-describedby duplicates label reading
• Confusing aria-describedby with aria-label

4. Identify the accessibility issue in this Angular template:

<div role="button" tabindex="-1">Click me</div>

medium

A. tabindex="-1" prevents keyboard focus on the button role element

B. role="button" is invalid on a div

C. Missing aria-label attribute

D. The div should use <span> instead

Solution

1. Step 1: Understand tabindex="-1" effect

   tabindex="-1" removes the element from keyboard focus order, so users can't tab to it.

2. Step 2: Check role and accessibility impact

   role="button" makes the div behave like a button, but without keyboard focus, it's inaccessible.

3. Final Answer:

   tabindex="-1" prevents keyboard focus on the button role element -> Option A

4. Quick Check:

   tabindex="-1" removes keyboard focus [OK]

Hint: tabindex="-1" removes element from keyboard tab order [OK]

Common Mistakes:

• Thinking role="button" alone fixes accessibility
• Ignoring keyboard focus importance
• Assuming aria-label is always required

5. You want to improve accessibility for a custom Angular dropdown component. Which combination is best practice?

hard

A. Use aria-hidden="true" on all dropdown items

B. Add only visual styles and skip ARIA roles

C. Use ARIA roles like role="listbox", keyboard navigation, and test with screen readers

D. Disable keyboard navigation to avoid confusion

Solution

1. Step 1: Identify accessibility needs for custom dropdown

   Custom dropdowns need ARIA roles to inform assistive tech and keyboard support for navigation.

2. Step 2: Evaluate options for best practice

   Use ARIA roles like role="listbox", keyboard navigation, and test with screen readers includes ARIA roles, keyboard navigation, and testing, which covers accessibility well. Others ignore key accessibility aspects or harm usability.

3. Final Answer:

   Use ARIA roles like role="listbox", keyboard navigation, and test with screen readers -> Option C

4. Quick Check:

   ARIA + keyboard + testing = accessible dropdown [OK]

Hint: Combine ARIA roles and keyboard support for custom components [OK]

Common Mistakes:

• Relying only on visual styles
• Hiding interactive elements with aria-hidden
• Disabling keyboard navigation