Web Accessibility Flashcards
7 cards from real Web Development practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 7 Web Accessibility flashcards as text
What does the `aria-describedby` attribute do?
Answer: Links an element to additional descriptive text read by screen readers
`aria-describedby` references one or more elements whose text content provides a longer description, which screen readers announce after the element's label.
What CSS media query should developers use to respect users' operating system preference for reduced motion?
Answer: @media (prefers-reduced-motion: reduce)
`@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.
What is focus management in the context of single-page applications (SPAs)?
Answer: Programmatically moving keyboard focus to the appropriate element after route changes or modal openings
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.
What is the purpose of the `lang` attribute on the `` element?
Answer: Tells screen readers and browsers the primary language of the document for correct pronunciation
The `lang` attribute on `` (e.g., `lang="en"`) informs screen readers which language to use for pronunciation rules and helps translation tools.
What does the `aria-expanded` attribute communicate to assistive technologies?
Answer: Whether a collapsible widget (like an accordion or dropdown) is currently open or closed
`aria-expanded` is used on toggle controls to indicate whether their associated collapsible section is currently visible (`true`) or hidden (`false`).
Which of the following browser-based tools is most commonly used to run an automated accessibility audit on a web page?
Answer: Lighthouse (in Chrome DevTools)
Lighthouse, built into Chrome DevTools, includes an Accessibility audit that checks for common WCAG violations using the axe-core engine.
When an icon button has no visible text label, which approach best provides an accessible name for screen readers?
Answer: Use `aria-label` to provide a descriptive text name
`aria-label` directly provides a text name for the button that screen readers announce, overriding any absent or insufficient visible text.
How this page was made: written with AI tools. We have not yet matched this exam's facts to an official source, so confirm fees, dates and rules with the exam body. Not reviewed by a subject-matter expert. Editorial policy