Angular - Internationalization and Accessibility
You want to ensure an Angular modal dialog is accessible. Which combination of ARIA attributes should you use on the modal container?
You want to ensure an Angular modal dialog is accessible. Which combination of ARIA attributes should you use on the modal container?
hard📝 Application Q8 of 15
Step-by-Step Solution
Solution:
Step 1: Identify correct role for modal dialogs
role="dialog" indicates a dialog window to assistive technologies.Step 2: Use aria-modal and aria-labelledby
aria-modal="true" signals modal behavior; aria-labelledby links to the dialog's title for screen readers.Final Answer:
role="dialog" aria-modal="true" aria-labelledby="modalTitle" -> Option CQuick Check:
Modal dialog ARIA = role dialog + aria-modal [OK]
Quick Trick: Use role dialog with aria-modal and labelledby for modals [OK]
Common Mistakes:
- Using role alert instead of dialog
- Setting aria-hidden on visible modal
- Using role button for modal container
Master "Internationalization and Accessibility" in Angular
Want More Practice?
15+ quiz questions · All difficulty levels · Free
Free Signup - Practice All QuestionsMore Angular Quizzes