Organization chart

A <ul class="org-chart"> draws a reporting line top down, with each person as a card under their manager.

Write each person as an <li>. A person with reports holds a <details open>. Its <summary class="org-chart-node"> is the card and its nested <ul> holds the reports, so selecting a card folds the team away. A person without reports holds a <div class="org-chart-node">.

A card stacks an optional .org-chart-role band first, then an .avatar and an .org-chart-name. The stylesheet draws the lines between cards. A chart wider than its container scrolls sideways inside the list. The org chart is CSS only.

<ul class="org-chart" aria-label="Company staff">
  <li>
    <details open>
      <summary class="org-chart-node">
        <span class="org-chart-role">CIO</span>
        <img class="avatar large" src="marisol.jpg" alt="">
        <span class="org-chart-name">Marisol Okafor</span>
      </summary>
      <ul>
        <li>
          <div class="org-chart-node">
            <span class="org-chart-role">R&amp;D</span>
            <span class="avatar large" aria-hidden="true">IH</span>
            <span class="org-chart-name">Ingrid Halvorsen</span>
          </div>
        </li>
      </ul>
    </details>
  </li>
</ul>

Linked profiles

To link a person without reports to their profile, write the card as <a class="org-chart-node">. Keep a manager's card a <summary>, because a link inside a summary competes with opening the team. Put a profile link for a manager elsewhere on the page.

<li>
  <a class="org-chart-node" href="/people/ingrid-halvorsen">
    <span class="org-chart-role">R&amp;D</span>
    <img class="avatar large" src="ingrid.jpg" alt="">
    <span class="org-chart-name">Ingrid Halvorsen</span>
  </a>
</li>

Accessibility

Name the root list with aria-label. The nested lists carry the hierarchy, so a screen reader announces each list's size and level. The drawn lines stay silent. When the name follows the avatar, give an avatar image an empty alt and an initials avatar aria-hidden="true". Otherwise the screen reader reads the name twice.

Each manager is a Tab stop, and Enter or Space opens or closes the team. The chart takes no role="tree", for the same reason as the tree. That role promises arrow-key navigation that native disclosures do not provide.

Tokens

Override these on the .org-chart.