diff --git a/js/description/ph-scale-description-logic.js b/js/description/ph-scale-description-logic.js
new file mode 100644
index 00000000..aaa642c4
--- /dev/null
+++ b/js/description/ph-scale-description-logic.js
@@ -0,0 +1,133 @@
+// Copyright 2023-2024, University of Colorado Boulder
+
+// @author Jonathan Olson <jonathan.olson@colorado.edu>
+
+/* eslint-disable */
+
+export default () => {
+  let context;
+  let strings;
+
+  const totalVolumeToEnum = totalVolume => {
+    if ( totalVolume === 0 ) {
+      return 'empty';
+    }
+    else if ( totalVolume < 1.2 ) {
+      return 'partiallyFilled';
+    }
+    else {
+      return 'full';
+    }
+  };
+
+  return phet.joist.DescriptionContext.registerLogic( {
+    launch( descriptionContext, descriptionStrings ) {
+      context = descriptionContext;
+      strings = descriptionStrings;
+
+      const macroScreen = context.get( 'phScale.macroScreen' );
+      if ( macroScreen ) {
+        const macroScreenView = context.get( 'phScale.macroScreen.view' );
+
+        // solution
+        //const soluteProperty = context.get( 'phScale.macroScreen.model.solution.soluteProperty' );
+        const soluteProperty = context.get( 'phScale.macroScreen.model.dropper.soluteProperty' ); // TODO: why was this not defined?
+        const solutionPHProperty = context.get( 'phScale.macroScreen.model.solution.pHProperty' );
+        const solutionTotalVolumeProperty = context.get( 'phScale.macroScreen.model.solution.totalVolumeProperty' );
+        const soluteVolumeProperty = context.get( 'phScale.macroScreen.model.solution.soluteVolumeProperty' );
+        const waterVolumeProperty = context.get( 'phScale.macroScreen.model.solution.waterVolumeProperty' );
+
+        // pH Meter
+        const pHMeterPHProperty = context.get( 'phScale.macroScreen.model.pHMeter.pHProperty' );
+        const pHMeterPositionProperty = context.get( 'phScale.macroScreen.model.pHMeter.probe.positionProperty' );
+
+        // Dropper
+        const dropperEnabledProperty = context.get( 'phScale.macroScreen.model.dropper.enabledProperty' );
+        const isDispensingProperty = context.get( 'phScale.macroScreen.model.dropper.isDispensingProperty' );
+        const isAutofillingProperty = context.get( 'phScale.macroScreen.model.isAutofillingProperty' );
+
+        // Water faucet
+        const waterFaucetEnabledProperty = context.get( 'phScale.macroScreen.model.waterFaucet.enabledProperty' );
+        const waterFaucetFlowRateProperty = context.get( 'phScale.macroScreen.model.waterFaucet.flowRateProperty' );
+
+        // Drain faucet
+        const drainFaucetEnabledProperty = context.get( 'phScale.macroScreen.model.drainFaucet.enabledProperty' );
+        const drainFaucetFlowRateProperty = context.get( 'phScale.macroScreen.model.drainFaucet.flowRateProperty' );
+
+
+        const simStateDescriptionNode = new phet.scenery.Node( {
+          tagName: 'p'
+        } );
+
+        context.nodeSet( macroScreenView, 'screenSummaryContent', new phet.scenery.Node( {
+          children: [
+            new phet.scenery.Node( {
+              tagName: 'p',
+              innerContent: strings.screenSummary()
+            } ),
+            simStateDescriptionNode
+          ]
+        } ) );
+
+        context.multilink( [
+          soluteProperty,
+          solutionTotalVolumeProperty
+        ], (
+          solute,
+          solutionTotalVolume
+        ) => {
+          simStateDescriptionNode.innerContent = strings.screenSummarySimStateDescription(
+            solute.tandemName,
+            totalVolumeToEnum( solutionTotalVolume )
+          );
+        } );
+
+        const solutes = [
+          phet.phScale.Solute.BATTERY_ACID,
+          phet.phScale.Solute.BLOOD,
+          phet.phScale.Solute.CHICKEN_SOUP,
+          phet.phScale.Solute.COFFEE,
+          phet.phScale.Solute.DRAIN_CLEANER,
+          phet.phScale.Solute.HAND_SOAP,
+          phet.phScale.Solute.MILK,
+          phet.phScale.Solute.ORANGE_JUICE,
+          phet.phScale.Solute.SODA,
+          phet.phScale.Solute.SPIT,
+          phet.phScale.Solute.VOMIT,
+          phet.phScale.Solute.WATER
+        ];
+
+        const soluteComboBox = context.get( 'phScale.macroScreen.view.soluteComboBox' );
+        context.nodeSet( soluteComboBox, 'accessibleName', strings.soluteComboBoxAccessibleName() );
+        for ( const solute of solutes ) {
+          context.propertySet( soluteComboBox.a11yNamePropertyMap.get( solute ), strings.soluteName( solute.tandemName ) );
+        }
+
+        // pdomOrder
+        // context.nodeSet( macroScreenView.pdomPlayAreaNode, 'pdomOrder', [
+        //   context.get( 'phScale.macroScreen.view.dropperNode.button' ),
+        //   context.get( 'phScale.macroScreen.view.soluteComboBox' ),
+        //   context.get( 'phScale.macroScreen.view.waterFaucetNode.faucetNode' ),
+        //   context.get( 'phScale.macroScreen.view.drainFaucetNode' ),
+        //   context.get( 'phScale.macroScreen.view.pHMeterNode.probeNode' ),
+        //   context.get( 'phScale.macroScreen.view.resetAllButton' )
+        // ] );
+
+        const alerter = new phet.sceneryPhet.Alerter( {
+          alertToVoicing: false,
+          descriptionAlertNode: macroScreenView
+        } );
+
+        context.lazyLink( isDispensingProperty, isDispensing => {
+          alerter.alert( strings.dropperDispensingAlert( isDispensing ) );
+        } );
+      }
+    },
+    added( tandemID, obj ) {
+      // Will be called when an object is dynamically added after sim start-up
+    },
+    removed( tandemID, obj ) {
+      // Will be called when an object is dynamically removed after sim start-up
+    }
+  } );
+};
\ No newline at end of file
diff --git a/js/description/ph-scale-description-strings_en.js b/js/description/ph-scale-description-strings_en.js
new file mode 100644
index 00000000..4d25626c
--- /dev/null
+++ b/js/description/ph-scale-description-strings_en.js
@@ -0,0 +1,52 @@
+// Copyright 2023-2024, University of Colorado Boulder
+
+// @author Jonathan Olson <jonathan.olson@colorado.edu>
+
+// eslint-disable
+
+export default () => {
+  const soluteMap = {
+    batteryAcid: 'battery acid',
+    blood: 'blood',
+    chickenSoup: 'chicken soup',
+    coffee: 'coffee',
+    drainCleaner: 'drain cleaner',
+    handSoap: 'hand soap',
+    milk: 'milk',
+    orangeJuice: 'orange juice',
+    soda: 'soda',
+    spit: 'spit',
+    vomit: 'vomit',
+    water: 'water'
+  };
+
+  const totalVolumeMap = {
+    empty: 'empty',
+    partiallyFilled: 'partially filled',
+    full: 'full'
+  };
+
+  return phet.joist.DescriptionContext.registerStrings( {
+    locale: 'en',
+    screenSummary() {
+      return 'Place description of the screen here, or break into multiple paragraphs';
+    },
+    screenSummarySimStateDescription(
+      solute,
+      totalVolume
+    ) {
+      return `The solute is ${soluteMap[ solute ]}, and the total volume is ${totalVolumeMap[ totalVolume ]}.`;
+    },
+    soluteComboBoxAccessibleName() {
+      return 'Solute';
+    },
+    soluteName( solute ) {
+      return soluteMap[ solute ];
+    },
+    dropperDispensingAlert(
+      isDispensing
+    ) {
+      return isDispensing ? 'Dispensing' : 'Not dispensing';
+    }
+  } );
+};
\ No newline at end of file
diff --git a/js/description/ph-scale-description-strings_es.js b/js/description/ph-scale-description-strings_es.js
new file mode 100644
index 00000000..57f72c30
--- /dev/null
+++ b/js/description/ph-scale-description-strings_es.js
@@ -0,0 +1,52 @@
+// Copyright 2023-2024, University of Colorado Boulder
+
+// @author Jonathan Olson <jonathan.olson@colorado.edu>
+
+// eslint-disable
+
+export default () => {
+  const soluteMap = {
+    batteryAcid: 'ácido de batería',
+    blood: 'sangre',
+    chickenSoup: 'sopa de pollo',
+    coffee: 'café',
+    drainCleaner: 'limpiador de desagües',
+    handSoap: 'jabón de manos',
+    milk: 'leche',
+    orangeJuice: 'jugo de naranja',
+    soda: 'gaseosa',
+    spit: 'saliva',
+    vomit: 'vómito',
+    water: 'agua'
+  };
+
+  const totalVolumeMap = {
+    empty: 'vacía',
+    partiallyFilled: 'parcialmente lleno',
+    full: 'lleno'
+  };
+
+  return phet.joist.DescriptionContext.registerStrings( {
+    locale: 'es',
+    screenSummary() {
+      return 'Coloque la descripción de la pantalla aquí o divídala en varios párrafos';
+    },
+    screenSummarySimStateDescription(
+      solute,
+      totalVolume
+    ) {
+      return `El soluto es ${soluteMap[ solute ]}, y el volumen total es ${totalVolumeMap[ totalVolume ]}.`;
+    },
+    soluteComboBoxAccessibleName() {
+      return 'Soluto';
+    },
+    soluteName( solute ) {
+      return soluteMap[ solute ];
+    },
+    dropperDispensingAlert(
+      isDispensing
+    ) {
+      return isDispensing ? 'dispensando' : 'no dispensando';
+    }
+  } );
+};
\ No newline at end of file
diff --git a/js/ph-scale-main.ts b/js/ph-scale-main.ts
index 2eed63e0..5a904653 100644
--- a/js/ph-scale-main.ts
+++ b/js/ph-scale-main.ts
@@ -14,9 +14,25 @@ import MacroScreen from './macro/MacroScreen.js';
 import MicroScreen from './micro/MicroScreen.js';
 import MySolutionScreen from './mysolution/MySolutionScreen.js';
 import PhScaleStrings from './PhScaleStrings.js';
