Web Development Web Accessibility 1 — Questions and Answers
Question 1: What does WCAG stand for?
- Web Content Accessibility Guidelines (Correct answer)
- Web Compliance and Governance Charter
- Website Coding Accessibility Guide
- Web Component Authoring Guidelines
Correct answer: Web Content Accessibility Guidelines
WCAG stands for Web Content Accessibility Guidelines, the international standard for making web content accessible to people with disabilities.
Question 2: Which HTML attribute provides alternative text for images, enabling screen readers to describe them?
- title
- aria-label
- alt (Correct answer)
- description
Correct answer: alt
The `alt` attribute on `<img>` elements provides a text alternative that screen readers announce when the image cannot be seen.
Question 3: What is the minimum color contrast ratio for normal-sized body text to meet WCAG 2.1 Level AA?
- 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 readability for users with low vision.
Question 4: Which semantic HTML element should be used to wrap the primary content of a web page?
- <section>
- <article>
- <main> (Correct answer)
- <div>
Correct answer: <main>
The `<main>` element represents the dominant content of the document and should appear only once per page, providing a landmark for screen reader users.
Question 5: What does setting `tabindex="0"` on a non-interactive element achieve?
- Removes the element from tab order
- Makes the element the first tab stop
- Adds the element to the natural tab order (Correct answer)
- Disables focus on the element
Correct answer: Adds the element to the natural tab order
A `tabindex` of `0` inserts the element into the tab order at its natural DOM position, making it keyboard-focusable without altering the order.
Question 6: Which ARIA attribute hides an element and all its children from the accessibility tree?
- aria-hidden="true" (Correct answer)
- role="presentation"
- aria-disabled="true"
- aria-live="off"
Correct answer: aria-hidden="true"
`aria-hidden="true"` removes the element from the accessibility tree so screen readers completely ignore it, useful for decorative content.
Question 7: Which HTML element is the most semantically correct for a site-wide navigation menu?
- <div role="nav">
- <nav> (Correct answer)
- <menu>
- <ul aria-label="navigation">
Correct answer: <nav>
The `<nav>` element is the dedicated semantic element for navigation, automatically exposing a `navigation` landmark role to assistive technologies.
Web Development Web Accessibility 1
What does WCAG stand for?