Title: Web Accessibility — LearnCoachAssist

Q: What is web accessibility?
A: Web accessibility is the practice of building websites and apps that people with disabilities can perceive, understand, navigate, and use.

Q: Why does accessibility matter?
A: It improves inclusion, usability, legal compliance, and overall product quality for everyone.

Q: What is WCAG?
A: WCAG stands for Web Content Accessibility Guidelines, the main standard used to evaluate digital accessibility.

Q: What are the four WCAG principles?
A: Content should be Perceivable, Operable, Understandable, and Robust.

Q: What is keyboard accessibility?
A: It means all key functionality can be used without a mouse, typically through Tab, Shift+Tab, Enter, Space, and arrow keys.

Q: Why is visible focus important?
A: Visible focus helps keyboard users know which interactive element is currently active.

Q: What is semantic HTML?
A: Using built-in elements like button, nav, main, and label to convey meaning and behavior correctly.

Q: Why should buttons be used for actions instead of divs?
A: Buttons come with keyboard support, focus behavior, and assistive-technology semantics by default.

Q: What is alt text?
A: Alternative text is a short description of an image used by screen readers and shown when images fail to load.

Q: When can alt text be empty?
A: Decorative images can use empty alt text so assistive technologies skip them.

Q: What is color contrast?
A: Color contrast is the visual difference between text and background, which must be strong enough for readable content.

Q: Why is color alone a weak signal?
A: Some users cannot perceive color differences reliably, so status and meaning should also be communicated with text or icons.

Q: What is an accessible name?
A: The accessible name is the text assistive technologies use to identify a control, often from a label, aria-label, or button text.

Q: Why should form fields have labels?
A: Labels help all users understand inputs and are critical for screen-reader navigation and focus context.

Q: What is ARIA?
A: ARIA is a set of accessibility attributes that can improve semantics when native HTML alone is not enough.

Q: What is the first rule of ARIA?
A: Use native HTML semantics when possible before reaching for ARIA.

Q: What is a landmark region?
A: A landmark like header, nav, main, or footer helps assistive technology users move around the page quickly.

Q: Why are heading levels important?
A: A logical heading structure makes content easier to scan and navigate for both screen readers and sighted users.

Q: What is a skip link?
A: A skip link is a hidden-until-focused link that lets keyboard users jump past repeated navigation to the main content.

Q: What is an accessible modal requirement?
A: The modal should trap focus while open, restore focus when closed, and expose proper dialog semantics.

Q: Why should error messages be specific?
A: Specific error messages tell users what went wrong and how to fix it without guessing.

Q: What is screen-reader testing?
A: It is using assistive technologies like VoiceOver, NVDA, or JAWS to verify real accessibility behavior.

Q: What is reduced motion support?
A: It means respecting users who prefer less animation by reducing or disabling motion-heavy effects.

Q: Why is touch target size important?
A: Larger interactive targets make controls easier to use for people with motor impairments and on mobile devices.

Q: What is an accessibility audit?
A: A structured review of UI patterns, markup, behavior, and testing results to find and prioritize accessibility issues.

Q: What is live region behavior?
A: Live regions announce dynamic content changes to assistive technologies when the page updates without a full reload.

Q: What is the value of plain language in accessibility?
A: Clear language reduces cognitive load and makes interfaces easier to understand for a wider range of users.

Q: What is a good accessibility habit for teams?
A: Build accessibility checks into design, development, testing, and review instead of treating them as cleanup at the end.

Q: What is a form error summary?
A: A form error summary is a visible explanation of issues, often linked to individual fields so users can jump directly to what needs fixing.

Q: Why should placeholder text not replace labels?
A: Placeholders disappear as users type and usually provide weaker context than persistent visible labels.

Q: What is focus trapping?
A: Focus trapping keeps keyboard focus inside an active component like a modal until it is intentionally closed.

Q: Why should status changes be announced programmatically?
A: Screen-reader users may not notice visual-only updates unless the interface exposes them with the right semantics.

Q: What is an accessible table practice?
A: Use real table markup with headers and relationships so assistive technology can interpret rows and columns correctly.

