diff --git a/schedule.md b/schedule.md index c1e04879cac6ec1fc25a56023bc20a64d00fefc9..0704f57b7f851fe51b2107171a1e2fd15b0ecc2b 100644 --- a/schedule.md +++ b/schedule.md @@ -323,7 +323,7 @@ Discussion of Disability Dongle Paper {: .activity} 7:00-7:40 Skill Goal: Various Techniques to Make Visualizations Accessible : **In class Exercise** -- Implement a visualization using [VoxLens](https://github.com/athersharif/voxlens) following the documentation and examples on the GitHub repository. +<!-- - Implement a visualization using [VoxLens](https://github.com/athersharif/voxlens) following the documentation and examples on the GitHub repository. --> - Use VoxLens from to test different modes of making visualizations accessible (Summary, Sonification, Question-and-Answer) on different visualization types. - Identify the utility of each mode with each visualization type–when is one mode more suitable than the other and why. - Identify accessibility measures for demographics other than screen-reader users. diff --git a/slides/accessible-data-viz.html b/slides/accessible-data-viz.html index 16daa4d4ee6178f7cee6c99f7381838a217808fe..582839a0e5c073bbeefb47196eb43c87264dd0d0 100644 --- a/slides/accessible-data-viz.html +++ b/slides/accessible-data-viz.html @@ -21,21 +21,31 @@ class: ## This is an important reminder ## Make sure zoom is running and recording!!! +## Make sure captioning is turned on + + +--- +# COVID-19 Visualizations + + --- [//]: # (Outline Slide) -# Learning Goals for Today -- What are the commonly-used techniques to make data visualizations accessible? +# Some questions to consider about information access + +Who can access visualizations that other people have created? -- What are the pros and cons of these techniques? +Who can create accessible information? -- What are some of the nuances in making data visualizations accessible? +How do we support the full data science lifecycle? --- -# COVID-19 Visualizations +# Who can Access Visualizations? + +Due to the inaccessibility of online data visualizations, screen-reader users answered questions **62%** less accurately and spent **211%** more time than non-screen-reader users *(Sharif, 2021)*. - + --- # How Can We Make These Visualization Accessible? @@ -47,13 +57,13 @@ class: --- # Commonly-Used Techniques -- Summary ("Alt-Text") +Summary ("Alt-Text") -- Sonification (Audio Graphs) +Sonification (Audio Graphs) -- Tables +Tables -- Braille Prinouts/3-D Printing +Braille Prinouts/3-D Printing --- # Summary ("Alt-Text") @@ -67,15 +77,19 @@ Alt-text is an HTML attribute that can provide a summary of the visualization an --- # Sonification (Audio Graphs) - Sonification (or audio graphs) enable listeners to interpret data trends by mapping data to a musical scale. -[Example](https://www.youtube.com/watch?v=gssjuSnMR60) + +.left-column40[ **Benefits** - Can help users to understand overall trends - Already integrated into commerical products (e.g., Apple) +] +.right-column60[ +![:youtube Video of a graph being sonified, gssjuSnMR60] +] --- # Tables @@ -98,34 +112,35 @@ Tactile graphics and 3-D printed graphs are raised surfaces that enable blind an - Enables users to interact with the visualization without using a screen reader --- -# Equality vs. Equity - -- What does **equal** access mean? - -- What does **equitable** access mean? - -- Are these techniques equitable? +# Holistic vs. Drilled-Down Exploration ---- -# State of The World +Screen-reader users perform a holistic exploration first and then drill-down into the data *(Sharif, 2021)*. -Due to the inaccessibility of online data visualizations, screen-reader users answered questions **62%** less accurately and spent **211%** more time than non-screen-reader users *(Sharif, 2021)*. +.left-column50[ +- Summary ("Alt-Text") +- Sonification (Audio Graphs) +- Tables +- Braille Prinouts/3-D Printing +] +.right-column50[ - +- Which of these techniques enable **holistic** exploration? +- Which of these techniques enable **drilled-down** exploration? +] --- -# Holistic vs. Drilled-Down Exploration +# Supporting Interaction -Screen-reader users perform a holistic exploration first and then drill-down into the data *(Sharif, 2021)*. - -- Which of these techniques enable **holistic** exploration? +Highly relevant even when just *using* a visulazation +- When interacting with static visualizations, sighted people intuitively construct complex visual queries [Ware, 2019]. +- Interactive charts afford selection, filtering & more [Yi, IEEE TOVCG, ’07] -- Which of these techniques enable **drilled-down** exploration? +Supporting this requires going past verbal descriptions and tactile graphics --- -# VoxLens +# [VoxLens](https://github.com/athersharif/voxlens). -VoxLens is an open-source JavaScript plug-in that improves the accessibility of online data visualizations for screen-reader users using a multi-modal approach, requiring only a single line of code for integration into online data visualizations. +[VoxLens](https://github.com/athersharif/voxlens) is an open-source JavaScript plug-in that improves the accessibility of online data visualizations for screen-reader users using a multi-modal approach, requiring only a single line of code for integration into online data visualizations. VoxLens offers three modes: @@ -135,6 +150,11 @@ VoxLens offers three modes: .center[https://github.com/athersharif/voxlens] +--- +# VoxLens + + + --- # Evaluation of VoxLens @@ -143,27 +163,149 @@ VoxLens improved the accuracy of screen-reader users by **122%** and interaction  --- -# Class Activity +[//]: # (Outline Slide) -**Activitiy** -- Break into small groups. -- Implement a visualization using [VoxLens](https://github.com/athersharif/voxlens). -- Use VoxLens from to test different modes of making visualizations accessible (Summary, Sonification, Question-and-Answer). +# Some questions to consider about information access -**Goals** -- Identify the utility of each mode with each visualization type–when is one mode more suitable than the other and why. -- Identify accessibility measures for users other than screen-reader users. -- Create a presentation (2-3 slides) to share findings +Who can access visualizations that other people have created? -.center[https://github.com/athersharif/voxlens] +**Who can create accessible information?** + +How do we support the full data science lifecycle? + +--- +# *Who* Can Creating Accessible Visualizations + +Can BLV people create new information +- Are they included in the employment opportunities and learnings associated with data science? +- Can they access information when someone didn’t already decide it needs to be accessible + - Maps and other individualized needs + - Live data exploration + +--- +# Non Programmers + +.left-column40[ +## Maptimizer + + +(Hofmann, CHI 2022) +] + +.right-column60[ +## Generative Design +*Generative design* is a common approach to support end users (used a lot for fabrication) + +Lets each user specify their information priorities and preferred representations in familiar terms through a simple GUI + +] + +--- +# What About Direct Authoring? + +We should also support more advanced creation +- In Kim et al.’s survey of 56 accessible visualization papers published between 1999 and 2020 only two papers supported interactive authoring of charts by BVI users [Kim, CGF ‘21] + +Equivalent experiences is an important access goal +- Same information conveyed +- Same *interactive experience* + +--- +# PSST + +Based on RxJS: everything is a stream + +.left-column40[ +<div class="mermaid"> + +graph TD + LS[Sensor] --> DS[DataSink] + OE[OutputEngine] --> DS + DS -->|Sensor values| NH[Handler] + NH -->|converts sensor values to appropriate format| O[Output] + +</div> +] + +--- +# PSST Example + +Sonifying a light sensor +.left-column40[ +<div class="mermaid"> + +graph TD + LS[Light Sensor] --> DS[DataSink] + OE[OutputEngine] --> DS + DS -->|Light sensor values| NH[NoteHandler] + NH -->|converted light sensor values to audible range| O[NoteOutput] + +</div> +] +.right-column60[ +![:youtube A sound can be heard with the pitch rising and lowering as a light moves closer and further from the circuit board, aSe-QkSl12c] +] + +<!-- --- --> +<!-- # PSST --> + +<!-- PSST allows BVI developers to make their own data visualizations --> + +<!-- <div class="mermaid"> --> +<!-- sequenceDiagram --> +<!-- Lightsensor->>+DataSink: New Value as Datum --> +<!-- OutputEngine->>+DataSink: Status is "Playing" --> +<!-- DataSink-\->>+NoteHandler: Status, Datum --> +<!-- NoteHandler->>+NoteOutput: Status, Datum adjusted using Mel Scale --> +<!-- NoteOutput->>+User: Plays note if status is "Playing" --> +<!-- </div> --> + +--- +# Code or GUI Configuration + +.column[ +GUI automatically created from spec + +User can select, parameterize and attach outputs to streaming data +] +.column[ +![:youtube A user configuring a sonification using the accessible PSST GUI while a screenreader plays a description, xl70zqfW2H0] + +] + +-- +.column[ +.quote[I’ve seen these sonifications for decades . . . but I’ve never seen anything nice in a dashboard like this that lets you add and remove multiple ones and tweak the parameters of each.] +] --- [//]: # (Outline Slide) -# Learning Goals for Today -- What are the commonly-used techniques to make data visualizations accessible? +# Some questions to consider about information access + +Who can access visualizations that other people have created? + +Who can create accessible information? + +**How do we support the full data science lifecycle?** +- Data collection +- Data cleaning +- Modeling and Analysis +- Representation -- What are the pros and cons of these techniques? +--- +# Data Science Accessibility + +Very much still a wide open area, at least for BLV people + +- Data collection -- not particularly supported (even coding tools very inaccessible) +- Data cleaning -- not studied to my knowledge +- Modeling and Analysis -- Common tools like Jupyter Notebooks wholly inaccessible. Venkatesh (first author of PSST) is starting to work on this +- Representation -- Accessible visualization & Data physicalization are the big opportunities + +--- +# One last PSST Video +... and then on to our guest! -- What are some of the nuances in making data visualizations accessible? +![:youtube A user turns a handle on a music box. A laser cut strip containing data moves through producing notes, EKaaP0TKQog] diff --git a/slides/img/data-equity/maptimizer.jpg b/slides/img/data-equity/maptimizer.jpg new file mode 100644 index 0000000000000000000000000000000000000000..057f01a057430610db3f2b5ddabcc4e4791527bd Binary files /dev/null and b/slides/img/data-equity/maptimizer.jpg differ diff --git a/slides/img/data-equity/physicalization.png b/slides/img/data-equity/physicalization.png new file mode 100644 index 0000000000000000000000000000000000000000..71fe37d1343d9537bdd55b3dda43f0c27f54609b Binary files /dev/null and b/slides/img/data-equity/physicalization.png differ diff --git a/slides/img/data-equity/voxlens-interactive.png b/slides/img/data-equity/voxlens-interactive.png new file mode 100644 index 0000000000000000000000000000000000000000..1b407f13edb3dc08c733a64ee3f629938ff22cbb Binary files /dev/null and b/slides/img/data-equity/voxlens-interactive.png differ