class: center, middle, inverse, title-slide # Accessibility with Different Representations of Data ### Mine Dogucu ### 2022-03-02 --- class: middle center class: middle ## ADA Americans With Disabilities Act (ADA) prohibits discrimination against individuals with disabilities in all areas of public life. --- class: middle ## Discussion - Breakout Rooms - Why do you think as data scientists we should care about ADA? -- - What in data science do you think is not accessible to people with disabilities? --- class: middle **Ableism** is discrimination in favor of able-bodied people. --- class: middle As data scientists, we have to ensure that everyone can access our public-facing outputs (websites, analysis reports, etc.) regardless of their disability status. --- class: middle ## Statistics - 61 million adults in the United States live with a disability -- - 26 percent (one in 4) of adults in the United States have some type of disability. -- - 4.6 percent of people with a disability have a vision disability with blindness or serious difficulty seeing even when wearing glasses. [CDC Infographic on disability](https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html) --- class: middle ## Assistive Technology - Assistive Technology is any form of technology (software, device) that helps people with disabilities perform certain activities. Examples: - walking sticks - wheel chairs - screen readers --- class: middle ## Screen reader A screen reader is an assistive technology that supports blind or visually impaired people in using their computer. -- - Demo by Prof. Dogucu -- Your turn - If you are on a Windows machine please download and install [NVDA](https://www.nvaccess.org/download/). - If you are on a Mac go to System Preferences > Accessibility > Voice Over > Enable Voice Over --- class: middle ## Data Visualization - Colors <img src="accessibility1_files/figure-html/unnamed-chunk-2-1.png" title="Three separate scatterplots showing bill depth and bill length of three separate species of penguins Adelie, Chinstrap, and Gentoo respectively and the scatterplots are red, green, and blue respectively." alt="Three separate scatterplots showing bill depth and bill length of three separate species of penguins Adelie, Chinstrap, and Gentoo respectively and the scatterplots are red, green, and blue respectively." style="display: block; margin: auto;" /> --- class: middle [Color blindness simulation](https://www.color-blindness.com/coblis-color-blindness-simulator/): red-blind/protanopia <img src="img/red-blind.png" title="The same scatterplots are displayed but Adelie and Chinstrap penguin data are shown with a very similar yellow-brownish green. There is no red visible." alt="The same scatterplots are displayed but Adelie and Chinstrap penguin data are shown with a very similar yellow-brownish green. There is no red visible." width="60%" style="display: block; margin: auto;" /> --- class: middle [Color blindness simulation](https://www.color-blindness.com/coblis-color-blindness-simulator/): green-blind/deuteranopia <img src="img/green-blind.png" title="The same scatterplots are displayed but Adelie and Chinstrap penguin data are shown with a very similar yellow-brownish green. There is no red visible. The gray background is also a bright pink." alt="The same scatterplots are displayed but Adelie and Chinstrap penguin data are shown with a very similar yellow-brownish green. There is no red visible. The gray background is also a bright pink." width="60%" style="display: block; margin: auto;" /> --- class: middle [Color blindness simulation](https://www.color-blindness.com/coblis-color-blindness-simulator/): blue-blind/tritanopia <img src="img/blue-blind.png" title="The same scatterplots are displayed but Adelie and Gentoo penguin data are shown with a very similar greenish blue." alt="The same scatterplots are displayed but Adelie and Gentoo penguin data are shown with a very similar greenish blue." width="60%" style="display: block; margin: auto;" /> --- class: middle ## Resources [Color Blindness Simulator](https://www.color-blindness.com/coblis-color-blindness-simulator/) You can upload any image and in return get an image with colors that would be visible to color-blind people with specific color vision deficiency. -- [Okabe-Ito 2008](https://jfly.uni-koeln.de/color/) Color Universal Design. Color palette that is color-blind friendly. [Okabe-Ito color-palette](https://mikemol.github.io/technique/colorblind/2018/02/11/color-safe-palette.html) Color codes for Okabe-Ito palette. [ggokabeito](https://github.com/malcolmbarrett/ggokabeito) R package to fill color scale of a ggplot with Okabe-Ito colors --- class: middle ## Alternate Text - "Alt text" describes contents of an image. - It is used in HTML pages. - Screen-readers cannot read images but can read alt text. - Alt text has to be provided. - We can verbalize data via alternate text. --- class: middle ## Data Verbalization - Manual Alternate Text https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81 --- class: middle ## Data Verbalization - Automatic ```r example_barplot <- ggplot(mtcars, aes(x = transmission)) + geom_bar() example_barplot ``` <img src="accessibility1_files/figure-html/unnamed-chunk-7-1.png" style="display: block; margin: auto;" /> The automated alternate text for this plot is on the next slide. --- class: middle ## Data Verbalization - Automated ```r BrailleR::VI(example_barplot) ``` ``` This is an untitled chart with no subtitle or caption. It has x-axis 'transmission' with labels automatic and manual. It has y-axis 'count' with labels 0, 5, 10 and 15. The chart is a bar chart with 2 vertical bars. Bar 1 is centered horizontally at automatic, and spans vertically from 0 to 19. Bar 2 is centered horizontally at manual, and spans vertically from 0 to 13. ``` -- Drawback of using `VI()` is that not every type of plot can be verbalized yet. --- class: middle ## Data Sonification Data sonification is the presentation of data as sound. -- [SAS Graphics Accelerator Examples](https://support.sas.com/software/products/graphics-accelerator/samples/index.html) [SAS Graphics Accelerator Chrome Extension](https://chrome.google.com/webstore/detail/sas-graphics-accelerator/ockmipfaiiahknplinepcaogdillgoko?hl=en) -- R example: ```r sonify::sonify(1:10) ``` --- ## Data Tactualization Data tactulization refers to making data visualization in a form so that it can be touchable by fingers. -- .center[ <iframe width="560" height="315" src="https://www.youtube.com/embed/ClI555l4Z1M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> [tactileR](https://github.com/jooyoungseo/tactileR) package in R ] --- class: middle - Much of what you have seen in this lecture can and should be extended to your life beyond data science. For instance, you can include alternate text in Power Point, Google Doc, Twitter and many other programs. -- - Whether you use R or some other tool, remember that tools change but our priority of accessibility should stay constant from tool to tool. -- - Always ask yourself if "visual" representation is the only way you can present data. The answer is often "no". --- class: middle ## Acknowledgment Special thanks to JooYoung Seo of University of Illinois at Urbana-Champaign who has helped me shape this lecture. -- This work has been supported by the [Teach Access](https://teachaccess.org/) network.