Web Programming Web Accessibility and ARIA 1 — Questions and Answers
Question 1: What does ARIA stand for in the context of web accessibility?
- Accessible Rich Internet Applications (Correct answer)
- Automated Responsive Interface Architecture
- Advanced Rendering Interface API
- Application Runtime Integration Attributes
Correct answer: Accessible Rich Internet Applications
ARIA stands for Accessible Rich Internet Applications, a set of attributes that define ways to make web content more accessible to people with disabilities.
Question 2: Which HTML attribute is used to provide a text alternative for an image for screen readers?
- title
- alt (Correct answer)
- aria-label
- aria-describedby
Correct answer: alt
The `alt` attribute on an `<img>` element provides a text alternative that screen readers announce when the image cannot be seen.
Question 3: What is the correct WCAG principle that requires content to be understandable to users?
- Perceivable
- Operable
- Understandable (Correct answer)
- Robust
Correct answer: Understandable
The WCAG 'Understandable' principle requires that information and the operation of the user interface must be understandable.
Question 4: Which ARIA role should be applied to a navigation landmark element that doesn't use the native <nav> tag?
- role="main"
- role="navigation" (Correct answer)
- role="banner"
- role="region"
Correct answer: role="navigation"
`role="navigation"` designates a landmark region containing navigational links, equivalent to the native `<nav>` element.
Question 5: What minimum color contrast ratio does WCAG 2.1 AA require for normal body text?
- 3:1
- 4.5:1 (Correct answer)
- 7:1
- 2:1
Correct answer: 4.5:1
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text to ensure it is readable by users with low vision.
Question 6: Which attribute should be used to associate a form input with its label when they are not adjacent in the DOM?
- aria-label
- aria-labelledby (Correct answer)
- aria-describedby
- for
Correct answer: aria-labelledby
`aria-labelledby` references the ID of another element that serves as the label, allowing non-adjacent associations for screen readers.
Question 7: What does `aria-hidden="true"` do when applied to an element?
- Hides the element visually on screen
- Removes the element from the accessibility tree (Correct answer)
- Prevents the element from receiving keyboard focus
- Both hides it visually and removes it from the accessibility tree
Correct answer: Removes the element from the accessibility tree
`aria-hidden="true"` removes the element and its children from the accessibility tree so screen readers ignore it, but it remains visually visible.
Web Programming Web Accessibility and ARIA 1
What does ARIA stand for in the context of web accessibility?