title: Screen readers and Javascript
body: <p>I'm creating <a href="https://reader.ku.edu/">a website for a reading service for the blind and visually impaired</a> and I'm using JavaScript (with jQuery) to print some stuff to some of the pages after the page has loaded.</p>
  
  <p>Will the screen reader read the content that is printed to the page with jquery after the page has been loaded?</p>
  
  <p>From <a href="https://soap.stanford.edu/tips-and-tools/screen-reader-testing">this page</a> - "Generally, [screen readers] access the DOM (Document Object Model), and they use browser APIs (Application Programming Interfaces) to get the information they need."</p>
  
  <p>and we know that jQuery is a DOM manipulation library. </p>
  
  <p>So the question becomes.. do screen readers take a copy of the whole DOM and then parse it and read it? Or do they read the DOM, the same one that jQuery works on?</p>
  
  <p>Here's an example of one of the pages that I use JavaScript on. It uses a function that determines what program we have playing over the air and then prints the name of the program and a link to listen to it.</p>
  
  <pre><code>&lt;div id="now-playing-div"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  
  // invoke the audio-reader javascript library
  $( document ).ready( function() {
    var callback = nowPlaying; // catalog, schedule, podcasts, archive or nowPlaying
    var selector = '#now-playing-div';
    makeAudioReaderPage(callback, selector);
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>So as you can see, if the screen reader doesn't read what the javascript/jquery prints to the #now-playing-div then it will read nothing. Then, we started getting a few emails of confused listeners wondering what happened to the Now Playing link. </p>
  
  <p>So this morning I added this:</p>
  
  <pre><code>&lt;div id='no-js'&gt;Please enable JavaScript to receive this content.&lt;/div&gt;
  
  &lt;script&gt;
  $( document ).ready( function() {
    $('#no-js').toggle();
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>But if the problem isn't that JavaScript needs to be enabled (<a href="http://webaim.org/projects/screenreadersurvey4/#javascript">a recent survey shows</a> that 99% of screen-reader users have JavaScript enabled) then the problem is not solved and is made even worse because now the screen reader user would think that JavaScript is not enabled.</p>
  
  <p>What to do??</p>