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 notSupported in Firefox 116.
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.
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.
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.