Web Development Web Accessibility 3

Question 1

What does the `aria-describedby` attribute do?

Accepted Answer

Links an element to additional descriptive text read by screen readers

Answer

`aria-describedby` references one or more elements whose text content provides a longer description, which screen readers announce after the element's label.

Question 2

What CSS media query should developers use to respect users' operating system preference for reduced motion?

Accepted Answer

@media (prefers-reduced-motion: reduce)

Answer

`@media (prefers-reduced-motion: reduce)` detects when the user has enabled a reduced-motion setting in their OS, allowing developers to disable or minimize animations.

Question 3

What is focus management in the context of single-page applications (SPAs)?

Accepted Answer

Programmatically moving keyboard focus to the appropriate element after route changes or modal openings

Answer

In SPAs, page transitions don't reload the page, so focus must be programmatically moved to the new content or heading to orient screen reader and keyboard users.

Question 4

What is the purpose of the `lang` attribute on the `<html>` element?

Accepted Answer

Tells screen readers and browsers the primary language of the document for correct pronunciation

Answer

The `lang` attribute on `<html>` (e.g., `lang="en"`) informs screen readers which language to use for pronunciation rules and helps translation tools.

Question 5

What does the `aria-expanded` attribute communicate to assistive technologies?

Accepted Answer

Whether a collapsible widget (like an accordion or dropdown) is currently open or closed

Answer

`aria-expanded` is used on toggle controls to indicate whether their associated collapsible section is currently visible (`true`) or hidden (`false`).

Web Development Practice Test

Web Development Practice Test

Web Development Web Accessibility 3