Accessibility and Javascript: load dynamic content or show & hide?

Question

I am relatively new to Accessibility standards in my Front End code.

The question I have:

• For accessibility, is it better to load all HTML content initially and show/hide it, via a "hidden" attribute?
• Or can I dynamically load the content and fill it with the appropriate attributes?
• 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?

For example:
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:

 <nav>
  <div class="tabs" role="tablist">
    <button
      id="tab-1"
      role="tab"
      aria-controls="tab-content-1"
      aria-selected="true"
      <!-- onClick={show/hide associated content} -->
    >
      Tab-1
    </button>
    <button
      id="tab-2"
      role="tab"
      aria-controls="tab-content-2"
      aria-selected="false"
      <!-- onClick={show/hide associated content} -->
    >
      Tab-2
    </button>
  </nav>

  <div>
    <!-- Content for Tab/Button #1, preloaded and hidden/shown from button click -->
    <section
      id="tab-content-1"
      role="tab-content"
      aria-labelledby="tab-1"
      hidden
      >
      Tab Content-1
    </section>
    <!-- Content for Tab/Button #2, preloaded and hidden/shown from button click -->
    <section
      id="tab-content-2"
      role="tab-content"
      aria-labelledby="tab-2"
      hidden
    >
      Tab Content-2
    </section>
</div>

Or I can dynamically load the content via the tab/button click

<nav>
  <div class="tabs" role="tablist">
    <button
      id="tab-1"
      role="tab"
      aria-controls="tab-content-1"
      aria-selected="true"
     <!-- onClick={load appropriate content and HTML } -->
    >
      Tab-1
    </button>
    <button
      id="tab-2"
      role="tab"
      aria-controls="tab-content-2"
      aria-selected="false"
      <!-- onClick={load appropriate content and HTML } -->
    >
      Tab-2
    </button>
  </nav>

  <div>
    <!-- Dynamically load the associated Tab Content via Javascript Here
    <section
      id="" => dynamically set 'id'
      role="" => dynamically set 'role'
      aria-labelledby="=" => dynamically set 'arria-labelledby'
      >
      // Dynamically set Content
    </section>
    -->
</div>

Answer 1

First of all, you should use CSS display:none rather than aria-hidden to hide contents. The attribute aria-hidden should only be used in very specific situations. I suggest to make a search on when you should and shouldn't use aria-hidden, and why it is so. Many questions already cover the topic well.

Back to your initial question, in terms of accessibility only, it doesn't change much if the content is just made visible or if it is loaded.

Use an aria-live region to tell that the content is loading, in case it may take a while to load. However, don't use aria-live for the updated/new content itself, especially if it is long and/or contains focusable elements.

Deciding whether you should show/hide or dynamically load is mostly not a question of accessibility. It depends much more on initial and subsequent load times, as well as the level of responsiveness you expect at which moment.