Q: Why are descriptive link labels important?
A: Users navigating by links alone need to know where each link goes without surrounding visual context.

Q: What is a common misuse of ARIA?
A: Adding ARIA roles that conflict with native semantics and end up making an interface less accessible, not more.

Q: Why is testing with keyboard alone useful?
A: It quickly reveals missing focus states, unreachable controls, and broken interaction order.

Q: What is a reading order problem?
A: A reading order problem occurs when visual layout and DOM order diverge so assistive users experience confusing sequencing.

Q: What is captioning?
A: Captioning provides synchronized text for spoken dialogue and important audio in video content.

Q: Why do transcripts matter?
A: Transcripts help people who cannot access audio and also improve searchability and review.

Q: Why should accessibility issues be prioritized by user impact?
A: The most important fixes remove barriers that prevent people from completing core tasks.

Q: What does WCAG stand for?
A: Web Content Accessibility Guidelines — the international standard from W3C's Web Accessibility Initiative (WAI).

Q: What does "Perceivable" mean?
A: Information and UI must be presentable to users in ways they can perceive — alt text, captions, contrast.

Q: What does "Operable" mean?
A: UI components must be operable — keyboard accessible, enough time, no seizure triggers.

Q: What does "Understandable" mean?
A: Information and operation must be understandable — readable, predictable, helps users avoid mistakes.

Q: What does "Robust" mean?
A: Content must be robust enough for varied user agents including assistive tech — valid markup, ARIA when needed.

Q: What are the WCAG conformance levels?
A: A (minimum), AA (target for most regulations), AAA (highest, often impractical for entire sites).

Q: Why is AA the common target?
A: Most legal requirements (ADA, EAA, Section 508) reference AA — practical and substantial coverage.

Q: What is Section 508?
A: US federal law requiring federal agency electronic content to be accessible — references WCAG 2.0 AA.

Q: What is the ADA?
A: Americans with Disabilities Act — US civil rights law extended by courts to digital accessibility.

Q: What is the European Accessibility Act (EAA)?
A: EU directive (2025) requiring digital products and services to meet accessibility standards.

Q: What is the "first rule of ARIA"?
A: "Don't use ARIA if a native HTML element can do the job" — native semantics are more reliable.

Q: What is an ARIA role?
A: An attribute defining what kind of UI an element is (role="button", role="dialog").

Q: What is an aria-label?
A: Provides an accessible name when no visible label exists or the visible label is insufficient.

Q: What is aria-labelledby?
A: References another element by ID whose text serves as the accessible name — preferred over aria-label when visible text exists.

Q: What is aria-describedby?
A: References elements that provide additional description — e.g., helper text for form inputs.

Q: What is aria-hidden?
A: Removes element from accessibility tree — for decorative content invisible to screen readers.

Q: When should aria-hidden be true?
A: On purely decorative icons, redundant elements, and content visually hidden via display: none would already remove it.

Q: What is aria-live?
A: Announces dynamic content changes; values: off, polite, assertive.

Q: What is aria-live="polite"?
A: Announces when screen reader is idle — for non-urgent updates like form validation.

Q: What is aria-live="assertive"?
A: Interrupts current speech to announce — for urgent updates like errors or alerts.

Q: What is role="alert"?
A: Implies aria-live="assertive" + aria-atomic="true" — single attribute for important time-sensitive messages.

Q: What is aria-atomic?
A: Tells assistive tech to announce entire region when any part changes (vs. just the changed part).

Q: What is aria-expanded?
A: Boolean state for collapsible elements — true when expanded, false when collapsed.

Q: What is aria-controls?
A: Points to the element controlled by the current element (e.g., trigger button to its disclosure).

Q: What is aria-current?
A: Marks the current item in a set — "page", "step", "location", "true" values.

Q: What is aria-pressed?
A: State for toggle buttons — true, false, or mixed.

Q: What is aria-selected?
A: State for selected items in a listbox, tab, or grid.

Q: What is aria-disabled?
A: Indicates element is disabled but still focusable; differs from native disabled.

