ARIA Data Table

Aria Data Table Example

Accessibility Webinar

HTML Code

<h2 id="caption">Accessibility Webinar </h2>

<div role="table" aria-labelledby="caption">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader">Title</div>
      <div role="columnheader">Location</div>
      <div role="columnheader"> Date</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="rowheader">Accessibility Testing</div>
      <div role="cell">Chennai</div>
      <div role="cell">Oct 25th, 2019</div>
    </div>
    <div role="row">
      <div role="rowheader">Accessibility Documentation</div>
      <div role="cell">Delhi</div>
      <div role="cell">Dec 21st, 2019</div>
    </div>
    <div role="row">
      <div role="rowheader">Accessibility ARIA</div>
      <div role="cell">Punjab</div>
      <div role="cell">Oct 25th, 2019</div>
    </div>
  </div>
</div>

CSS Code

<style>[role="table"] {
  border-collapse: collapse;
  display: table;
}

[role="rowgroup"] {
  display: table-row-group;
}

[role="row"] {
  display: table-row;
}

[role="columnheader"],
[role="rowheader"],
[role="cell"] {
  border: solid Silver 1px;
  display: table-cell;
  padding: 1em;
  vertical-align: middle;
}

[role="columnheader"],
[role="rowheader"] {
  font-weight: 700;
  text-align: center;
}
</style>

JAWS Screen Reader Shortcuts

Topic	Task	Command
Table:	Go to next (previous) table	T (Shift + T)
Cell:	Cell to right	Ctrl + Alt + →
	Cell to left	Ctrl + Alt + ←
	Cell below	Ctrl + Alt + ↓
	Cell above	Ctrl + Alt + ↑
	First Cell	Ctrl + Alt + Home
	Last cell	Ctrl + Alt + End
	Say current cell	Ctrl + Alt + Numpad 5
Row:	Read current row	Insert + Shift + ↑
	Read from start of row	Insert + Shift + Home
	Read to end of row	Insert + Shift + Page Up
	First cell in row	Ctrl + Alt + Shift + ←
	Last cell in row	Ctrl + Alt + Shift + →
Column:	Read current column	Insert + Shift + Numpad 5
	Read from top of column	Insert + Shift + End
	Read to bottom of column	Insert + Shift + Page Down
	First cell in column	Ctrl + Alt + Shift + ↑
	Last cell in column	Ctrl + Alt + Shift + ↓

NVDA Shortcuts

Topic	Task	Command
Table:	Go to next (previous) table	T (Shift + T)
Cell:	Cell to right	Ctrl + Alt + →
	Cell to left	Ctrl + Alt + ←
	Cell below	Ctrl + Alt + ↓
	Cell above	Ctrl + Alt + ↑

VoiceOver Shortcuts

Task	Command
Read column header	VO + C
Read row from VO cursor location to end of row	VO + R
Read column from VO cursor location to bottom of column	VO + R + C
Move up or down in a column	Up Arrow or Down Arrow
Move across a row	Left Arrow or Right Arrow