#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/data-table-design/accessibility

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/data-table-design/accessibility

Repovive

Accessibility - Data Table Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Accessibility

Accessible table design

Tables need specific accessibility patterns.

Semantic markup:

<table role="grid" aria-label="User data">
  <thead>
    <tr>
      <th scope="col" aria-sort="ascending">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>John</td></tr>
  </tbody>
</table>

Sort indication: Use aria-sort on sorted column.

Selection: Checkboxes need labels. Announce selection count.

Keyboard: Arrow keys navigate cells. Enter activates row.