Web Programming Web Accessibility and ARIA 2 — Questions and Answers
Question 1: Which keyboard key is the standard for activating a button or link that has keyboard focus?
- Tab
- Shift
- Enter (Correct answer)
- Escape
Correct answer: Enter
The Enter key activates focused links and buttons, and Space also activates buttons, making keyboard navigation possible without a mouse.
Question 2: What is the purpose of a 'skip navigation' link in web accessibility?
- To hide the navigation from search engines
- To allow keyboard users to bypass repetitive navigation and jump to main content (Correct answer)
- To provide a sitemap for users
- To collapse the navigation menu on mobile
Correct answer: To allow keyboard users to bypass repetitive navigation and jump to main content
A 'skip navigation' link lets keyboard and screen reader users skip over repetitive header/nav content to reach the main content directly, reducing keystrokes.
Question 3: Which ARIA attribute communicates that a section of the page is currently loading or being updated?
- aria-busy (Correct answer)
- aria-live
- aria-expanded
- aria-relevant
Correct answer: aria-busy
`aria-busy="true"` signals to assistive technology that a region is being updated and screen readers should wait before announcing changes.
Question 4: What does the `<label>` element's `for` attribute reference?
- The name attribute of the input
- The id attribute of the associated form control (Correct answer)
- The class attribute of the input
- The type attribute of the input
Correct answer: The id attribute of the associated form control
The `for` attribute on `<label>` must match the `id` attribute of the associated form control to create a programmatic association for accessibility.
Question 5: Which WCAG success criterion requires that all functionality be available from the keyboard?
- 1.4.3 Contrast Minimum
- 2.1.1 Keyboard (Correct answer)
- 2.4.7 Focus Visible
- 1.1.1 Non-text Content
Correct answer: 2.1.1 Keyboard
WCAG 2.1.1 Keyboard requires that all functionality be operable through a keyboard interface without requiring specific timing for individual keystrokes.
Question 6: What is the correct way to make a custom toggle button communicate its state to screen readers?
- Use different text content for each state
- Use aria-pressed="true" or aria-pressed="false" (Correct answer)
- Use aria-checked on the button element
- Use aria-selected to indicate the active state
Correct answer: Use aria-pressed="true" or aria-pressed="false"
`aria-pressed` is the correct ARIA attribute for toggle buttons, communicating whether the button is currently pressed (true) or not pressed (false).
Question 7: Which element should wrap the primary content of a page to create a main landmark for accessibility?
- <section>
- <article>
- <main> (Correct answer)
- <div role="content">
Correct answer: <main>
The `<main>` element creates a main landmark region, signaling to screen readers that this is the primary content of the page.
Web Programming Web Accessibility and ARIA 2
Which keyboard key is the standard for activating a button or link that has keyboard focus?