ComponentOne
MVC FlexGrid AccessibilityExtender ASP.NET MVC FlexGrid AccessibilityExtender

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).
Amount
Discount
Active
ID
Country
Product
2,290.56
0.21
1
UK
Gadget
-4,554.12
0.07
2
Canada
Widget
1,074.56
0.10
3
China
Widget
-3,977.92
0.03
4
Italy
Widget
-1,250.16
0.18
5
China
Gadget
853.06
0.01
6
China
Widget
1,999.38
0.18
7
Italy
Widget
3,379.39
0.11
8
China
Gadget
3,155.06
0.15
9
Korea
Widget
4,236.11
0.15
10
German
Widget
494.90
0.04
11
Korea
Widget
-699.70
0.23
12
Korea
Widget
-1,921.91
0.25
13
US
Gadget
1,667.68
0.02
14
Italy
Widget
-4,484.96
0.22
15
Korea
Gadget
3,159.11
0.23
16
German
Widget
101.97
0.10
17
China
Widget
-1,165.67
0.07
18
Japan
Gadget
2,287.03
0.10
19
Italy
Gadget
-4,257.83
0.08
20
China
Widget
1,520.65
0.21
21
Korea
Gadget
578.47
0.11
22
Canada
Gadget
886.14
0.02
23
German
Gadget
3,838.10
0.16
24
UK
Widget
1,413.34
0.20
25
Canada
Gadget
461.76
0.13
26
Korea
Widget
-3,331.11
0.02
27
Canada
Widget
585.57
0.14
28
German
Widget
4,661.93
0.23
29
France
Gadget
2,032.01
0.17
30
German
Gadget
1,418.62
0.16
31
France
Widget
-3,920
0.20
32
Korea
Widget
-3,313.56
0.23
33
Korea
Widget
-982.54
0.22
34
Italy
Widget
663.23
0.05
35
Canada
Widget
2,250.20
0.12
36
German
Widget
-520.37
0.12
37
UK
Widget
4,689.57
0.06
38
US
Gadget
-3,447.73
0.22
39
Korea
Gadget
1,018.43
0.23
40
Japan
Gadget
-3,317.23
0.16
41
Korea
Widget
2,840.12
0.08
42
US
Gadget
1,939.91
0.14
43
Canada
Widget
-4,919.21
0.04
44
Japan
Widget
-63.80
0.23
45
Japan
Widget
2,159.81
0.24
46
Italy
Gadget
-4,799.80
0.21
47
US
Gadget
-326.01
0.09
48
UK
Gadget
-1,892.50
0.07
49
China
Gadget
-1,124.85
0.13
50
Canada
Widget
-3,489.22
0.24
51
Canada
Widget
3,176.50
0.11
52
Canada
Widget
397.65
0.06
53
Korea
Widget
-4,364.99
0.07
54
Japan
Gadget
462.34
0.04
55
France
Widget
-3,152.04
0.20
56
France
Gadget
-4,486
0.20
57
France
Widget
3,288.12
0.07
58
UK
Gadget
1,744.41
0.19
59
German
Gadget
1,815.48
0.18
60
China
Gadget
3,692.40
0.03
61
US
Gadget
4,439.16
0.21
62
Korea
Widget
1,361.51
0.02
63
France
Widget
4,181.17
0.07
64
China
Widget
-1,482.23
0.23
65
Korea
Widget
-2,498.15
0.06
66
Japan
Widget
-310.33
0.11
67
UK
Widget
2,762.18
0.23
68
US
Widget
-4,388.31
0
69
China
Gadget
2,990.32
0.10
70
US
Widget
-2,703.42
0.03
71
Japan
Widget
2,336.30
0.14
72
US
Gadget
3,059.46
0.03
73
US
Widget
-1,461.69
0.02
74
Japan
Gadget
4,426.58
0.18
75
Japan
Gadget
3,095.62
0.06
76
German
Gadget
538.45
0.17
77
Canada
Gadget
-3,170.34
0.22
78
UK
Gadget
20.60
0.03
79
France
Gadget
-3,346.60
0.11
80
Italy
Widget
-1,120.92
0.15
81
China
Gadget
391.20
0.19
82
China
Gadget
1,680.97
0.12
83
China
Gadget
1,470.15
0.22
84
UK
Widget
3,615.59
0.09
85
Japan
Gadget
-1,035.07
0.04
86
UK
Widget
619.87
0.11
87
UK
Gadget
-2,061.41
0.06
88
Canada
Widget
-3,362.90
0.21
89
China
Widget
2,394.14
0.15
90
UK
Widget
-3,036.55
0.05
91
UK
Gadget
2,652.84
0.12
92
Canada
Gadget
2,080.41
0.20
93
Canada
Gadget
-2,338.82
0.12
94
Canada
Gadget
-992.30
0.15
95
China
Widget
22.88
0.06
96
US
Widget
-4,984.18
0.16
97
German
Widget
2,760.24
0.06
98
Korea
Gadget
-3,100.61
0.10
99
Canada
Widget
4,071.62
0.12
100
Italy
Widget