You are building an accessible toggle button in Angular that updates aria-pressed dynamically. Which approach ensures the attribute updates correctly and notifies assistive technologies?
hard📝 Application Q8 of 15
Angular - Internationalization and Accessibility
You are building an accessible toggle button in Angular that updates aria-pressed dynamically. Which approach ensures the attribute updates correctly and notifies assistive technologies?
ABind <code>aria-pressed</code> using <code>[attr.aria-pressed]="isActive.toString()"</code> and update <code>isActive</code> on click
BSet <code>aria-pressed</code> statically to "true" and toggle button text instead
CUse <code>aria-pressed</code> without binding and rely on CSS classes for state
DBind <code>aria-pressed</code> using interpolation like <code>aria-pressed="{{isActive}}"</code> without converting to string
Step-by-Step Solution
Solution:
Step 1: Understand ARIA attribute requirements
aria-pressed expects string values "true" or "false".
Step 2: Binding approach
Using [attr.aria-pressed]="isActive.toString()" ensures the boolean is converted to a string, which is valid.
Step 3: Notify assistive tech
Updating the bound property triggers Angular change detection, updating the attribute and notifying screen readers.
Step 4: Why others are incorrect
Set aria-pressed statically to "true" and toggle button text instead is static and does not update; C relies on CSS which is not accessible; D may bind boolean directly, which is invalid.
Final Answer:
Bind aria-pressed using [attr.aria-pressed]="isActive.toString()" and update isActive on click -> Option A
Quick Check:
Convert booleans to strings for ARIA attributes [OK]
Quick Trick:Convert booleans to strings when binding ARIA attributes [OK]
Common Mistakes:
Binding booleans directly without conversion
Using static ARIA attributes without updates
Relying on CSS instead of ARIA for accessibility
Master "Internationalization and Accessibility" in Angular
9 interactive learning modes - each teaches the same concept differently