Q: What is aria-invalid?
A: Boolean indicating a form field has a validation error.

Q: What is aria-required?
A: Boolean indicating a form field is required.

Q: What is aria-busy?
A: Indicates a region is being updated — screen readers can pause until done.

Q: What is aria-haspopup?
A: Indicates element triggers a popup; values: menu, listbox, tree, grid, dialog, true.

Q: What is the tab order?
A: Order in which focus moves through interactive elements via Tab key.

Q: What is tabindex?
A: Attribute controlling focusability; 0 = focusable in DOM order, -1 = programmatically focusable only, >0 = avoid.

Q: Why avoid tabindex > 0?
A: Disrupts natural DOM order; creates confusing keyboard navigation; hard to maintain.

Q: What is focus management?
A: Programmatic control of focus, especially when content changes (modals, route changes, errors).

Q: Focus on modal open?
A: Move focus to first focusable element inside (or the heading) when modal opens.

Q: Focus on modal close?
A: Return focus to the element that opened the modal — preserves user's context.

Q: What is a focus trap?
A: Constrains focus within a region (typically a modal) — Tab from last item wraps to first.

Q: What is focus-visible?
A: CSS pseudo-class showing focus indicator only for keyboard users — better UX than always-visible focus rings.

Q: What is the difference between :focus and :focus-visible?
A: :focus matches any focused element; :focus-visible matches only when browser determines keyboard navigation.

Q: Don't remove focus outlines?
A: Or replace with equally visible alternative — silent removal breaks keyboard users.

Q: What is the "skip to main content" link?
A: First focusable element on each page — lets keyboard users skip repeated navigation.

Q: What is landmark navigation?
A: HTML5 landmarks (header, nav, main, aside, footer) or ARIA landmarks (role="navigation") — screen readers can jump between them.

Q: What are HTML5 landmark elements?
A: <header>, <nav>, <main>, <aside>, <footer>, <section> (with accessible name), <article> (with accessible name).

Q: Should you have multiple main elements?
A: No — exactly one <main> per page.

Q: What is a screen reader?
A: Assistive software that converts visual content to speech or braille; common ones: NVDA (free Windows), JAWS (paid Windows), VoiceOver (macOS/iOS), TalkBack (Android).

Q: NVDA basics?
A: Free open-source Windows screen reader from NV Access — install via nvaccess.org.

Q: JAWS basics?
A: Most widely used commercial screen reader — used by many corporate users.

Q: VoiceOver basics?
A: Built into macOS and iOS — enable with Cmd+F5 (macOS) or triple-click home/side button (iOS).

Q: TalkBack basics?
A: Built into Android — primary Android screen reader; settings → accessibility.

Q: What is reading order?
A: The order assistive tech reads content — should match logical content order, not visual position.

Q: Common reading-order break?
A: Using CSS positioning (absolute, grid order) to move content visually — screen readers follow DOM order.

Q: What is the accessibility tree?
A: Browser's parallel structure exposing accessibility info to assistive tech — built from DOM + ARIA.

Q: Inspect the accessibility tree?
A: Chrome DevTools → Elements → Accessibility tab; Firefox DevTools → Accessibility tab.

Q: What is "accessible name"?
A: The label presented to assistive tech — derived from text content, aria-label, aria-labelledby, alt, etc.

Q: Accessible name calculation precedence?
A: aria-labelledby → aria-label → native label (e.g., <label for=> or alt text) → text content.

Q: What is "accessible description"?
A: Supplementary info beyond the name — derived from aria-describedby, title attribute (with caveats).

Q: title attribute caveats?
A: Shown only on hover (mouse), unreliable for keyboard, not consistently announced — avoid as sole label.

Q: Good alt text rules?
A: Convey purpose/content, not appearance; be concise; don't say "image of" — screen reader announces it.

Q: Decorative image alt text?
A: Empty alt: <img alt=""> — screen reader skips entirely.

Q: Complex image alt text?
A: Brief alt + longer description elsewhere (aria-describedby or visible text).

Q: SVG accessibility?
A: Use <title> child for name, <desc> for description, role="img" on the <svg> element.

