Skip to main content

Curbcut WCAG AAA

Table

Data tables with captions, header scope, and an accessible scroll region.

Common Town Clerk fees
ServiceFee
Certified copy of a vital record$10
Marriage intentions$25
Business certificate (4 years)$40
Show the markup 
<div class="cc-table-scroll" tabindex="0" role="region" aria-label="Town Clerk fees">
  <table class="cc-table">
    <caption>Common Town Clerk fees</caption>
    <thead><tr><th scope="col">Service</th><th scope="col">Fee</th></tr></thead>
    <tbody>
      <tr><td>Certified copy of a vital record</td><td>$10</td></tr>
      <tr><td>Marriage intentions</td><td>$25</td></tr>
      <tr><td>Business certificate (4 years)</td><td>$40</td></tr>
    </tbody>
  </table>
</div>

Accessibility

  • Every table gets a caption and th scope attributes.
  • The scroll wrapper is focusable (tabindex="0") with a role and label, so keyboard users can scroll wide tables.
  • Zebra striping is decorative; cc-table--plain turns it off.
  • Tables are for data. Never for layout.