The FlexGrid has extensive built-in accessibility support. But there are situations where you may want to extend that and provide additional support that is specific to your application or user base.

The AccessibilityExtender shows how you can easily extend accessibility support in two ways:

  1. By allowing users to resize columns using the keyboard(alt+left/right keys). This is done by handling the keydown event and changing the width property on selected columns.
  2. By providing an "alert" method that changes the content of an invisible element with role "alert". In this sample, the alert method is used to announce grid actions such as sorting and filtering(to actually hear the announcements, you must enable an assistive tool such as Chrome Vox, Narrator, or JAWS).
ID
Country
Product
Amount
Discount
Active
1
UK
Gadget
2,290.56
0.21
2
Canada
Widget
-4,554.12
0.07
3
China
Widget
1,074.56
0.10
4
Italy
Widget
-3,977.92
0.03
5
China
Gadget
-1,250.16
0.18
6
China
Widget
853.06
0.01
7
Italy
Widget
1,999.38
0.18
8
China
Gadget
3,379.39
0.11
9
Korea
Widget
3,155.06
0.15
10
German
Widget
4,236.11
0.15
11
Korea
Widget
494.90
0.04
12
Korea
Widget
-699.70
0.23
13
US
Gadget
-1,921.91
0.25
14
Italy
Widget
1,667.68
0.02
15
Korea
Gadget
-4,484.96
0.22
16
German
Widget
3,159.11
0.23
17
China
Widget
101.97
0.10
18
Japan
Gadget
-1,165.67
0.07
19
Italy
Gadget
2,287.03
0.10
20
China
Widget
-4,257.83
0.08
21
Korea
Gadget
1,520.65
0.21
22
Canada
Gadget
578.47
0.11
23
German
Gadget
886.14
0.02
24
UK
Widget
3,838.10
0.16
25
Canada
Gadget
1,413.34
0.20
26
Korea
Widget
461.76
0.13
27
Canada
Widget
-3,331.11
0.02
28
German
Widget
585.57
0.14
29
France
Gadget
4,661.93
0.23
30
German
Gadget
2,032.01
0.17
31
France
Widget
1,418.62
0.16
32
Korea
Widget
-3,920
0.20
33
Korea
Widget
-3,313.56
0.23
34
Italy
Widget
-982.54
0.22
35
Canada
Widget
663.23
0.05
36
German
Widget
2,250.20
0.12
37
UK
Widget
-520.37
0.12
38
US
Gadget
4,689.57
0.06
39
Korea
Gadget
-3,447.73
0.22
40
Japan
Gadget
1,018.43
0.23
41
Korea
Widget
-3,317.23
0.16
42
US
Gadget
2,840.12
0.08
43
Canada
Widget
1,939.91
0.14
44
Japan
Widget
-4,919.21
0.04
45
Japan
Widget
-63.80
0.23
46
Italy
Gadget
2,159.81
0.24
47
US
Gadget
-4,799.80
0.21
48
UK
Gadget
-326.01
0.09
49
China
Gadget
-1,892.50
0.07
50
Canada
Widget
-1,124.85
0.13
51
Canada
Widget
-3,489.22
0.24
52
Canada
Widget
3,176.50
0.11
53
Korea
Widget
397.65
0.06
54
Japan
Gadget
-4,364.99
0.07
55
France
Widget
462.34
0.04
56
France
Gadget
-3,152.04
0.20
57
France
Widget
-4,486
0.20
58
UK
Gadget
3,288.12
0.07
59
German
Gadget
1,744.41
0.19
60
China
Gadget
1,815.48
0.18
61
US
Gadget
3,692.40
0.03
62
Korea
Widget
4,439.16
0.21
63
France
Widget
1,361.51
0.02
64
China
Widget
4,181.17
0.07
65
Korea
Widget
-1,482.23
0.23
66
Japan
Widget
-2,498.15
0.06
67
UK
Widget
-310.33
0.11
68
US
Widget
2,762.18
0.23
69
China
Gadget
-4,388.31
0
70
US
Widget
2,990.32
0.10
71
Japan
Widget
-2,703.42
0.03
72
US
Gadget
2,336.30
0.14
73
US
Widget
3,059.46
0.03
74
Japan
Gadget
-1,461.69
0.02
75
Japan
Gadget
4,426.58
0.18
76
German
Gadget
3,095.62
0.06
77
Canada
Gadget
538.45
0.17
78
UK
Gadget
-3,170.34
0.22
79
France
Gadget
20.60
0.03
80
Italy
Widget
-3,346.60
0.11
81
China
Gadget
-1,120.92
0.15
82
China
Gadget
391.20
0.19
83
China
Gadget
1,680.97
0.12
84
UK
Widget
1,470.15
0.22
85
Japan
Gadget
3,615.59
0.09
86
UK
Widget
-1,035.07
0.04
87
UK
Gadget
619.87
0.11
88
Canada
Widget
-2,061.41
0.06
89
China
Widget
-3,362.90
0.21
90
UK
Widget
2,394.14
0.15
91
UK
Gadget
-3,036.55
0.05
92
Canada
Gadget
2,652.84
0.12
93
Canada
Gadget
2,080.41
0.20
94
Canada
Gadget
-2,338.82
0.12
95
China
Widget
-992.30
0.15
96
US
Widget
22.88
0.06
97
German
Widget
-4,984.18
0.16
98
Korea
Gadget
2,760.24
0.06
99
Canada
Widget
-3,100.61
0.10
100
Italy
Widget
4,071.62
0.12