Q: WCAG AA text contrast?
A: 4.5:1 for normal text; 3:1 for large text (18pt regular or 14pt bold).

Q: WCAG AA non-text contrast?
A: 3:1 for UI components, icons, focus indicators, and graphical objects.

Q: WCAG AAA contrast?
A: 7:1 for normal text; 4.5:1 for large text — stricter, harder to meet with brand palettes.

Q: Color contrast checker tools?
A: WebAIM Contrast Checker, axe DevTools, Stark plugin, Chrome DevTools color picker.

Q: Why is "color alone" insufficient?
A: Color-blind users may miss meaning conveyed only by color — add icons, text, or patterns.

Q: Color blindness statistics?
A: ~8% of men, ~0.5% of women have some form — most common is red-green.

Q: What is the prefers-reduced-motion?
A: Media query respecting OS-level setting to minimize motion: @media (prefers-reduced-motion: reduce) { ... }

Q: What animations should respect reduced-motion?
A: Decorative motion, parallax, autoplay video, large transitions — meaningful motion can usually remain.

Q: What is the WCAG flashing limit?
A: No more than 3 flashes per second; otherwise risk of triggering photosensitive seizures.

Q: What is the touch target size guideline?
A: WCAG 2.5.5: 44×44 CSS pixels minimum (AAA); WCAG 2.5.8 (added in 2.2): 24×24 minimum (AA).

Q: Why are larger touch targets better?
A: Reduce mis-taps on mobile; help users with motor impairments.

Q: What is "name, role, value"?
A: Each UI control must expose its name, role, and current value to assistive tech — WCAG 4.1.2.

Q: What is a form label?
A: <label for="id"> or <label> wrapping the input — provides accessible name and increases click target.

Q: Placeholder as label?
A: Insufficient — disappears on input, low contrast, no association with assistive tech. Always pair with a visible label.

Q: What is required field indication?
A: Use text or icon plus aria-required="true" or the native required attribute.

Q: Error message association?
A: aria-describedby pointing to error message + aria-invalid="true" on the field.

Q: Validation timing?
A: On blur (not on every keystroke) — interrupting reduces accessibility and increases frustration.

Q: What is autocomplete attribute?
A: Hints expected input type (name, email, address, etc.) — improves UX and assistive autofill.

Q: What is input mode?
A: <input inputmode="..."> — hints virtual keyboard type on mobile (numeric, email, tel, search).

Q: What is the lang attribute?
A: <html lang="en"> — screen readers use this for pronunciation; required by WCAG.

Q: Multi-language pages?
A: Use lang on individual elements when content language differs from page: <span lang="fr">bonjour</span>

Q: What is heading hierarchy?
A: Headings should descend logically (h1 → h2 → h3) — skipping levels confuses screen reader navigation.

Q: How many h1s per page?
A: One h1 ideally — represents the main topic; subsequent h2s for sections.

Q: Why is heading navigation important?
A: Screen reader users jump between headings to scan pages quickly — like sighted users skim.

Q: What is a heading without text?
A: A heading marked up but visually styled minimally — still navigable by screen readers.

Q: What is text spacing requirement?
A: 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.

Q: What is reflow requirement?
A: WCAG 1.4.10: content should reflow to 320 CSS pixels wide without horizontal scrolling.

Q: What is "responsive design" intersection with accessibility?
A: Mobile-friendly layouts often benefit accessibility — larger touch targets, better text scale.

Q: What is zoom support?
A: WCAG 1.4.4: content must remain functional at 200% zoom — set viewport meta correctly.

Q: viewport meta for accessibility?
A: <meta name="viewport" content="width=device-width, initial-scale=1"> — don't disable user scaling.

Q: What disables user zoom?
A: user-scalable=no or maximum-scale=1 — violates WCAG; never use.

Q: What is dark mode accessibility?
A: Respect prefers-color-scheme; ensure both modes meet contrast; offer manual override.

Q: What is text-resize requirement?
A: Text must scale up to 200% without loss of functionality — avoid fixed pixel sizes for body text.

