-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCoronaView_Notes.txt
159 lines (116 loc) · 6.36 KB
/
CoronaView_Notes.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
CDC Coronavirus Interactive - Build 1 - Accessibility Audit Report, 4Apr2020
Device: Windows 10, Laptop
Software: Google Chrome, Wave, Axe
WCAG version: 2.0
========================================================================================================================================
1.1 TEXT ALTERNATIVES
----------------------
1.1.1 Non-text Content (A)
- Data Tables: The bar charts under the 'U.S.Cases' need to have associated, accessible data tables. In general, all maps and charts need to have associated, accessible data tables. Add table 'caption' and row and column 'scope' like it is described here: https://webaim.org/techniques/tables/data. For more details, read: https://www.w3.org/WAI/tutorials/tables/
- Add role="alert" aria-label="Loading" to img id="loading".
1.2 TIME-BASED MEDIA
----------------------
1.2.1 Audio-only and Video-only (Prerecorded) (A)
- No issues found
1.2.2 Captions (Prerecorded) (A)
- No issues found
1.2.3 Audio Description or Media Alternative (Prerecorded) (A)
- No issues found
1.2.4 Captions (Live) (AA)
- No issues found
1.2.5 Audio Description (Prerecorded) (AA)
- No issues found
1.3 ADAPTABLE
-----------------
1.3.1 Info and Relationships (A)
- No issues found
1.3.2 Meaningful Sequence (A)
- No issues found
1.3.3 Sensory Characteristics (A)
- No issues found
1.4 DISTINGUISHABLE
---------------------
1.4.1 Use of Color (A)
- No issues found
1.4.2 Audio Control (A)
- No issues found
1.4.3 Contrast (Minimum) (AA)
- The link 'Notes' fails contrast check
- The title of tables e.g. 'Cases by Country' fails contrast check. Same for 'Cases by State'
- The text 'Data Current as of' and 'WHO(03/24/2019) | CDC (03/23/2019) |' fails contrast check by Axe but passed by Chrome. Recommendation: Consider this as a fail and remediate
- The text 'Esri' and 'Powered by Esri' fail contrast check by Axe but passed by Chrome. Recommendation: Consider this as a fail and remediate
1.4.4 Resize Text (AA)
- No issues found
1.4.5 Images of Text (AA)
- Ideally the text in div id="divHeader_image' should be converted to text, since people with vision impairments will 'zoom' and text in images get pixelated. https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html
2.1 KEYBOARD ACCESSIBLE
------------------------
2.1.1 Keyboard (A)
- No issues found
2.1.2 No Keyboard Trap (A)
- Trap Focus: When a widget is maximized, the focus should shift to first focusable element inside the maximized widget. The focus should keep rotating through the focusable elements within the maximized widget, until it is minimized again. When the widget is minimized, the focus should be set back to the element which triggered the maximization of the widget, i.e. the 'maximize' button.
This logic applies to 'modal' dialogs as well.
2.2 ENOUGH TIME
-------------------
2.2.1 Timing Adjustable (A)
- No issues found
2.2.2 Pause, Stop, Hide (A)
- No issues found
2.3 SEIZURES
-------------
2.3.1 Three Flashes or Below Threshold (A)
- No issues found
2.4 NAVIGABLE
-------------
2.4.1 Bypass Blocks (A)
- Add 'Skip Link' on top of page that goes directly to the main content area. https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html
2.4.2 Page Title (A)
- Change the 'title' of the page. Should adequately and briefly describe the content of the page. Also remove the word 'Prototype'. https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html
2.4.3 Focus Order (A) https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html
- Make the div id="divHeader_image" focusable by adding tabindex="0". Add 'aria-label' with some text e.g. 'Explore maps, charts and data of Coronavirus - 19 from CDC'. Keep 'alt' text for the img inside this div.
- All the 'tabs' i.e. Home, Global Situation, U.S. Cases etc should be structured inside a 'tab list'. When a 'tab' is focused and 'Enter' or 'Space bar' is pressed, then further tabbing should take focus inside the 'main' content. Left and Right arrow keys should be usable to move left or right to different tabs. For more on Keyboard navigation, read this: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
- Focus should first be set on <div class="widget3_container_table"> Same for <div class="widget7_container_table">. Add aria-label="Cases by Country table" or other meaningful description. All data tables should be structured to be made 'accessible'. Read: https://www.w3.org/WAI/tutorials/tables/. More exhaustive example with code: https://inclusive-components.design/data-tables/
- Focus should first be set on <div id="widget_4">. Add aria-label with a meaningful description.
2.4.4 Link Purpose (In Context) (A)
- Change the aria-label for div id="navButtons" to 'Primary' instead of 'main'.
2.4.5 Multiple Ways (AA)
- No issues found
2.4.6 Headings and Labels (AA)
- Generate meaningful aria-label text for div id="widget_1" through Javascript for e.g. Global cases are 832,623 as of 03/24/2019.
Add aria-hidden="true" to div id="globalconf". Do this for the other similar Global and USA widgets.
- The img in div id="divHeader_image' should have more descriptive 'alt' text e.g. CDC Coronavirus Interactive, Explore maps,charts and data.
- Add aria-label to all the 'maximize' buttons.
2.4.7 Focus Visible (AA)
- Make the focus indicator highly visible when an element gets the focus. https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
3.1 READABLE
---------------
3.1.1 Language of Page (A)
- No issues found
3.1.2 Language of Parts (AA)
- No issues found
3.2 PREDICTABLE
----------------
3.2.1 On Focus (A)
- No issues found
3.2.2 On Input (A)
- No issues found
3.2.3 Consistent Navigation (AA)
- No issues found
3.2.4 Consistent Identification (AA)
- No issues found
3.3 INPUT ASSISTANCE
--------------------
3.3.1 Error Identification (A)
- No issues found
3.3.2 Labels or Instructions (A)
- No issues found
3.3.3 Error Suggestion (AA)
- No issues found
3.3.4 Error Prevention (Legal, Financial, Data) (AA)
- No issues found
4.1 COMPATIBLE
-----------------
4.1.1 Parsing (A)
- I found some issues. Use 'Validate by Direct Input' to check here: https://validator.w3.org/
4.1.2 Name, Role, Value (A)
- <section id="titleSection"> is not contained by landmarks