title: Accessibility and Javascript: load dynamic content or show & hide?
body: <p>I am relatively new to Accessibility standards in my Front End code.</p>
  <p><strong>The question I have:</strong></p>
  <ul>
  <li>For <em><strong>accessibility</strong></em>, is it better to load all HTML content initially and show/hide it, via a &quot;hidden&quot; attribute?</li>
  <li>Or can I dynamically load the content and fill it with the appropriate attributes?</li>
  <li>And if so, what attributes do you recommend I add to the content to notify the user that the content has been updated and/or changed?</li>
  </ul>
  <p><strong>For example:</strong><br />
  I have a navbar with some buttons/tabs that load the appropriate content.  I can load all content and then show/hide is, similar to below:</p>
  <pre><code> &lt;nav&gt;
    &lt;div class=&quot;tabs&quot; role=&quot;tablist&quot;&gt;
      &lt;button
        id=&quot;tab-1&quot;
        role=&quot;tab&quot;
        aria-controls=&quot;tab-content-1&quot;
        aria-selected=&quot;true&quot;
        &lt;!-- onClick={show/hide associated content} --&gt;
      &gt;
        Tab-1
      &lt;/button&gt;
      &lt;button
        id=&quot;tab-2&quot;
        role=&quot;tab&quot;
        aria-controls=&quot;tab-content-2&quot;
        aria-selected=&quot;false&quot;
        &lt;!-- onClick={show/hide associated content} --&gt;
      &gt;
        Tab-2
      &lt;/button&gt;
    &lt;/nav&gt;
  
    &lt;div&gt;
      &lt;!-- Content for Tab/Button #1, preloaded and hidden/shown from button click --&gt;
      &lt;section
        id=&quot;tab-content-1&quot;
        role=&quot;tab-content&quot;
        aria-labelledby=&quot;tab-1&quot;
        hidden
        &gt;
        Tab Content-1
      &lt;/section&gt;
      &lt;!-- Content for Tab/Button #2, preloaded and hidden/shown from button click --&gt;
      &lt;section
        id=&quot;tab-content-2&quot;
        role=&quot;tab-content&quot;
        aria-labelledby=&quot;tab-2&quot;
        hidden
      &gt;
        Tab Content-2
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Or I can dynamically load the content via the tab/button click</p>
  <pre><code>&lt;nav&gt;
    &lt;div class=&quot;tabs&quot; role=&quot;tablist&quot;&gt;
      &lt;button
        id=&quot;tab-1&quot;
        role=&quot;tab&quot;
        aria-controls=&quot;tab-content-1&quot;
        aria-selected=&quot;true&quot;
       &lt;!-- onClick={load appropriate content and HTML } --&gt;
      &gt;
        Tab-1
      &lt;/button&gt;
      &lt;button
        id=&quot;tab-2&quot;
        role=&quot;tab&quot;
        aria-controls=&quot;tab-content-2&quot;
        aria-selected=&quot;false&quot;
        &lt;!-- onClick={load appropriate content and HTML } --&gt;
      &gt;
        Tab-2
      &lt;/button&gt;
    &lt;/nav&gt;
  
    &lt;div&gt;
      &lt;!-- Dynamically load the associated Tab Content via Javascript Here
      &lt;section
        id=&quot;&quot; =&gt; dynamically set 'id'
        role=&quot;&quot; =&gt; dynamically set 'role'
        aria-labelledby=&quot;=&quot; =&gt; dynamically set 'arria-labelledby'
        &gt;
        // Dynamically set Content
      &lt;/section&gt;
      --&gt;
  &lt;/div&gt;
  </code></pre>