Q: Use relative units for text?
A: Use rem or em — scales with user's browser default font size.

Q: What is "high contrast mode"?
A: OS-level mode (Windows High Contrast, forced colors) — overrides site colors for visibility.

Q: forced-colors media query?
A: @media (forced-colors: active) { ... } — adapt to Windows High Contrast and similar modes.

Q: What is "modal" accessibility checklist?
A: Focus moved in, focus trapped, ESC closes, focus restored on close, aria-modal="true", role="dialog", aria-labelledby for title.

Q: What is <dialog> element?
A: Native HTML element with built-in modal semantics, focus management, and ESC handling.

Q: showModal() vs show() on <dialog>?
A: showModal() opens as true modal (focus trap, backdrop, ESC); show() opens as non-modal.

Q: What is a "non-modal" dialog?
A: A dialog that doesn't block interaction with the rest of the page — typical for chat windows.

Q: Popup menu accessibility?
A: role="menu" + role="menuitem" + arrow-key navigation + ESC close + correct ARIA states.

Q: Should you use role="menu" for nav?
A: Only for app-style menus that behave like desktop menus; typical site navigation should not.

Q: Tab interface accessibility?
A: role="tablist" + role="tab" + role="tabpanel" + arrow-key navigation + aria-selected.

Q: Accordion accessibility?
A: Header is a button with aria-expanded; content has aria-labelledby pointing to header; arrow keys optional.

Q: Carousel accessibility?
A: Provide pause control, indicate slide count, announce current slide, allow keyboard navigation.

Q: Live region announcement order?
A: Updates to aria-live regions are announced in DOM order; rapid updates may be skipped.

Q: What is the difference between role and aria-label?
A: role tells what an element IS; aria-label tells what it's CALLED.

Q: What is role="presentation"?
A: Removes implicit role of the element from accessibility tree — for decorative layout containers.

Q: role="img" use case?
A: On a group of visual elements (multiple SVGs, icon sets) that together form one image — add aria-label.

Q: What is ARIA labeling order?
A: aria-labelledby → aria-label → native label → text content → title.

Q: What does sr-only or visually-hidden mean?
A: CSS pattern to hide content visually but keep it for screen readers — uses clip, position absolute, etc.

Q: sr-only CSS implementation?
A: .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

Q: What is "skip link" implementation?
A: <a href="#main" class="skip-link">Skip to main content</a> with visible-on-focus styling.

Q: What is a "live announcement" pattern?
A: Empty aria-live region; update its text content to announce something to screen reader users.

Q: What is the "aria-haspopup" trap?
A: Should reflect the popup type — using "true" works but specific values (menu, listbox) give better hints.

Q: What is keyboard "Escape" expectation?
A: Closes modals, dropdowns, tooltips; restores prior state. Users expect this universally.

Q: What is the contrast for placeholder text?
A: Often fails WCAG — placeholder is decorative; never use as primary label.

Q: What is form error pattern?
A: Inline error near field + aria-describedby link + aria-invalid + (often) summary at top with anchors.

Q: What is the success message pattern?
A: aria-live="polite" region announcing success after form submission.

Q: Long-form content accessibility?
A: Use headings for sections, bullet lists for parallel items, descriptive link text, language attributes.

Q: What is "descriptive link text"?
A: Links should make sense out of context — "Read the WCAG quick reference" not "click here".

Q: Link vs button confusion?
A: <a> navigates; <button> performs action. Don't use one styled as the other.

Q: Why ARIA isn't a polyfill for semantic HTML?
A: ARIA changes what's announced but doesn't add behavior. A div with role="button" still needs keyboard handlers, tabindex, focus styles.

Q: Common testing tools?
A: axe DevTools (browser ext), Lighthouse, WAVE, Pa11y, accessibility insights, manual screen reader testing.

Q: Automated test limitations?
A: Catch ~30-40% of issues — keyboard nav, screen reader logic, focus management require manual testing.

Q: What is manual keyboard testing?
A: Navigate the entire UI with Tab, Shift+Tab, Enter, Space, arrow keys, Esc — verify everything works.

