Web Development Web Accessibility 2 — Questions and Answers
Question 1: What does ARIA stand for in the context of web accessibility?
- Accessible Rich Internet Applications (Correct answer)
- Advanced Responsive Interface Architecture
- Automated Rendering and Interaction API
- Application Resource Integration Attributes
Correct answer: Accessible Rich Internet Applications
ARIA (Accessible Rich Internet Applications) is a W3C specification that adds semantic meaning to HTML elements for assistive technologies.
Question 2: Which HTML attribute correctly associates a `<label>` element with an `<input>` field?
- name
- for (Correct answer)
- bind
- ref
Correct answer: for
The `for` attribute on a `<label>` must match the `id` of the associated input, creating a programmatic link that benefits both screen reader users and mouse users.
Question 3: What is the primary purpose of a 'skip navigation' link at the top of a web page?
- To redirect mobile users to a simpler page
- To allow keyboard users to bypass repetitive navigation and jump to main content (Correct answer)
- To hide the navigation on print stylesheets
- To improve page load performance
Correct answer: To allow keyboard users to bypass repetitive navigation and jump to main content
Skip navigation links let keyboard and screen reader users skip past repetitive header/nav content to reach the main content quickly, avoiding tedious tabbing.
Question 4: What is the purpose of `aria-live` regions in a web application?
- To animate elements when they appear
- To announce dynamic content updates to screen reader users without requiring focus (Correct answer)
- To synchronize content between browser tabs
- To enable real-time collaboration features
Correct answer: To announce dynamic content updates to screen reader users without requiring focus
`aria-live` marks a region so that screen readers automatically announce content changes within it, which is essential for notifications, alerts, and chat messages.
Question 5: According to WCAG 2.1, Success Criterion 2.1.1 requires that all functionality be operable via what?
- Touch gestures only
- Mouse and touchpad
- Keyboard alone (Correct answer)
- Voice commands
Correct answer: Keyboard alone
SC 2.1.1 (Keyboard) requires all functionality to be available from a keyboard, ensuring users who cannot use a pointer device can fully interact with the site.
Question 6: Which semantic HTML element is the appropriate replacement for `<div class="header">`?
- <top>
- <banner>
- <header> (Correct answer)
- <head>
Correct answer: <header>
The `<header>` element is the semantic equivalent and exposes a `banner` landmark role when it is a direct child of `<body>`, aiding assistive technology navigation.
Question 7: What value of `role` should be used on a modal dialog element to properly convey its purpose to screen readers?
- role="window"
- role="dialog" (Correct answer)
- role="popup"
- role="overlay"
Correct answer: role="dialog"
`role="dialog"` tells screen readers the element is a dialog, prompting them to announce it as such and manage focus expectations accordingly.
Web Development Web Accessibility 2
What does ARIA stand for in the context of web accessibility?