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

Sets the visible label for an element

Answer

Defines the tab order of an element

Answer

Specifies the language of an element's content

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 (no-animation)

Answer

@media (disable-transitions)

Answer

@media (motion: none)

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

Auto-saving form inputs when focus leaves a field

Answer

Preventing users from tabbing outside the browser window

Answer

Highlighting focused elements with a custom CSS outline

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

Specifies the encoding format of the document

Answer

Sets the default currency symbol for the page

Answer

Enables built-in browser spell-check for that language

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

Whether an element's width has been increased

Answer

Whether an image has been zoomed in

Answer

Whether a text area has exceeded its character limit

Question 6

Which of the following browser-based tools is most commonly used to run an automated accessibility audit on a web page?

Accepted Answer

Lighthouse (in Chrome DevTools)

Answer

GTmetrix

Answer

BrowserStack

Answer

W3C HTML Validator

Question 7

When an icon button has no visible text label, which approach best provides an accessible name for screen readers?

Accepted Answer

Use `aria-label` to provide a descriptive text name

Answer

Add a `title` attribute only

Answer

Wrap it in a `

`

Answer

Set `tabindex="-1"` to hide it from screen readers