adding accessibility content

Author: pzaldonis

accessibility/interaction/focus_indicator.md

@@ -1,7 +1,15 @@
 ---
 layout: page
-title: Ensure the keyboard focus indicator is easily visible. 
+title: Ensure the keyboard focus indicator is visible
 parent: Interaction
 grand_parent: Accessibility
 nav_order: 22
 ---
+
+# Ensure the keyboard focus indicator is easily visible.
+
+When a user is navigating a website using a keyboard, they typically use the tab key to navigate interactive elements such as links, buttons, fields, etc. As they tab through the items on the site, the selected item that is tabbed to has keyboard “focus” and can be activated or manipulated with the keyboard. 
+
+Focus indicators are automatically provided by web browsers and usually appear as a border or outline around the focused elements. When you test your data visualization or dashboard with a keyboard, ensure that the focus indicator is easily visible. 
+
+If your page includes custom html and css, make sure that the focus indicator is included and works as expected. For more information about focus indicators, see the focus indicator section of WebAIM’s article [Keyboard Accessibility](https://webaim.org/techniques/keyboard/){:target="_blank"}.

accessibility/interaction/key_information.md

@@ -1,7 +1,11 @@
 ---
 layout: page
-title: Don’t require interactions to access key information.
+title: Don’t require interactions to access key information
 parent: Interaction
 grand_parent: Accessibility
 nav_order: 24
----
+---
+
+# Don’t require interactions to access key information.
+
+No interactions or clicks should be required to see critical information in your visualization. Try to set up your visualization so that the important conclusion is obvious by default, without any clicking needed. Similarly, don’t rely on tooltips to convey important information, as they can challenging for users with some motor issues. If you use tooltips, verify they contain clear information and that information is also available in text or an aria label. Tooltips are not typically accessible to screen readers.

accessibility/interaction/keyboard.md

@@ -12,8 +12,8 @@ Many users who encounter an interactive data visualization will navigate it usin
 
 Test your data visualization or dashboard with a keyboard to make sure it behaves as expected. The table below from WebAIM’s article Keyboard Accessibility outlines the most common online interactions and the corresponding keystrokes. Use these keystrokes to test your visualization with a keyboard.
 
-| Interaction              | Keystrokes                                                                           | 
-| ------------------------ | ------------------------------------------------------------------------------------ | 
+| Interaction                     | Keystrokes                                                                           | 
+| ------------------------------- | ------------------------------------------------------------------------------------ | 
 | Navigate to interactive elements | {::nomarkdown}<ul><li><code>Tab</code> - navigate forward</li><li><code>Shift</code> + <code>Tab</code> - navigate backward</li></ul>{:/}|
 | Link | {::nomarkdown}<ul><li><code>Enter</code> - activate the link</li></ul>{:/}|
 | Button | {::nomarkdown}<ul><li><code>Enter</code> or <code>Spacebar</code> - activate the button</li></ul>{:/}|
@@ -26,6 +26,6 @@ Test your data visualization or dashboard with a keyboard to make sure it behave
 | Menu bar | {::nomarkdown}<ul><li><code>↑</code>/<code>↓</code> - previous/next menu option</li><li><code>Enter</code>/<code>End</code>  - expand the menu (optional) and select an option.</li><li><code>←</code>/<code>→</code> - expand/collapse submenu</li></ul>{:/}|
 | Tab panel | {::nomarkdown}<ul><li><code>Tab</code> - once to navigate into the group of tabs and once to navigate out of the group of tabs</li><li><code>↑</code>/<code>↓</code> or <code>←</code>/<code>→</code> - choose and activate previous/next tab.</li></ul>{:/}|
 | 'Tree' menu | {::nomarkdown}<ul><li><code>↑</code>/<code>↓</code> - navigate previous/next menu option</li><li><li><code>←</code>/<code>→</code> - expand/collapse submenu, move up/down one level.</li></ul>{:/}|
-| Scroll | {::nomarkdown}<ul><li><code>↑</code>/<code>↓</code> - scroll vertically</li><li><code><li><code>←</code>/<code>→</code> - escroll horizontally</li><li><code>Spacebar</code>/<code>Shift</code> + <code>Spacebar</code> - scroll by page</li></ul>{:/}|
+| Scroll | {::nomarkdown}<ul><li><code>↑</code>/<code>↓</code> - scroll vertically</li><li><code>←</code>/<code>→</code> - scroll horizontally</li><li><code>Spacebar</code>/<code>Shift</code> + <code>Spacebar</code> - scroll by page</li></ul>{:/}|
 
 For more detailed guidance on keyboard accessibility, see WebAIM’s article [Keyboard Accessibility](https://webaim.org/techniques/keyboard/){:target="_blank"}.

accessibility/interaction/tab_order.md

@@ -1,7 +1,15 @@
 ---
 layout: page
-title: Check that the tab order is logical and intuitive for keyboard and assistive technology users. 
+title: Check that the tab order is logical
 parent: Interaction
 grand_parent: Accessibility
 nav_order: 23
----
+---
+
+# Check that the tab order is logical and intuitive for keyboard and assistive technology users. 
+
+As a keyboard user navigates through a page, the order in which items receive keyboard focus is important. The default tab order should be logical and intuitive, typically following the visual flow of the page. When you test your data visualization or dashboard with a keyboard, note the tab order and check that it makes sense. Additional resources on tab order include: 
+
+* The navigation order section of WebAIM’s article [Keyboard Accessibility](https://webaim.org/techniques/keyboard/){:target="_blank"}
+* Tab order in [Microsoft Power BI](https://learn.microsoft.com/en-us/power-bi/create-reports/desktop-accessibility-creating-reports#tab-order){:target="_blank"}
+* Tab order in [Tableau](https://community.tableau.com/s/question/0D54T00000C6USYSA3/how-can-i-set-the-focus-order-of-the-views-and-objects-in-a-dashboard){:target="_blank"}

accessibility/testing/low_vision.md

@@ -1,7 +1,11 @@
 ---
 layout: page
-title: Test for low vision.
+title: Test for low vision
 parent: Testing
 grand_parent: Accessibility
 nav_order: 27
----
+---
+
+# Test for low vision.
+
+Some people use tools like [Windows Magnifier](https://support.microsoft.com/en-us/windows/how-to-use-magnifier-reading-59d049ba-8434-9d04-34f2-2e00f11c5cb8){:target="_blank"} to enlarge content for easier readability. Test your visualization or dashboard with Windows Magnifier to see how it will appear with the magnifying tool.

accessibility/testing/mobile.md

@@ -1,7 +1,13 @@
 ---
 layout: page
-title: Test on mobile.
+title: Test on mobile
 parent: Testing
 grand_parent: Accessibility
 nav_order: 28
----
+---
+
+# Test on mobile 
+
+Once you have a draft of your data visualization or dashboard, test it from your phone to see how it works on mobile. Can you see the key information? Can you navigate any interactive elements? 
+
+In some tools like Power BI or Tableau, you may want to develop separate view for mobile and desktop. For more guidance on developing dashboards for mobile, see DataSF’s [Public Data Visualization Guide](https://datasf.gitbook.io/public-data-visualization-guide/mobile-view){:target="_blank"}. 

accessibility/testing/screen_reader.md

@@ -1,7 +1,21 @@
 ---
 layout: page
-title: Test your visualization or dashboard with a screen reader.
+title: Test your viz with a screen reader
 parent: Testing
 grand_parent: Accessibility
 nav_order: 26
----
+---
+
+# Test your visualization or dashboard with a screen reader.
+
+Screen readers are software programs that convert digital text into synthesized speech. They empower users to hear content and navigate with a keyboard. For an overview of screen readers, see WebAIM’s article [Designing for Screen Reader Compatibility](https://webaim.org/techniques/screenreader/){:target="_blank"}. 
+
+Some popular screen readers include: 
+
+* [NVDA](https://www.nvaccess.org/download/){:target="_blank"}
+* [JAWS](https://www.freedomscientific.com/products/software/jaws/){:target="_blank"}
+* [VoiceOver](https://www.apple.com/voiceover/info/guide/_1121.html){:target="_blank"} (for Mac)
+* [Microsoft Narrator](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1){:target="_blank"} 
+* [ChromeVox](https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en){:target="_blank"} 
+
+Use a screen reader to navigate your visualization or dashboard and make sure that you can navigate and get all the key information using a screen reader. 

accessibility/testing/testing_intro.md

@@ -8,4 +8,6 @@ parent: Accessibility
 
 # Testing
 
+When developing a data visualization or dashboard, we should incorporate accessibility testing into our process. This section provides guidance on how to test for accessibility. 
+
 {:toc}

resources.md

@@ -17,7 +17,7 @@ The resources below can help you get started visualizing open data.
 The accessibility guidelines in this document were adapted from several resources on data visualization and accessibility, including: 
 
 * [Accessible data viz is better data viz](https://www.storytellingwithdata.com/blog/2018/6/26/accessible-data-viz-is-better-data-viz){:target="_blank"}, Amy Cesal
-* [ Writing Alt Text for Good Data Visualization](https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81){:target="_blank"}, Amy Cesal
+* [Writing Alt Text for Good Data Visualization](https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81){:target="_blank"}, Amy Cesal
 * [Data visualization standards for SF.gov](https://datasf.gitbook.io/public-data-visualization-guide/){:target="_blank"}, DataSF
 * [10 Guidelines for DataViz Accessibility](https://www.highcharts.com/blog/tutorials/10-guidelines-for-dataviz-accessibility/){:target="_blank"}, HighCharts
 * [Top Tips for Data Accessibility](https://material.io/blog/data-visualization-accessibility){:target="_blank"}, Material Design