Which is the correct syntax to bind the ARIA attribute aria-checked to a component property isChecked in an Angular template?

easy📝 Syntax Q3 of 15

Angular - Internationalization and Accessibility

Which is the correct syntax to bind the ARIA attribute aria-checked to a component property isChecked in an Angular template?

A<button bind-aria-checked="isChecked">Check</button>

B<button aria-checked="{{isChecked}}">Check</button>

C<button [aria-checked]="isChecked">Check</button>

D<button [attr.aria-checked]="isChecked">Check</button>

Step-by-Step Solution

Solution:

Step 1: Understand Angular binding for ARIA attributes
ARIA attributes must be bound using [attr.aria-...] syntax to bind to DOM attributes.
Step 2: Identify the correct syntax
<button [attr.aria-checked]="isChecked">Check</button> uses [attr.aria-checked] which is correct. <button aria-checked="{{isChecked}}">Check</button> uses interpolation which is not recommended for ARIA attributes. <button [aria-checked]="isChecked">Check</button> misses attr. prefix. <button bind-aria-checked="isChecked">Check</button> uses invalid syntax.
Final Answer:
<button [attr.aria-checked]="isChecked">Check</button> -> Option D
Quick Check:
Bind ARIA with [attr.aria-*] syntax [OK]

Quick Trick: Use [attr.aria-*] to bind ARIA attributes dynamically [OK]

Common Mistakes:

Master "Internationalization and Accessibility" in Angular

9 interactive learning modes - each teaches the same concept differently

Want More Practice?

15+ quiz questions · All difficulty levels · Free

More Angular Quizzes