[A11Y] [High] Tables missing proper header associations

[continue]

Accessibility Issue: Tables Missing Proper Header Associations

WCAG Level: A
Severity: High
Category: Semantic HTML

Issue Description

Data tables throughout the application use <th> elements for headers but lack scope attributes, making it difficult for screen readers to associate data cells with their corresponding headers.

User Impact

• Affected Users: Screen reader users
• Severity: Users cannot understand the relationship between table headers and data cells

Violations Found

File: components/calculate/results-display.tsx

Lines: 228-236

<table className="w-full font-mono text-xs">
  <thead className="sticky top-0 bg-zinc-900 text-zinc-500">
    <tr>
      <th className="px-3 py-2 text-left">#</th>
      <th className="px-3 py-2 text-left">Element</th>
      <th className="px-3 py-2 text-right">F<sub>x</sub></th>
      <th className="px-3 py-2 text-right">F<sub>y</sub></th>
      <th className="px-3 py-2 text-right">F<sub>z</sub></th>
      <th className="px-3 py-2 text-right">|F|</th>
    </tr>
  </thead>

Issue: Table headers lack scope="col" attribute

---

File: app/community/page.tsx

Lines: 206-219

<table className="w-full font-mono text-xs">
  <thead className="bg-zinc-900 text-zinc-500">
    <tr>
      <SortHeader label="Formula" ... />
      <th className="px-3 py-2.5 text-left">Type</th>
      <th className="px-3 py-2.5 text-left">Model</th>
      ...
    </tr>
  </thead>

Issue: Headers missing scope, SortHeader component may not include scope

---

File: components/semiconductor/defect-generator.tsx

Lines: 123-132

<table className="w-full font-mono text-xs">
  <thead className="sticky top-0 bg-zinc-900 text-zinc-500">
    <tr>
      <th className="px-2 py-1.5 text-left">#</th>
      <th className="px-2 py-1.5 text-left">Elem</th>
      <th className="px-2 py-1.5 text-right">x</th>
      <th className="px-2 py-1.5 text-right">y</th>
      <th className="px-2 py-1.5 text-right">z</th>
    </tr>
  </thead>

Issue: Atom positions table headers lack scope

---

Recommended Fix

<!-- Fixed Code -->
<table className="w-full font-mono text-xs">
  <caption className="sr-only">Atomic forces table showing force components for each atom</caption>
  <thead className="sticky top-0 bg-zinc-900 text-zinc-500">
    <tr>
      <th scope="col" className="px-3 py-2 text-left">#</th>
      <th scope="col" className="px-3 py-2 text-left">Element</th>
      <th scope="col" className="px-3 py-2 text-right">F<sub>x</sub></th>
      <th scope="col" className="px-3 py-2 text-right">F<sub>y</sub></th>
      <th scope="col" className="px-3 py-2 text-right">F<sub>z</sub></th>
      <th scope="col" className="px-3 py-2 text-right">|F|</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" className="...">1</th>
      <td>C</td>
      ...
    </tr>
  </tbody>
</table>

Changes Made:

1. Add scope="col" to all column headers
2. Consider scope="row" for row headers (atom indices)
3. Add visually hidden <caption> for table purpose
4. Update SortHeader component to include scope

---

Additional Instances

• All data tables in the application should be reviewed

Testing Instructions

1. Use screen reader to navigate table
2. Verify headers are announced with each cell
3. Check that table purpose is clear from caption
4. Navigate by rows and columns - headers should be associated

Resources

• WCAG 1.3.1 Info and Relationships
• MDN: Table accessibility
• WebAIM: Creating Accessible Tables

Acceptance Criteria

• All <th> elements have appropriate scope attribute
• Complex tables have <caption> element
• Screen reader announces headers with cells
• SortHeader component updated

---