♿ Accessibility & the DOM

This page is fully accessible when it first loads. Each time you press the button below, JavaScript adds a new element to the page. Every new element looks fine, but each one hides a different accessibility problem.

Try it

You will need Chrome with Dev Tools.

  1. Open Dev Tools and go to the Lighthouse panel.
  2. With Mode set to Navigation (the default), click Analyze page load and wait for the report. The Accessibility section should report no problems, because the page is fine when it first loads.
  3. Press the Add an element button below until it is disabled. The page has now changed, but your Navigation report still shows the page as it was when it loaded.
  4. To run another audit, first start a new report by clicking the + button at the top of the Lighthouse panel. Then change Mode to Snapshot, click Analyze page load, and wait for the report.
  5. Compare the two reports. This time the Accessibility section lists the problems your clicks introduced. Write down each one.