+import DescriptionContext from '../../joist/js/DescriptionContext.js';
+import PHScaleDescriptionStrings_en from './description/ph-scale-description-strings_en.js'; // eslint-disable-line default-import-match-filename
+import PHScaleDescriptionStrings_es from './description/ph-scale-description-strings_es.js'; // eslint-disable-line default-import-match-filename
+import PHScaleDescriptionLogic from './description/ph-scale-description-logic.js'; // eslint-disable-line default-import-match-filename
+import Alerter from '../../scenery-phet/js/accessibility/describers/Alerter.js';
 
 simLauncher.launch( () => {
 
+  if ( phet.chipper.queryParameters.supportsDescriptionPlugin ) {
+    PHScaleDescriptionStrings_en();
+    PHScaleDescriptionStrings_es();
+    PHScaleDescriptionLogic();
+
+    phet.log && phet.log( Alerter );
+
+    phet.log && phet.log( PHScaleDescriptionStrings_en.toString() );
+    phet.log && phet.log( PHScaleDescriptionLogic.toString() );
+  }
+
   const screens = [
     new MacroScreen( Tandem.ROOT.createTandem( 'macroScreen' ) ),
     new MicroScreen( Tandem.ROOT.createTandem( 'microScreen' ) ),
@@ -28,5 +44,9 @@ simLauncher.launch( () => {
     phetioDesigned: true
   } );
 
+  phet.chipper.queryParameters.supportsDescriptionPlugin && sim.isConstructionCompleteProperty.lazyLink( isConstructionComplete => {
+    DescriptionContext.startupComplete();
+  } );
+
   sim.start();
 } );
\ No newline at end of file
diff --git a/package.json b/package.json
index f1688487..1c651a30 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
     ],
     "simFeatures": {
       "supportsDynamicLocale": true,
+      "supportsDescriptionPlugin": true,
+      "supportsInteractiveDescription": true,
       "colorProfiles": [
         "default"
       ]
diff --git a/ph-scale_description_editor.html b/ph-scale_description_editor.html
new file mode 100644
index 00000000..b3a9d6ce
--- /dev/null
+++ b/ph-scale_description_editor.html
@@ -0,0 +1,635 @@
+<!DOCTYPE HTML>
+<!-- TODO factor this out into a template https://github.com/phetsims/joist/issues/941 -->
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="phet-sim-level" content="production">
+
+  <!--have to scroll right and left! allows to resize also-->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>pH Scale Description Editor</title>
+
+  <style>
+    html {
+      font-family: Arial, Helvetica, sans-serif;
+      line-height: 1.4;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      background: #ccc;
+    }
+
+    h1, h3, p {
+      margin-top: .55em;
+      margin-bottom: 0;
+      padding: 0;
+    }
+
+    .alert_copy_container ul {
+      -webkit-padding-start: 1.1em
+    }
+
+    /* This class was found online as a way to preserve an iframe aspect ratio,
+    see https://fettblog.eu/blog/2013/06/16/preserving-aspect-ratio-for-embedded-iframes/*/
+
+    iframe {
+      width: 100%;
+      position: fixed;
+    }
+
+    .aspect-ratio {
+      position: relative;
+      width: 100%;
+      height: 0;
+      padding-bottom: 69%;
+    }
+
+    .aspect-ratio iframe {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+    }
+
+    p.alert {
+      opacity: 0.6;
+    }
+
+    div.alert_copy_container {
+      background: #e5c45b;
+      border-radius: 1em;
+      padding: .25em .75em 1em;
+      min-height: 18em;
+    }
+
+    p.alert_copy {
+      min-height: 5em;
+    }
+
+    div.dom_copy_container {
+      background: #a0e1e7;
+      border-radius: 1em;
+      padding: 1em;
+    }
+
+    div.dom_copy_container li {
+      margin-bottom: .5em;
+    }
+
+    .dynamic {
+      background-color: #9adaa6;
+      border-bottom: double .167em #000; /*or a border in dark green*/
+    }
+
+    em { /* this is the same as the dynamic class, but should be changed as part of https://github.com/phetsims/a11y-research/issues/67*/
+      background-color: #9adaa6;
+      border-bottom: double .167em #000; /*or a border in dark green*/
+    }
+
+    .highlight {
+      /*use outline instead of border because border doesn't apply to all DOMElements, add margin because outline
+      doesn't take up any space*/
+      outline: thick double red;
+      margin: 1%;
+    }
+
+    .bold {
+      font-weight: bold;
+    }
+
+    .assertive {
+      background-color: pink; /* do not change color without changing the doc in "About Interactive Alerts" */
+      border-radius: .2em;
+    }
+
+    .activity-log-heading-container {
+      display: flex;
+      align-content: space-between;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding-top: 0.5em;
+    }
+
+    .activity-log-heading-item {
+      align-self: center;
+      font-size: 1.17em;
+    }
+
+    #columns {
+      width: 100%;
+      display: flex;
+    }
+
+    #columns > * {
+      position: sticky;
+      align-self: flex-start;
+      top: 0;
+      overflow-y: hidden;
+    }
+
+    #editor-pane {
+      height: 100vh;
+    }
+
+    #logic-editor, #strings-editor {
+      /*height: 50%;*/
+      overflow: auto;
+      margin-bottom: 5px;
+      height: calc((100% - 5px) / 2);
+      /*position: sticky;*/
+      /*align-self: flex-start;*/
+      /*left: 0;*/
+      /*overflow-y: hidden;*/
+    }
+
+    .CodeMirror {
+      height: 100% !important;
+    }
+
+    .CodeMirror * {
+      font-size: 10px;
+    }
+
+    #state-pane {
+      height: 100vh;
+      overflow-y: scroll;
+      padding: 0.5em;
+    }
+
+    #error-container {
+      display: none;
+      border: 1px solid red;
+      margin: 5px 0;
+      padding: 5px;
+      color: darkred;
+    }
+
+    .no-pad {
+      margin-top: 0;
+    }
+
+    #editor-pane {
+      width: calc(100% * 0.5);
+    }
+
+    #main-pane {
+      width: calc(100% * 0.25);
+    }
+
+    #state-pane {
+      width: calc(100% * 0.25);
+    }
+  </style>
+
+  <link rel="stylesheet" href="../sherpa/lib/codemirror-5.52.2.min.css">
+  <link rel="stylesheet" href="../sherpa/lib/codemirror-5.52.2.monokai.min.css">
+
+  <script src="../sherpa/lib/codemirror-5.52.2.min.js"></script>
+  <script src="../sherpa/lib/codemirror-5.52.2.javascript.min.js"></script>
+
+</head>
+<body>
+
+<div id="columns">
+  <div id="editor-pane">
+    <div id="logic-editor"></div>
+    <div id="strings-editor"></div>
+  </div>
+  <div id="main-pane">
+    <div class="aspect-ratio">
+      <iframe id="iframe" allowfullscreen scrolling="no" title="Interact with pH Scale"></iframe>
+    </div>
+    <div id="error-container"></div>
+    <div id="alerts">
+      <div class="activity-log-heading-container">
+        <h3 class="activity-log-heading-item">Activity log of Responsive Descriptions</h3>
+        <button class="activity-log-heading-item" id="clear-activity-log-button">Clear Log</button>
+      </div>
+      <div id='alert-copy-container' class='alert_copy_container' role='presentation'>
+        <div id='polite-element-container'>
+          <ul class='alert_copy' id='alert-list'></ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="state-pane">
+    <div id="pdom">
+      <h3 class="no-pad">State Descriptions for pH Scale</h3>
+      <div id="dom-copy-container" class="dom_copy_container" role="presentation"></div>
+    </div>
+  </div>
+</div>
+
+<script type="application/javascript">
+  const IS_BUILT_STRING = '{{IS_BUILT}}';
+  const IS_BUILT = IS_BUILT_STRING.indexOf( '{{' ) !== 0; // escape for better syntax highlighting support
+
+  // Grab all query parameters to pass to the simulation, and a couple of params that are required for this test
+  let simulationQueryString = window.location.search;
+  if ( simulationQueryString.indexOf( '?' ) >= 0 ) {
+    simulationQueryString += '&';
+  }
+  else {
+    simulationQueryString += '?';
+  }
+
+  const noPostMessage = simulationQueryString.indexOf( 'postMessageOnLoad&postMessageOnError' ) === -1;
+  const noAccessibility = simulationQueryString.indexOf( 'supportsInteractiveDescription' ) === -1;
+
+  noPostMessage && ( simulationQueryString += 'postMessageOnLoad&postMessageOnError&' );
+  noAccessibility && ( simulationQueryString += 'supportsInteractiveDescription=true' );
+
+
+  // in unbuilt mode and on phet-server, the brand suffix is removed
+  const filenameEnding = ( window.location.hostname === 'phet.colorado.edu' || !IS_BUILT ) ? '.html' : '_phet.html';
+  const repoLocale = 'ph-scale_en';
+  const simURL = repoLocale + filenameEnding + simulationQueryString;
+
+  // set the source of the sim iframe
+  document.getElementById( 'iframe' ).setAttribute( 'src', simURL );
+
+  // eslint-disable-next-line no-undef
+  const logicEditor = CodeMirror( document.querySelector( '#logic-editor' ), {
+    lineNumbers: true,
+    tabSize: 2,
+    value: localStorage.getItem( 'ph-scale-description-logic.js' ) || '// Copy-paste logic here, it will be saved',
+    mode: 'javascript',
+    theme: 'monokai',
+    lineWrapping: true
+  } );
+
+  // eslint-disable-next-line no-undef
+  const stringsEditor = CodeMirror( document.querySelector( '#strings-editor' ), {
+    lineNumbers: true,
+    tabSize: 2,
+    // TODO: generalize to locale-specific based on what locale the sim is https://github.com/phetsims/joist/issues/941
+    value: localStorage.getItem( 'ph-scale-description-strings_en.js' ) || '// Copy-paste logic here, it will be saved',
+    mode: 'javascript',
+    theme: 'monokai',
+    lineWrapping: true
+  } );
+
+  const runCode = async code => {
+    const errorContainer = document.querySelector( '#error-container' );
+    errorContainer.style.display = 'none';
+
+    try {
+      // eslint-disable-next-line no-undef
+      await iframe.contentWindow.phet.joist.DescriptionContext.externalLoad( code );
+    }
+    catch( e ) {
+      errorContainer.style.display = 'block';
+      errorContainer.innerHTML = `<pre>${e.toString()}</pre>`;
+    }
+  };
+
+  logicEditor.on( 'change', async editor => {
+    // TODO: generalize this to all sims https://github.com/phetsims/joist/issues/941
+    localStorage.setItem( 'ph-scale-description-logic.js', logicEditor.getValue() );
+
+    await runCode( editor.getValue() );
+  } );
+
+  stringsEditor.on( 'change', async editor => {
+    // TODO: generalize this to all sims https://github.com/phetsims/joist/issues/941
+    // TODO: generalize locales https://github.com/phetsims/joist/issues/941
+    localStorage.setItem( 'ph-scale-description-strings_en.js', stringsEditor.getValue() );
+
+    await runCode( editor.getValue() );
+  } );
+
+  // Inject our plugins on load
+  window.addEventListener( 'message', async evt => {
+    if ( typeof evt.data !== 'string' ) {
+      return;
+    }
+
+    const data = JSON.parse( evt.data );
+
+    // Sent by Joist due to the postMessage* query parameters
+    if ( data.type === 'load' ) {
+
+      await runCode( logicEditor.getValue() );
+      await runCode( stringsEditor.getValue() );
+    }
+  } );
+</script>
+
+<script>
+  // Number of alerts that remain in the Activity log before fading out.
+  const ACTIVITY_LOG_LENGTH = 10;
+
+  /*******************************************************************************
+   * Helper Functions
+   */
+
+  /**
+   * Get all 'element' nodes off the parent element, placing them in an array for easy traversal.  Note that this
+   * includes all elements, even those that are 'hidden' or purely for structure.
+   *
+   * @param  {HTMLElement} ancestor - parent whose children will be linearized
+   * @returns {HTMLElement[]}
+   */
+  function getAllDOMElementsAsLinear( ancestor ) {
+
+    // gets ALL descendant children for the element
+    const children = ancestor.getElementsByTagName( '*' );
+
+    const linearDOM = [];
+    for ( let i = 0; i < children.length; i++ ) {
+
+      // searching for the HTML element nodes (NOT Scenery nodes)
+      if ( children[ i ].nodeType === Node.ELEMENT_NODE ) {
+        linearDOM[ i ] = ( children[ i ] );
+      }
+    }
+    return linearDOM;
+  }
+
+  /**
+   * Apply the necessary styling to the PDOM copy so that it looks and behaves well. This includes removing from
+   * navigation order and ensuring that all of the styling copied from the actual PDOM is removed so that the copy
+   * is visible and elements have proper dimensions.
+   *
+   * @param {HTMLElement} root - ancestor element, this and all descendants will be styled
+   */
+  function styleCopy( root ) {
+    const allElements = getAllDOMElementsAsLinear( root );
+
+    for ( let i = 0; i < allElements.length; i++ ) {
+      const element = allElements[ i ];
+
+      // make sure nothing in copy is focusable
+      element.tabIndex = '-1';
+
+      // make sure that styling is removed, unless some styling was added just for the copy
+      if ( element.className !== 'pdom-style' ) {
+        element.removeAttribute( 'style' );
+      }
+    }
+  }
+
+  /**
+   * Convert the inline ARIA labels with label information to input values or additional label elements in the
+   * PDOM copy so that they are visible in demonstrations. For example, this could be an aria-label, aria-valuetext,
+   * and so on.
+   *
+   * @param {HTMLElement} rootNode - descendants of this root are traversed so we have
+   */
+  function addInlineAttributesTHTML( rootNode ) {
+
+    // all elements in the PDOM - a defensive copy since we may be adding new elements to the DOM
+    const allElements = Array.prototype.slice.call( rootNode.getElementsByTagName( '*' ) );
+
+    for ( let i = 0; i < allElements.length; i++ ) {
+      const element = allElements[ i ];
+
+      // this check works because PDOMInstance sets hidden on the entire subtree of PDOMInstances when not visible on
+      // an accessible display rather than just the hidden ancestor
+      if ( !element.hidden ) {
+        if ( element.hasAttribute( 'aria-label' ) && element.innerHTML === '' ) {
+          const ariaLabel = element.getAttribute( 'aria-label' );
+
+          // remove the style
+          element.removeAttribute( 'style' );
+
+          if ( element.tagName.toLowerCase() === 'input' ) {
+            if ( element.type === 'button' ) {
+
+              // set the value of the input to be the same as the aria-label appears inside the button
+              element.setAttribute( 'value', ariaLabel );
+            }
+            else {
+
+              // add a special label element to appear before the input element
+              const labelElement = document.createElement( 'label' );
+              labelElement.textContent = ariaLabel;
+              const parentElement = element.parentNode;
+              parentElement.insertBefore( labelElement, parentElement.firstChild );
+            }
+          }
+          else {
+
+            // if not an input, then add it to the innerHTML of an element, without overriding what is already there.
+            element.innerHTML = ariaLabel + element.innerHTML;
+          }
+        }
+        if ( element.hasAttribute( 'aria-valuetext' ) ) {
+
+          // if the element has aria-valuetext, render this text in a new element so we can see the content of this
+          // inline attribute
+          const valueTextElement = document.createElement( 'p' );
+          valueTextElement.className = 'pdom-style';
+          valueTextElement.style.opacity = 0.55;
+          valueTextElement.textContent = element.getAttribute( 'aria-valuetext' );
+
+          // insert directly after the element that has the valuetext. This handles the case if element is last, see https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib
+          element.parentNode.insertBefore( valueTextElement, element.nextSibling );
+        }
+      }
+    }
+  }
+
+  /**
+   * Copy the necessary PDOM content over to the a11y view
+   * @param {HTMLElement} pdomRoot
+   * @param {HTMLElement} copyContainer - the parent of where the copy will be added in the a11y view
+   */
+  function setPDOMCopyContent( pdomRoot, copyContainer ) {
+
+    // This is extremely inefficient every time the document changes, make a new copy, remove
+    // the visual DOM, and add a new one
+    copyContainer.innerHTML = '';
+    const pdomCopy = pdomRoot.cloneNode( true );
+    pdomCopy.removeAttribute( 'style' );
+    copyContainer.appendChild( pdomCopy );
+
+    addInlineAttributesTHTML( pdomCopy );
+
+    // we have to update styles of all elements when they are cloned
+    styleCopy( pdomCopy );
+  }
+
+  /**
+   * Add an observer to the PDOM root that will update the a11y view copy whenever the sim pdom changes.
+   * @param {HTMLElement} pdomRoot
+   * @param {HTMLElement} copyContainer - the PDOM copy will be added as a child here, see setPDOMCopyContent
+   * @param {Object} mutationConfig
+   */
+  function addPDOMObserver( pdomRoot, copyContainer, mutationConfig ) {
+
+    let dirty = false;
+
+    // poll for updates to help performance on chrome
+    setInterval( () => {
+
+      if ( dirty ) {
+
+        // update the PDOM copy after a delay to fix a FF/Safari bug where cloneNode prevents hidden DOM elements
+        // in the iframe from staying hidden - see https://github.com/phetsims/chipper/issues/648
+        setTimeout( () => {
+          setPDOMCopyContent( pdomRoot, copyContainer );
+          dirty = false;
+        }, 10 );
+      }
+    }, 300 ); // as of this writing, 200 ms was pretty good, but could get a bit laggy at times on chrome while using NVDA.
+
+    // whenever an element in the parallel DOM changes, we need to update its copied element as well
+    const domObserver = new MutationObserver( mutations => { dirty = true; } );
+
+    // pass in the target node, as well as the observer configuration options
+    domObserver.observe( pdomRoot, MUTATION_OBSERVER_CONFIG );
+  }
+
+  /**
+   * add mutation observers to each of the aria-live elements
+   * @param {HTMLElement} originalElement
+   * @param {HTMLElement} listElement
+   * @param {Object} mutationConfig
+   */
+  function addLiveObserver( originalElement, listElement, mutationConfig ) {
+    const liveObserver = new MutationObserver( mutations => {
+      mutations.forEach( mutation => {
+
+        // Only display added DOM nodes. ariaLiveAnnouncer will remove the content from aria-live elements so that it
+        // can't be read by the virtual cursor. This registers as a "mutation", but we don't want to display
+        // the removal.
+        if ( mutation.addedNodes.length > 0 ) {
+          const alertText = mutation.target.textContent;
+
+          // update the text content of the copied element to match the element in the iframe document
+          // create a list item to add to the alert list
+          if ( alertText.length > 0 ) {
+            const listItem = document.createElement( 'li' );
+            listItem.style.opacity = 1.0;
+            listItem.textContent = alertText;
+            if ( mutation.target.id.includes( 'assertive' ) ) {
+              listItem.classList.add( 'assertive' );
+            }
+
+            listElement.insertBefore( listItem, listElement.children[ 0 ] );
+
+            // items fade out as they get older
+            for ( let j = 0; j < listElement.children.length; j++ ) {
+              listElement.children[ j ].style.opacity = 1.0 / ( j + 1 ) + 0.50;
+            }
+
+            // if the list is too large, remove the last items from the list
+            const childrenArray = Array.prototype.slice.call( listElement.children );
+            const fadeArray = childrenArray.slice( ACTIVITY_LOG_LENGTH, childrenArray.length );
+
+            for ( let i = 0; i < fadeArray.length; i++ ) {
+              const fadeChild = fadeArray[ i ];
+
+              const intervalId = window.setInterval( () => {
+                fadeChild.style.opacity = fadeChild.style.opacity * 0.95;
+
+                // stop animating and remove child
+                if ( listElement.contains( fadeChild ) && fadeChild.style.opacity < 0.1 ) {
+                  window.clearInterval( intervalId );
+                  listElement.removeChild( fadeChild );
+                }
+              }, 20 );
+            }
+          }
+        }
+      } );
+    } );
+
+    liveObserver.observe( originalElement, mutationConfig );
+  }
+
+  /**
+   * Remove all alerts from the activity log by removing all children of the parent containing them. Solution to clear
+   * children from https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript
+   */
+  function clearActivityLog( listElement ) {
+    while ( listElement.firstChild ) {
+      listElement.removeChild( listElement.lastChild );
+    }
+  }
+
+  // constants
+  // see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit for details
+  const MUTATION_OBSERVER_CONFIG = {
+    attributes: true,
+    childList: true,
+    characterData: true,
+    subtree: true
+  };
+
+  // handling messages from sims
+  window.addEventListener( 'message', event => {
+    if ( !event.data ) {
+      return;
+    }
+
+    let data;
+    try {
+      data = JSON.parse( event.data );
+    }
+    catch( e ) {
+      return;
+    }
+
+    // if load is successful, create a visualization of the parallel DOM
+    if ( data.type === 'load' ) {
+
+      const simFrame = document.getElementById( 'iframe' );
+      const innerWindow = simFrame.contentWindow;
+      // eslint-disable-next-line dot-notation
+      const PDOMRoot = innerWindow[ 'phet' ].joist.display.pdomRootElement; // copy of the parallel DOM
+
+      // get the alert dom elements from the iframe's inner document
+      // eslint-disable-next-line dot-notation
+      const ariaLiveElementsContainer = innerWindow[ 'phet' ].joist.sim.display.descriptionUtteranceQueue.announcer.ariaLiveContainer;
+
+      // get the alert dom elements from the PDOM copy
+      const alertList = document.getElementById( 'alert-list' );
+
+      // strip the styling from the copied DOM elements
+
+      alertList.removeAttribute( 'style' );
+
+      // get the parent container for the parallel DOM copy and the alert content
+      const copyContainer = document.getElementById( 'dom-copy-container' );
+
+      // once for initial setup
+      setPDOMCopyContent( PDOMRoot, copyContainer );
+
+      // update the PDOM copy whenever the sim's PDOM changes
+      addPDOMObserver( PDOMRoot, copyContainer, MUTATION_OBSERVER_CONFIG );
+
+      // observe each of the live elements and add new text content to the list view
+      for ( let i = 0; i < ariaLiveElementsContainer.children.length; i++ ) {
+        addLiveObserver( ariaLiveElementsContainer.children[ i ], alertList, MUTATION_OBSERVER_CONFIG );
+      }
+
+      // clear all alerts when the "Clear Log" button is pressed
+      const clearButton = document.getElementById( 'clear-activity-log-button' );
+      clearButton.addEventListener( 'click', () => clearActivityLog( alertList ) );
+
+      // set focus to the loaded iframe
+      document.getElementById( 'iframe' ).focus();
+
+      // Provide fake focus highlighting to the PDOM copy based on what is actually highlighted in the sim.
+      let previousElement = null;
+      setInterval( () => {
+
+        if ( previousElement ) {
+          previousElement.classList.remove( 'highlight' );
+        }
+        previousElement = document.getElementById( 'iframe' ).contentWindow.document.activeElement;
+        previousElement.classList.add( 'highlight' );
+      }, 500 );
+    }
+  } );
+</script>
+</body>
+</html>
diff --git a/ph-scale_en.html b/ph-scale_en.html
index 5492dc1d..ecb808f8 100644
--- a/ph-scale_en.html
+++ b/ph-scale_en.html
@@ -45,6 +45,8 @@
         ],
         "simFeatures": {
           "supportsDynamicLocale": true,
+          "supportsDescriptionPlugin": true,
+          "supportsInteractiveDescription": true,
           "colorProfiles": [
             "default"
           ]