Screen reader accessibility

[cartertemm]

Overview

The treemap visualization is currently canvas-based, which means that screen readers can't interpret any of the 342 occupations or interact with the page in a meaningful way. There are also no landmark regions, the heading hierarchy skips levels, toggle buttons don't expose their active state, and stat updates are silent when switching layers.

This PR fixes all of these issues, while leaving the pre-existing visual design unchanged.

Changes

• Added a visually hidden HTML table containing all occupation data (title, category, jobs, pay, outlook, education, AI exposure) so screen readers can browse the full dataset. Each occupation links to its corresponding BLS page.
• Wrapped the page in proper landmark elements (<header>, <main>) and added a hidden <h2> to aid in navigation and fix the heading hierarchy (was jumping from h1 to h3).
• Set aria-pressed on the layer toggle buttons so screen readers announce which layer is active. This updates dynamically when the user switches layers.
• Added an aria-live region that announces a short summary when the layer changes (e.g. "Switched to Median Pay. Avg. pay: $58K")
• Marked both canvases and the tooltip with aria-hidden="true" since they're redundant with the table and not keyboard-accessible anyway.

Testing

• Opened the site in a browser and confirmed the page looks identical to before. There are no layout shifts, visible text from sr-only elements, or changes to treemap rendering or interaction.
• Inspected the DOM to verify correct landmark nesting, heading order, aria attributes on all buttons and canvases, table row count (342), and live region updates on layer switch.
• Tested with a screen reader: navigated by landmarks (banner/main), headings (h1/h2/h3), and table. Confirmed button states announce correctly, layer changes trigger live announcements, and table links open BLS pages in new tabs.