Web Accessibility Practice Exam

Question 1 Web Accessibility

Best test for accessibility?

Only for app-style menus that behave like desktop menus; typical site navigation should not. Boolean indicating a form field is required. Real users with disabilities — automated tools find a fraction; lived experience finds the rest. Live regions announce dynamic content changes to assistive technologies when the page updates without a full reload.

Question 2 Web Accessibility

What is color contrast?

It means respecting users who prefer less animation by reducing or disabling motion-heavy effects. No more than 3 flashes per second; otherwise risk of triggering photosensitive seizures. Some users cannot perceive color differences reliably, so status and meaning should also be communicated with text or icons. Color contrast is the visual difference between text and background, which must be strong enough for readable content.

Question 3 Web Accessibility

What is "accessibility persona"?

User profile describing assistive tech, abilities, and constraints — helps designers think beyond visual UI. Often fails WCAG — placeholder is decorative; never use as primary label. aria-live="polite" region announcing success after form submission. CSS pattern to hide content visually but keep it for screen readers — uses clip, position absolute, etc.

Question 4 Web Accessibility

WCAG AAA contrast?

7:1 for normal text; 4.5:1 for large text — stricter, harder to meet with brand palettes. The accessible name is the text assistive technologies use to identify a control, often from a label, aria-label, or button text. aria-labelledby → aria-label → native label → text content → title. Web Content Accessibility Guidelines — the international standard from W3C's Web Accessibility Initiative (WAI).

Question 5 Web Accessibility

Why is touch target size important?

The modal should trap focus while open, restore focus when closed, and expose proper dialog semantics. Some users cannot perceive color differences reliably, so status and meaning should also be communicated with text or icons. When a passage is in different language from page, mark with lang on element. Larger interactive targets make controls easier to use for people with motor impairments and on mobile devices.

Question 6 Web Accessibility

What is aria-controls?

Often fails WCAG — placeholder is decorative; never use as primary label. Points to the element controlled by the current element (e.g., trigger button to its disclosure). Screen reader users jump between headings to scan pages quickly — like sighted users skim. No — exactly one <main> per page.

Question 7 Web Accessibility

What is "shift left" for accessibility?

A reading order problem occurs when visual layout and DOM order diverge so assistive users experience confusing sequencing. On purely decorative icons, redundant elements, and content visually hidden via display: none would already remove it. Building accessibility from the start of design and development — far cheaper than retrofitting. Drafting now — outcome-based scoring, broader scope (cognitive, native apps, hardware). Years away from finalization.

Question 8 Web Accessibility

What animations should respect reduced-motion?

No — exactly one <main> per page. Each UI control must expose its name, role, and current value to assistive tech — WCAG 4.1.2. Often grade 6-8 for general public; varies by audience. Tools like Hemingway, hemingwayapp.com help. Decorative motion, parallax, autoplay video, large transitions — meaningful motion can usually remain.

Question 9 Web Accessibility

What is "redundant entry"?

An attribute defining what kind of UI an element is (role="button", role="dialog"). Content must be robust enough for varied user agents including assistive tech — valid markup, ARIA when needed. Headings should descend logically (h1 → h2 → h3) — skipping levels confuses screen reader navigation. Don't make users re-enter info they've already provided in the same process unless essential.

Question 10 Web Accessibility

What is focus management?

user-scalable=no or maximum-scale=1 — violates WCAG; never use. Transcripts help people who cannot access audio and also improve searchability and review. Programmatic control of focus, especially when content changes (modals, route changes, errors). ~8% of men, ~0.5% of women have some form — most common is red-green.

Question 11 Web Accessibility

Long-form content accessibility?

Interrupts current speech to announce — for urgent updates like errors or alerts. Focus trapping keeps keyboard focus inside an active component like a modal until it is intentionally closed. Use headings for sections, bullet lists for parallel items, descriptive link text, language attributes. Often fails WCAG — placeholder is decorative; never use as primary label.

Question 12 Web Accessibility

Why should form fields have labels?

Text must scale up to 200% without loss of functionality — avoid fixed pixel sizes for body text. :focus matches any focused element; :focus-visible matches only when browser determines keyboard navigation. Supplementary info beyond the name — derived from aria-describedby, title attribute (with caveats). Labels help all users understand inputs and are critical for screen-reader navigation and focus context.

Question 13 Web Accessibility

What is a "reading age" target?

Often grade 6-8 for general public; varies by audience. Tools like Hemingway, hemingwayapp.com help. Should reflect the popup type — using "true" works but specific values (menu, listbox) give better hints. Broader design philosophy: designing for the widest range of human variation; accessibility is a subset. Build interfaces that work without sight, without hearing, without a mouse, and without cognitive load — and the result is better for everyone.

