CoronaView_Notes.txt

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