Accessibility Middle interview questions and answers

75 questions for a Accessibility (Middle) interview - with correct answers, explanations and links to the docs.

Take this quiz
  1. 1.What is the accessibility tree?
  2. 2.Which source usually wins when computing an element's accessible name?
  3. 3.What is the difference between aria-labelledby and aria-describedby?
  4. 4.Why prefer aria-labelledby pointing at visible text over aria-label?
  5. 5.What is wrong here?
  6. 6.Why is <nav role="navigation"> unnecessary?
  7. 7.Why can <button role="link"> be a bad idea?
  8. 8.Two <nav> elements on one page: what should you do?
  9. 9.When does a <section> become a landmark?
  10. 10.How should a field error be linked to its input?
  11. 11.Native required or aria-required: which should you prefer?
  12. 12.After a failed submit of a long form, what's a good pattern?
  13. 13.Why validate on blur or submit rather than on each keystroke?
  14. 14.What does aria-live="polite" do differently from assertive?
  15. 15.Why doesn't injecting a new element with role="alert" always get announced?
  16. 16.What is the difference between role="status" and role="alert"?
  17. 17.Why doesn't a React Router or Next.js page change behave like a full page load for a screen reader?
  18. 18.After client-side navigation, where should focus usually go?
  19. 19.A user deletes a list item and focus was on its Delete button. What should happen?
  20. 20.Which keyboard behaviour is expected in a tabs widget (role="tablist")?
  21. 21.What is roving tabindex?
  22. 22.When is aria-activedescendant used instead of roving tabindex?
  23. 23.Should a site's main navigation use role="menu"?
  24. 24.How do you build an accessible dropdown of navigation links?
  25. 25.In an accordion, what should the header contain?
  26. 26.Which is true of tooltips?
  27. 27.Hover content must meet three conditions under WCAG 1.4.13. Which are they?
  28. 28.How do you make a toggle button's state available to assistive tech?
  29. 29.When should you use role="switch" rather than a checkbox?
  30. 30.Which attributes does a custom modal need?
  31. 31.What does the inert attribute do?
  32. 32.Why render a custom modal in a React portal?
  33. 33.A confirm dialog like "Delete project?" should use which role?
  34. 34.A sticky header covers the focused element after tabbing. What fixes it?
  35. 35.What contrast does WCAG require for a focus indicator or input border?
  36. 36.Do disabled controls have to meet contrast requirements?
  37. 37.What is the difference between disabled and aria-disabled="true"?
  38. 38.What is forced colors mode?
  39. 39.Why is a focus style made only with box-shadow risky?
  40. 40.What does the media query prefers-contrast: more detect?
  41. 41.What does WCAG 1.4.10 Reflow require?
  42. 42.What does the Text Spacing criterion test?
  43. 43.Why shouldn't a site lock itself to portrait orientation?
  44. 44.What does the Pointer Cancellation criterion ask for?
  45. 45.A kanban board uses drag and drop. What does WCAG 2.2 require?
  46. 46.What does the Redundant Entry criterion aim to prevent?
  47. 47.Why must a login form allow pasting a password?
  48. 48.What should a session timeout offer?
  49. 49.A button shows "Search" but has aria-label="Find products". Why is that a problem?
  50. 50.How should you mark a French phrase in an English page?
  51. 51.How do you expose a meaningful inline SVG to assistive tech?
  52. 52.A photo set via CSS background-image carries meaning. What's the issue?
  53. 53.What is a good way to expose a sortable table column?
  54. 54.What does the <caption> element give a table?
  55. 55.Why can display: block on a table break accessibility?
  56. 56.A scrollable code block or table isn't reachable by keyboard. What helps?
  57. 57.How do you mark up breadcrumbs?
  58. 58.Why can infinite scroll be a barrier?
  59. 59.When "Load more" adds items, where should focus go?
  60. 60.What does aria-busy="true" signal?
  61. 61.A virtualized list renders only 20 of 10,000 items. What helps screen readers?
  62. 62.Why is an auto-rotating carousel a problem?
  63. 63.Which is true of accessibility overlay widgets?
  64. 64.How do screen readers usually read a web page on desktop?
  65. 65.Which browser and screen reader pairs are the common test setup?
  66. 66.How do you run axe in Playwright tests?
  67. 67.What is a limit of jest-axe in jsdom?
  68. 68.Roughly how much do automated tools catch?
  69. 69.How does useId help in React forms?
  70. 70.Why can changing a list key lose keyboard focus?
  71. 71.Why do many teams use headless primitives such as Radix for widgets?
  72. 72.What is an accessibility statement?
  73. 73.Where in the development process is accessibility cheapest to handle?
  74. 74.What does autocomplete="one-time-code" help with?
  75. 75.Should links that open in a new tab warn users?