Question 14 Web Accessibility

Why is testing with keyboard alone useful?

Hints expected input type (name, email, address, etc.) — improves UX and assistive autofill. Short sentences, common words, active voice, one idea per paragraph, clear next steps. Built into Android — primary Android screen reader; settings → accessibility. It quickly reveals missing focus states, unreachable controls, and broken interaction order.

Question 15 Web Accessibility

What is zoom support?

Constrains focus within a region (typically a modal) — Tab from last item wraps to first. WCAG 1.4.4: content must remain functional at 200% zoom — set viewport meta correctly. An attribute defining what kind of UI an element is (role="button", role="dialog"). Interrupts current speech to announce — for urgent updates like errors or alerts.

Question 16 Web Accessibility

Why is color alone a weak signal?

Closes modals, dropdowns, tooltips; restores prior state. Users expect this universally. HTML5 landmarks (header, nav, main, aside, footer) or ARIA landmarks (role="navigation") — screen readers can jump between them. Provide pause control, indicate slide count, announce current slide, allow keyboard navigation. Some users cannot perceive color differences reliably, so status and meaning should also be communicated with text or icons.

Question 17 Web Accessibility

What is aria-hidden?

Removes element from accessibility tree — for decorative content invisible to screen readers. First focusable element on each page — lets keyboard users skip repeated navigation. Browser's parallel structure exposing accessibility info to assistive tech — built from DOM + ARIA. Supplementary info beyond the name — derived from aria-describedby, title attribute (with caveats).

Question 18 Web Accessibility

What is semantic HTML?

Marks the current item in a set — "page", "step", "location", "true" values. WebAIM Contrast Checker, axe DevTools, Stark plugin, Chrome DevTools color picker. Using built-in elements like button, nav, main, and label to convey meaning and behavior correctly. No — exactly one <main> per page.

Question 19 Web Accessibility

What is tabindex?

Attribute controlling focusability; 0 = focusable in DOM order, -1 = programmatically focusable only, >0 = avoid. Decorative motion, parallax, autoplay video, large transitions — meaningful motion can usually remain. Web accessibility is the practice of building websites and apps that people with disabilities can perceive, understand, navigate, and use. Using built-in elements like button, nav, main, and label to convey meaning and behavior correctly.

Question 20 Web Accessibility

Cognitive accessibility?

Removes element from accessibility tree — for decorative content invisible to screen readers. Often overlooked: plain language, predictable patterns, error prevention, supportive UX for users with cognitive disabilities. Browse with NVDA or VoiceOver, verify announcements match intent, focus order is logical, all functions work. Header is a button with aria-expanded; content has aria-labelledby pointing to header; arrow keys optional.

Question 21 Web Accessibility

Placeholder as label?

Screen-reader users may not notice visual-only updates unless the interface exposes them with the right semantics. Information and UI must be presentable to users in ways they can perceive — alt text, captions, contrast. Supplementary info beyond the name — derived from aria-describedby, title attribute (with caveats). Insufficient — disappears on input, low contrast, no association with assistive tech. Always pair with a visible label.

Question 22 Web Accessibility

Why is heading navigation important?

Screen reader users jump between headings to scan pages quickly — like sighted users skim. Often grade 6-8 for general public; varies by audience. Tools like Hemingway, hemingwayapp.com help. Visible focus helps keyboard users know which interactive element is currently active. On blur (not on every keystroke) — interrupting reduces accessibility and increases frustration.

Question 23 Web Accessibility

What is the tab order?

Transcripts help people who cannot access audio and also improve searchability and review. The most important fixes remove barriers that prevent people from completing core tasks. Order in which focus moves through interactive elements via Tab key. Removes element from accessibility tree — for decorative content invisible to screen readers.

Question 24 Web Accessibility

What is an accessibility audit?

Assistive software that converts visual content to speech or braille; common ones: NVDA (free Windows), JAWS (paid Windows), VoiceOver (macOS/iOS), TalkBack (Android). The most important fixes remove barriers that prevent people from completing core tasks. A structured review of UI patterns, markup, behavior, and testing results to find and prioritize accessibility issues. Provides an accessible name when no visible label exists or the visible label is insufficient.

Question 25 Web Accessibility

Accessible name calculation precedence?

Buttons come with keyboard support, focus behavior, and assistive-technology semantics by default. ~8% of men, ~0.5% of women have some form — most common is red-green. aria-labelledby → aria-label → native label (e.g., <label for=> or alt text) → text content. A landmark like header, nav, main, or footer helps assistive technology users move around the page quickly.

Question 26 Web Accessibility

Plain language tips?

