Tabs

Tabs aren't just buttons that hide some elements and show others. They have standard roles that you need to add: role="tablist" on the container, role="tab" with aria-selected on each tab, and role="tabpanel" on each content panel.

With these roles, a screen reader knows it's looking at tabs, how many there are and which one is open right now, even though it can't see the page.

Hide the panels with the hidden attribute instead of a CSS class that sets display:none. The state then lives in the HTML itself, and hidden takes the panel out of the accessibility tree as well as off the screen.