Q: What is manual screen reader testing?
A: Browse with NVDA or VoiceOver, verify announcements match intent, focus order is logical, all functions work.

Q: What is "shift left" for accessibility?
A: Building accessibility from the start of design and development — far cheaper than retrofitting.

Q: What is the WCAG 2.2 update?
A: Added in 2023: focus appearance, dragging movements, target size minimum, consistent help, accessible authentication, redundant entry.

Q: Accessible authentication requirement (2.2)?
A: Login should not require cognitive test (puzzle, transcription) — biometric or paste-friendly methods preferred.

Q: What is keyboard-only authentication?
A: Avoid CAPTCHAs that require mouse drag; use audio alternative, math, or trust signals.

Q: What is the "consistent help" requirement?
A: Help mechanisms (contact, FAQ) should appear in same relative location on every page they exist.

Q: What is "redundant entry"?
A: Don't make users re-enter info they've already provided in the same process unless essential.

Q: What is the WCAG 3 future?
A: Drafting now — outcome-based scoring, broader scope (cognitive, native apps, hardware). Years away from finalization.

Q: Cognitive accessibility?
A: Often overlooked: plain language, predictable patterns, error prevention, supportive UX for users with cognitive disabilities.

Q: Plain language tips?
A: Short sentences, common words, active voice, one idea per paragraph, clear next steps.

Q: What is a "reading age" target?
A: Often grade 6-8 for general public; varies by audience. Tools like Hemingway, hemingwayapp.com help.

Q: What is "show, don't hide" accessibility?
A: Reveal important info by default; hiding behind interactions adds cognitive load.

Q: What is the role of accessibility statement?
A: Public document acknowledging accessibility status, known issues, contact for issues — often legally required.

Q: Common contributors to a11y failures?
A: Custom controls without semantics, color-only signaling, missing alt text, low contrast, keyboard traps, autoplay video.

Q: What is "drive-by accessibility"?
A: Last-minute fixes — fragile and often miss systemic issues. Build in from start instead.

Q: What is "accessibility persona"?
A: User profile describing assistive tech, abilities, and constraints — helps designers think beyond visual UI.

Q: What is "inclusive design"?
A: Broader design philosophy: designing for the widest range of human variation; accessibility is a subset.

Q: Microsoft inclusive design toolkit?
A: Set of principles and methods for inclusive design — recognize exclusion, learn from diversity, solve for one extend to many.

Q: What is the "curb cut effect"?
A: Accessibility features (curb cuts, captions, dark mode) benefit everyone, not just the target group.

Q: What is captions vs subtitles?
A: Captions include all audio info (dialogue + sounds + speaker IDs); subtitles assume hearing audience and only translate dialogue.

Q: Required for video?
A: Captions (1.2.2 AA), audio description if visual info isn't conveyed in audio (1.2.5 AA).

Q: What is "audio description"?
A: Narration describing visual elements during natural pauses — for blind users to follow visual content.

Q: Best practices for autoplay?
A: Avoid autoplay entirely; if necessary, mute by default and provide pause; honor prefers-reduced-motion.

Q: Animation pause control?
A: Provide pause/stop for any animation longer than 5 seconds that auto-starts.

Q: What is "purpose of input" (WCAG 1.3.5)?
A: Use autocomplete attribute for common input fields — assists users and password managers.

Q: What is "page title" requirement?
A: Each page needs a descriptive <title> — screen readers announce it on page load.

Q: What is "language of parts"?
A: When a passage is in different language from page, mark with lang on element.

Q: Why does duplicate IDs break accessibility?
A: aria-labelledby and other references rely on unique IDs — duplicates confuse the accessibility tree.

Q: What does the HTML <abbr> do for accessibility?
A: Provides expansion via title attribute — partially helpful; explicit expansion in text often better.

Q: Best test for accessibility?
A: Real users with disabilities — automated tools find a fraction; lived experience finds the rest.

Q: What is the deepest accessibility principle?
A: Build interfaces that work without sight, without hearing, without a mouse, and without cognitive load — and the result is better for everyone.