"Don't use ARIA if a native HTML element can do the job" — native semantics are more reliable. Short sentences, common words, active voice, one idea per paragraph, clear next steps. Shown only on hover (mouse), unreliable for keyboard, not consistently announced — avoid as sole label. Use real table markup with headers and relationships so assistive technology can interpret rows and columns correctly.

Question 27 Web Accessibility

Microsoft inclusive design toolkit?

Set of principles and methods for inclusive design — recognize exclusion, learn from diversity, solve for one extend to many. Focus trapping keeps keyboard focus inside an active component like a modal until it is intentionally closed. It is using assistive technologies like VoiceOver, NVDA, or JAWS to verify real accessibility behavior. @media (forced-colors: active) { ... } — adapt to Windows High Contrast and similar modes.

Question 28 Web Accessibility

What is the "curb cut effect"?

Public document acknowledging accessibility status, known issues, contact for issues — often legally required. Accessibility features (curb cuts, captions, dark mode) benefit everyone, not just the target group. It means respecting users who prefer less animation by reducing or disabling motion-heavy effects. Assistive software that converts visual content to speech or braille; common ones: NVDA (free Windows), JAWS (paid Windows), VoiceOver (macOS/iOS), TalkBack (Android).

Question 29 Web Accessibility

What is captions vs subtitles?

Captions include all audio info (dialogue + sounds + speaker IDs); subtitles assume hearing audience and only translate dialogue. <meta name="viewport" content="width=device-width, initial-scale=1"> — don't disable user scaling. Short sentences, common words, active voice, one idea per paragraph, clear next steps. On blur (not on every keystroke) — interrupting reduces accessibility and increases frustration.

Question 30 Web Accessibility

What is "purpose of input" (WCAG 1.3.5)?

Use autocomplete attribute for common input fields — assists users and password managers. Often overlooked: plain language, predictable patterns, error prevention, supportive UX for users with cognitive disabilities. The order assistive tech reads content — should match logical content order, not visual position. Avoid CAPTCHAs that require mouse drag; use audio alternative, math, or trust signals.

Question 31 Web Accessibility

What is aria-describedby?

WCAG 1.4.12: content remains usable when line height ≥ 1.5, paragraph spacing ≥ 2× font size, letter spacing ≥ 0.12× font size, word spacing ≥ 0.16× font size. Respect prefers-color-scheme; ensure both modes meet contrast; offer manual override. References elements that provide additional description — e.g., helper text for form inputs. Indicates a region is being updated — screen readers can pause until done.

Question 32 Web Accessibility

showModal() vs show() on <dialog>?

showModal() opens as true modal (focus trap, backdrop, ESC); show() opens as non-modal. A skip link is a hidden-until-focused link that lets keyboard users jump past repeated navigation to the main content. Accessibility features (curb cuts, captions, dark mode) benefit everyone, not just the target group. Alternative text is a short description of an image used by screen readers and shown when images fail to load.

Question 33 Web Accessibility

What is the contrast for placeholder text?

Public document acknowledging accessibility status, known issues, contact for issues — often legally required. Order in which focus moves through interactive elements via Tab key. Often fails WCAG — placeholder is decorative; never use as primary label. Built into Android — primary Android screen reader; settings → accessibility.

Question 34 Web Accessibility

What does WCAG stand for?

Web Content Accessibility Guidelines — the international standard from W3C's Web Accessibility Initiative (WAI). WebAIM Contrast Checker, axe DevTools, Stark plugin, Chrome DevTools color picker. "Don't use ARIA if a native HTML element can do the job" — native semantics are more reliable. On blur (not on every keystroke) — interrupting reduces accessibility and increases frustration.

Question 35 Web Accessibility

What is the difference between :focus and :focus-visible?

Captioning provides synchronized text for spoken dialogue and important audio in video content. HTML5 landmarks (header, nav, main, aside, footer) or ARIA landmarks (role="navigation") — screen readers can jump between them. No more than 3 flashes per second; otherwise risk of triggering photosensitive seizures. :focus matches any focused element; :focus-visible matches only when browser determines keyboard navigation.

Question 36 Web Accessibility

What is aria-atomic?

Using built-in elements like button, nav, main, and label to convey meaning and behavior correctly. Tells assistive tech to announce entire region when any part changes (vs. just the changed part). Help mechanisms (contact, FAQ) should appear in same relative location on every page they exist. Each UI control must expose its name, role, and current value to assistive tech — WCAG 4.1.2.

Question 37 Web Accessibility

Should you have multiple main elements?

Marks the current item in a set — "page", "step", "location", "true" values. No — exactly one <main> per page. The most important fixes remove barriers that prevent people from completing core tasks. Web accessibility is the practice of building websites and apps that people with disabilities can perceive, understand, navigate, and use.

Question 38 Web Accessibility

Why do transcripts matter?

