SVGs as Tables

Each of the SVGs is coded with ARIA table roles to allow two axes of navigation via native screen reader controls. The first two tables are for reference / comparison.

1. HTML Table

Coded using HTML <table> element.

Party Expenses by Month in Gold Pieces
Expense Type January February March April May June
Housing 60 60 40 5 0 0
Food 20 20 10 10 0 0
Ale/Mead 10 10 15 20 25 30
Healing (Priests, Potions) 0 0 0 10 50 20
Totals: 90 90 65 45 75 50

2. Table Roles

Coded with <div> elements and appropriate table roles.

Party Expenses by Month in Gold Pieces
Expense Type
January
February
March
April
May
June
Housing
60
60
40
5
0
0
Food
20
20
10
10
0
0
Ale/Mead
10
10
15
20
25
30
Healing (Priests, Potions)
0
0
0
10
50
20
Totals:
90
90
65
45
75
50

3. SVG with Table Roles

Uses the exact same structure and roles as the <div> table. It should navigate the same way. NVDA/Firefox does not Supported in Firefox 116.

Party Expenses by Month in Gold Pieces Expense Type January February March April May June Housing 60 60 40 5 0 0 Food 20 20 10 10 0 0 Ale/Mead 10 10 15 20 25 30 Healing (Priests, Potions) 0 0 0 10 50 20 Totals 90 90 65 45 75 50

4. SVG with Table Roles and aria-describedby Comparing to Total

This uses aria-describedby to provide additional information about an expense related to the month total. Row 2 column 2 should announce as, 60, pause, of 90 total.

Party Expenses by Month in Gold Pieces Expense Type January February March April May June Housing 60 60 40 5 0 0 Food 20 20 10 10 0 0 Ale/Mead 10 10 15 20 25 30 Healing (Priests, Potions) 0 0 0 10 50 20 Totals 90 90 65 45 75 50

5. SVG with Table Roles and aria-labelledby Comparing to Total

This uses aria-describedby to provide additional information about an expense related to the month total. Row 2 column 2 should announce as, 60 of 90 total.

Party Expenses by Month in Gold Pieces Expense Type January February March April May June Housing 60 60 40 5 0 0 Food 20 20 10 10 0 0 Ale/Mead 10 10 15 20 25 30 Healing (Priests, Potions) 0 0 0 10 50 20 Totals 90 90 65 45 75 50

6. SVG with Table Roles and aria-describedby Comparing to Another Month

This uses aria-describedby to provide additional information about an expense related to another month. Row 2 column 2 should announce as, 60, pause, compared to 60 in February.

Party Expenses by Month in Gold Pieces Expense Type January February March April May June Housing 60 60 40 5 0 0 Food 20 20 10 10 0 0 Ale/Mead 10 10 15 20 25 30 Healing (Priests, Potions) 0 0 0 10 50 20 Totals 90 90 65 45 75 50