Real Sites — Chapter Quiz

Question 1

1

For a clickable element that triggers an action (not navigation), the right tag is…

A<a>B<div onclick>C<button>D<span role="button">

<button> is keyboard-focusable, screen-reader-friendly, and styleable. Use it for actions. Use <a> for navigation.

Question 2

2

Removing the default focus outline (outline: none) without replacing it is an accessibility regression.

TTrueFFalse

Keyboard users rely on the focus ring to see where they are. If you remove it, replace it — usually with :focus-visible and a custom outline.

Question 3

3

The minimum contrast ratio for normal body text per WCAG AA is…

A2:1B3:1C4.5:1D7:1

AA requires 4.5:1 for body text and 3:1 for large text. AAA is 7:1 / 4.5:1.

Question 4

4

To respect users who prefer no animation, use…

A@media (no-animation)B@media (prefers-reduced-motion: reduce)CA JS detectionDBrowsers handle this automatically

prefers-reduced-motion exposes the OS setting. A global rule that drops transition/animation duration handles it site-wide.

Question 5

5

A modal opens. Where should focus go FIRST?

ANowhere — let the user clickBInto the modal, often on the first focusable element or a headingCBack to the trigger buttonDOn the document body

Programmatic focus moves into the modal. Trap focus while open. On close, return focus to the trigger.

Question 6

6

<ClientRouter /> from Astro is the only way to get view transitions.

TTrueFFalse

The View Transitions API is a browser feature. @view-transition (CSS) and document.startViewTransition() (JS) work in any site. Astro wraps that for you, but it's not exclusive.

Question 7

7

For a basic static HTML site, the cheapest place to deploy is…

AAn AWS EC2 instanceBA free static host like Netlify or Cloudflare PagesCA WordPress hosting planDYour own VPS

Free static hosts give you HTTPS, custom domains, global CDN — for $0 on the free tier. Right tool for static HTML/CSS.

Question 8

8

Inline a tiny version of critical styles in the <head> to speed up first paint. This is called __________ CSS.

Critical CSS is the above-the-fold styles inlined to render first paint without waiting for an external stylesheet.

Test what you learned.