What should a tab's `aria-controls` refer to when inactive content isn't rendered?

I have an app with some tabs, but since it is rendered clientside it seems much more straightforward to render only a single (i.e. the currently selected) tab panel content at a time.

In cases like this, what should the aria-controls target be for the inactive tabs? Can I reuse the identifier of the single/shared panel across all tabs without causing issues for those relying on the ARIA metadata?

As a concrete example (using Preact hooks, hopefully the variable names are self-explanatory regardless) something like this:

const MyApp = ({ items }) => {
  const [selectedItemKey, selectItemKey] = useState(items[0].key);
  const selectedItem = useMemo(() =>
    items.find(d => d.key === selectedItemKey),
  [items, selectedItemKey]);

  return (
    <div class="my-app">
      <div class="sidebar" role="tablist">
        {items.map((item) => (
          <button type="button"
            role="tab"
            aria-selected={item.key === selectedItemKey}
            aria-controls="single-element-container0"        <------- ???
            onclick={evt => selectItemKey(item.key)}
          >{item.name}</button>
        )}
      </div>
      <div id="single-element-container0" class="details-display" role="tabpanel">
        <h2>{selectedItem.name}</h2>
        <p class="intro">{selectedItem.intro}</p>
        <p>{selectedItem.details}</p>
        <p class="seeAlso">{selectedItem.moreInfo}</p>
      </div>
    </div>
  );
};

The potential problem here is that for all items they will either be rendered into the #single-element-container0 div, or not rendered at all. So I only have one element identifier to share among all N tab buttons — is that okay?

From a rendering perspective it seems more efficient to generate the content only for the active tab, rather than rendering it all out and having to add CSS to hide the inactive ones. But aria-controls seems to want to reference all potentially available specific tabpanels even when they’re not otherwise needed in the DOM. Is there a best practice for this situation?

You need to sign in to view this answers

Related Post