Indicates element triggers a popup; values: menu, listbox, tree, grid, dialog, true. On blur (not on every keystroke) — interrupting reduces accessibility and increases frustration. Transcripts help people who cannot access audio and also improve searchability and review. Custom controls without semantics, color-only signaling, missing alt text, low contrast, keyboard traps, autoplay video.

Question 39 Web Accessibility

Why are descriptive link labels important?

References another element by ID whose text serves as the accessible name — preferred over aria-label when visible text exists. Help mechanisms (contact, FAQ) should appear in same relative location on every page they exist. Users navigating by links alone need to know where each link goes without surrounding visual context. Avoid CAPTCHAs that require mouse drag; use audio alternative, math, or trust signals.

Question 40 Web Accessibility

What is the "aria-haspopup" trap?

Screen reader users jump between headings to scan pages quickly — like sighted users skim. Information and operation must be understandable — readable, predictable, helps users avoid mistakes. Should reflect the popup type — using "true" works but specific values (menu, listbox) give better hints. No — exactly one <main> per page.

Question 41 Web Accessibility

What is a form label?

<label for="id"> or <label> wrapping the input — provides accessible name and increases click target. Web accessibility is the practice of building websites and apps that people with disabilities can perceive, understand, navigate, and use. Captioning provides synchronized text for spoken dialogue and important audio in video content. showModal() opens as true modal (focus trap, backdrop, ESC); show() opens as non-modal.

Question 42 Web Accessibility

What does "Robust" mean?

7:1 for normal text; 4.5:1 for large text — stricter, harder to meet with brand palettes. WCAG 1.4.4: content must remain functional at 200% zoom — set viewport meta correctly. Use text or icon plus aria-required="true" or the native required attribute. Content must be robust enough for varied user agents including assistive tech — valid markup, ARIA when needed.

Question 43 Web Accessibility

What does "Understandable" mean?

Placeholders disappear as users type and usually provide weaker context than persistent visible labels. Decorative images can use empty alt text so assistive technologies skip them. Information and operation must be understandable — readable, predictable, helps users avoid mistakes. Announces when screen reader is idle — for non-urgent updates like form validation.

Question 44 Web Accessibility

What does "Perceivable" mean?

Narration describing visual elements during natural pauses — for blind users to follow visual content. Information and UI must be presentable to users in ways they can perceive — alt text, captions, contrast. Announces when screen reader is idle — for non-urgent updates like form validation. Built into macOS and iOS — enable with Cmd+F5 (macOS) or triple-click home/side button (iOS).

Question 45 Web Accessibility

Common testing tools?

When a passage is in different language from page, mark with lang on element. Short sentences, common words, active voice, one idea per paragraph, clear next steps. <meta name="viewport" content="width=device-width, initial-scale=1"> — don't disable user scaling. axe DevTools (browser ext), Lighthouse, WAVE, Pa11y, accessibility insights, manual screen reader testing.

Question 46 Web Accessibility

What is aria-selected?

No more than 3 flashes per second; otherwise risk of triggering photosensitive seizures. Login should not require cognitive test (puzzle, transcription) — biometric or paste-friendly methods preferred. State for selected items in a listbox, tab, or grid. Mobile-friendly layouts often benefit accessibility — larger touch targets, better text scale.

Question 47 Web Accessibility

What is aria-live="assertive"?

On blur (not on every keystroke) — interrupting reduces accessibility and increases frustration. Captions (1.2.2 AA), audio description if visual info isn't conveyed in audio (1.2.5 AA). user-scalable=no or maximum-scale=1 — violates WCAG; never use. Interrupts current speech to announce — for urgent updates like errors or alerts.

Question 48 Web Accessibility

Decorative image alt text?

References elements that provide additional description — e.g., helper text for form inputs. Empty alt: <img alt=""> — screen reader skips entirely. Marks the current item in a set — "page", "step", "location", "true" values. Each page needs a descriptive <title> — screen readers announce it on page load.

Question 49 Web Accessibility

SVG accessibility?

Use <title> child for name, <desc> for description, role="img" on the <svg> element. Visible focus helps keyboard users know which interactive element is currently active. <meta name="viewport" content="width=device-width, initial-scale=1"> — don't disable user scaling. Decorative motion, parallax, autoplay video, large transitions — meaningful motion can usually remain.

Question 50 Web Accessibility

What is a screen reader?

Assistive software that converts visual content to speech or braille; common ones: NVDA (free Windows), JAWS (paid Windows), VoiceOver (macOS/iOS), TalkBack (Android). WCAG 1.4.10: content should reflow to 320 CSS pixels wide without horizontal scrolling. WCAG stands for Web Content Accessibility Guidelines, the main standard used to evaluate digital accessibility. Native HTML element with built-in modal semantics, focus management, and ESC handling.