ARIA attributes in templates in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding ARIA roles in Angular templates

Which ARIA role should you add to a

element in an Angular template to improve accessibility?

A role="banner"

B role="contentinfo"

C role="main"

D role="navigation"

💡 Hint

Think about the semantic purpose of the

element and which ARIA role matches it.

elements represent navigation sections. The ARIA role "navigation" explicitly tells assistive technologies that this is a navigation landmark.

📝 Syntax

intermediate

Binding ARIA attributes dynamically in Angular

In Angular, how do you correctly bind the aria-label attribute to a component property named 'labelText' in the template?

Angular

<button _____>Click me</button>

A (aria-label)="labelText"

B [attr.aria-label]="labelText"

C aria-label="[labelText]"

D aria-label="{{labelText}}"

💡 Hint

Angular uses square brackets for property binding.

To bind an attribute dynamically, use square brackets with the attribute name: [attr.aria-label]. Using interpolation inside quotes works for normal attributes but is not recommended for ARIA attributes.

❓ rendering

advanced

Effect of ARIA attributes on screen reader output

Given this Angular template snippet, what will a screen reader announce when focusing on the button?

<button [attr.aria-pressed]="isPressed">Toggle</button>

Assuming isPressed is true.

A Button, Toggle, pressed

B Button, Toggle, not pressed

C Button, Toggle

D Button, Toggle, checked

💡 Hint

aria-pressed indicates toggle state and is read as 'pressed' or 'not pressed'.

When aria-pressed is true, screen readers announce the button as pressed. This helps users understand the toggle state.

❓ selector

advanced

Selecting elements with ARIA attributes in Angular templates

Which CSS selector correctly targets all elements with an aria-label attribute in an Angular component's styles?

A #aria-label

B .aria-label

C [aria-label]

D aria-label

💡 Hint

Attribute selectors use square brackets in CSS.

The selector [aria-label] matches any element that has an aria-label attribute, regardless of its value.

❓ accessibility

expert

Ensuring keyboard accessibility with ARIA in Angular

You have a custom dropdown component in Angular that uses a div with role="listbox" and div children with role="option". Which ARIA attribute is essential to update dynamically to indicate the currently focused option for keyboard users?

A aria-selected

B aria-checked

C aria-expanded

D aria-hidden

💡 Hint

This attribute tells assistive technologies which option is chosen or focused.

aria-selected should be set to true on the currently focused or selected option to inform screen readers about the active choice.