PEAT User Interface & Accessibility 3 — Questions and Answers
Question 1: A user testing a web app with a screen reader finds that a modal dialog does not trap keyboard focus. Which WCAG Success Criterion does this violate?
- 1.4.3 Contrast (Minimum)
- 2.1.2 No Keyboard Trap
- 2.4.3 Focus Order (Correct answer)
- 4.1.2 Name, Role, Value
Correct answer: 2.4.3 Focus Order
SC 2.4.3 (Focus Order) requires that focus moves in a logical sequence; modal dialogs must also manage focus containment within them.
Question 2: What is the purpose of aria-live regions in a web application?
- To animate content on screen
- To announce dynamic content updates to screen readers without a page reload (Correct answer)
- To mark regions that require login
- To specify the language of a section
Correct answer: To announce dynamic content updates to screen readers without a page reload
aria-live regions inform assistive technologies to announce dynamically updated content (e.g., status messages) without requiring user navigation.
Question 3: Which attribute associates a <label> element with its corresponding form input for accessibility?
- aria-label
- for (matching input's id) (Correct answer)
- name
- placeholder
Correct answer: for (matching input's id)
The 'for' attribute on a <label> linked to the input's 'id' creates an explicit association that assistive technologies can communicate.
Question 4: In PEAT's UI accessibility assessment, which scenario is an example of a 'keyboard trap'?
- A link opens in a new tab
- Focus enters a widget but cannot be moved away with standard keys (Correct answer)
- A button requires double-clicking
- An image has no alt text
Correct answer: Focus enters a widget but cannot be moved away with standard keys
A keyboard trap occurs when focus enters a component but the user cannot move focus away using standard keyboard commands, violating WCAG SC 2.1.2.
Question 5: Which WCAG conformance level addresses enhanced contrast (7:1 ratio) for normal text?
- Level A
- Level AA
- Level AAA (Correct answer)
- Level B
Correct answer: Level AAA
WCAG SC 1.4.6 (Contrast Enhanced) at Level AAA requires a contrast ratio of at least 7:1 for normal text.
Question 6: What is the role of the 'tabindex' attribute in web accessibility?
- It sets the font size for tab labels
- It controls the order and focusability of elements via keyboard Tab key (Correct answer)
- It defines the number of tab stops on a page
- It hides elements from the tab order completely when set to 1
Correct answer: It controls the order and focusability of elements via keyboard Tab key
The tabindex attribute determines whether an element is focusable and its position in the sequential keyboard navigation order.
Question 7: According to WCAG 2.1, which type of content is exempt from the color contrast requirement?
- Body text smaller than 12px
- Inactive (disabled) user interface components (Correct answer)
- Bold text at 14pt
- Hyperlinks in navigation menus
Correct answer: Inactive (disabled) user interface components
WCAG SC 1.4.3 explicitly exempts inactive UI components (disabled controls) from the contrast ratio requirement.
PEAT User Interface & Accessibility 3
A user testing a web app with a screen reader finds that a modal dialog does not trap keyboard focus.
Which WCAG Success Criterion does this violate?