Data Visualization

# Data Visualization
Discussion of Visualization and Accessibility

CSE443: Winter 2026; Jennifer Mankoff (Last Edited: 2026-02-02). <a href="/courses/cse443/26wi/slides/visualization.html">Live View: /slides/visualization.html</a>

Important Reminder: check zoom & captioning

---

<div class="slide-outline" style="margin: 1em 0; padding: 1em; background: #f5f5f5; border-radius: 5px;">
<h2 style="margin-top: 0;">
  
  
    Outline
  
  
</h2>
    
  <ul style="list-style-type: none; padding-left: 0;">
  
  
  
  
  
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#11">Best Practices for making data visualizations accessible</a> (Slide 11)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#29">Dashboards: Interactive, Complex</a> (Slide 29)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#37">Inclusion in Visualization</a> (Slide 37)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#45">Accessibility Implementation Assignment</a> (Slide 45)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
  </ul>
</div>

---
class: center, middle, inverse
# Announcements

<p>Announcements for week 5</p>

---
## Implementation Assignment
<ul>
  <li>The assignment was updated with a reflection. Since you hadn’t started it I didn’t mark them, but the Last revised date is: 2/2/2026.</li>
  <li>We’ll talk about details later today</li>
</ul>

---
## Due Today
<ul>
  <li>Your website report</li>
  <li><a href="https://edstem.org/us/courses/90089/discussion/7588056">Reading Questions</a></li>
</ul>

---
## Grading Calculation Spreadsheet

<ul>
  <li>You can <a href="https://docs.google.com/spreadsheets/d/12D9RZklRJsR7vz3FG21KR2qKY_XMQiukt1DQEwotBBA/copy">calculate your own grade</a> and send us a note in <a href="">Ed</a> if you have any questions.</li>
  <li>We’ll provide an update on engagement points after the team meeting today</li>
</ul>

---
## Writing credit
<p>Reminder: Writing credit</p>
<ul>
  <li>this course optionally allows writing credit</li>
  <li>you need to tell me you want it</li>
  <li>you need to be willing to revise this report based on feedback before I send it to the sponsor to get it</li>
</ul>

---
## Ideas for Engagement credit (more after today’s staff meeting)
<p>Made a new “engagement” channel in Ed with posts you can respond to</p>
<ul>
  <li>Listen to <a href="https://edstem.org/us/courses/90089/discussion/757998">something with audio description and reflect</a></li>
  <li>Work on audio description on <a href="https://youdescribe.org/">YouDescribe</a></li>
  <li>Post a <a href="https://edstem.org/us/courses/90089/discussion/7600589">reflection on your AT around us or another presentation</a></li>
</ul>

---
## Other Engagement things we track
<ul>
  <li>Respond to reading questions</li>
  <li>Respond to class participation threads</li>
  <li>Participate in person in class</li>
  <li>… more ideas to come</li>
</ul>

---
## DEQUEUE courses of interest?
<ul>
  <li><a href="https://dequeuniversity.com/class/fast-track-for-designers/toc">Fast Track to Accessibility for Designers</a></li>
  <li><a href="https://dequeuniversity.com/class/fast-track-for-web-developers-core-concepts/toc">Fast Track to Accessibility for Web Developers, Part 1: Core Techniques</a></li>
  <li><a href="https://dequeuniversity.com/class/fast-track-for-web-developers-advanced/toc">Fast Track to Accessibility for Web Developers, Part 2: Advanced Techniques</a> – this is the ARIA one</li>
  <li><a href="https://dequeuniversity.com/class/fast-track-for-microsoft-office/toc">Fast Track to Accessibility for Microsoft Office</a></li>
  <li><a href="https://dequeuniversity.com/class/fast-track-for-google-workspace/toc">Fast Track to Accessibility for Google Workspace</a></li>
  <li><a href="https://dequeuniversity.com/class/fast-track-for-qa-testers-2.0/toc">Fast Track to Accessibility for QA Testers 2.0</a></li>
</ul>

<p>A reminder that if anyone is willing to email help@uw.edu about this with details and cc me that would be great!</p>

---
class: center, middle, inverse
# Best Practices for making data visualizations accessible

---
background-image: url(img/visualization/dashboards.png)

## What is a visualization?

???
Alt text for this slide: seven different complex dashboards that are too tiny for a sighted person to understand show a variety of visualizations from barcharts to maps

---
## Why are they useful

![:img Three visualizations. From left to right: An election map of the united states with red and blue states indicating political affiliation during the 2020 election labeled "Politics: CNN"; A line chart from early in the COVID epidemic comparing numbers of cases in different countries labeled "Health: Financial Times"; and a map of the Ukraine titled "Areas of Russian military control in Ukraine" labeled "Conflicts: BBC",80%, width](img/visualization/three-examples.png)

Visualizations inform the public and guide decision-making, policy, and business.

.footnote[Source: Elavsky Chartability Talk]

---
## Some questions to consider about information access

Who can access visualizations that other people have created?

Who can create accessible information?

How do we prioritize efforts to make data accessible?

How do we support the full data science lifecycle?

.footnote[Source: Potluri]

---
## 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).

Elavsky [Chartability](https://onlinelibrary.wiley.com/doi/10.1111/cgf.14522): 250 visualizations; mean 320 errors per visualization; 0 visualizations error-free

---
## What is WCAG's equivalent for visualizations?

- POUR still applies
- Elavsky expanded them for [Chartability](https://www.frank.computer/chartability/) to also include 
  - "Compromising" 
  - "Assistive"
  - "Flexible"
- Quick tour and then some research work

---
## Perceivable (1/3)
Use high contrast, redundant encodings

.left-column50[![:img Two closeups of a line chart showing a blue and green line on the left labeled "what people with normal vision see"; and the same chart showing two blue lines on the right labeled "what green-blind people see",80%, width](img/visualization/perceivable-bad.png)
]

--
.right-column50[![:img The full version of the chart this time with a redundant encoding of a dotted green line  and solid blue line,80%,width](img/visualization/perceivable-good.png)]

.footnote[source: Elavsky]
---
## Perceivable (2/3)

Perceivable visualizations may look slightly different from the original as in this visualization with improved contrast

![:img Two visualizations that different only in the use of higher contrast colors. Both show an election map of the united states with red and blue states indicating political affiliation during the 2020 election,80%, width](img/visualization/improved-contrast.png)

.footnote[Source: Elavsky]

---
## Perceivable (3/3)
Or they may require a total redesign

![:img Two linecharts that differ in the use of color; and the choice to use small multiples to represent the different lines instead of overlapping them,80%,width](img/visualization/multiples.png)

.footnote[Source: Elavsky]

---
## Basic ALT text

[Good summary](https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81)

- alt=".red[Chart type] of **type of data** where *reason for including chart*" 
- also include a link to a data table

Screen-reader users perform a holistic exploration first and then drill-down into the data (Sharif, 2021).

---
## Aside: Lots of other ways to make visualizations perceivable

.left-column[
![:youtube Video of a graph being sonified, gssjuSnMR60]
]

.right-column[
- Tactile graphics (3D printing, swell paper, etc)
- Sonification 
- Providing a data table 
]
---
## Operable (1/2)

Visualizations are often made of of many datapoints, and moving around them can require tabbing through them all! Also  visualizations might be interactive (e.g. to filter data)

![:img Two bar charts showing building and product information. In the first a bar labeled "Building A; Product category 2; Count 15" is highlighted and the VoiceOver window showing "Building A. Product Category 2. Count 15. Bar 2 of 3. Toggle button" is visible. In the second the bar has been selected and the VoiceOver window states that,  40%,width](img/visualization/bar-with-aria.png)

---
## Operable (2/2)

- Order and hierarchy need to be correct
- Functionality should also be described. Use ARIA tags
- Use redundant cues (e.g. Aria roles and visual state)
- Make sure things aren't too small

---
## Understandable; Robust

- Descriptive, clear titles, axes labels, etc.
- Good ALT text
- Data table available
- Simple language
- Work with screen readers
- ...

---
## New: Compromising and Flexible

**Compromising** (U+R), lets people choose how to consume information

About agency and control!
- Example: Providing a data table is compromising (good)
- Example: A user filters and then cannot share that state or return to it easily (bad)

**Flexible** (P+O+R), respects user settings such as style changes

---
## New: Assistive

**Assistive** (P+U), reduces labor required for access.

![:img Two scatterplots showing a weighted prediction score. In the first a single point has been selected and the screen reader says "Product 3. Cost $88. Weighted prediction 37". In the second a cluster has been selected and a hover box shows "Pacific northwest market patterns have produced a cluster...". In addition the screen reader says the same thing, 80%,width](img/visualization/perceivable.png)

---
## Pause and discuss:

Could compromising, flexible and assistive improve WCAG?

Are they already in WCAG?

Post on [Ed](https://edstem.org/us/courses/90089/discussion//5622410)

---
class: center, middle, inverse
# Dashboards: Interactive, Complex

---
## Co-design of Accessible Dashboards

Approximately **4 months of iterative co-design** w/ co-authors Tim & Darrell (both legally blind)

30-60min **Zoom sessions every 1-2 weeks**
- Started with formative questions about prior experience and challenges with visualizations and dashboards
- Iteratively prototyped and tested an alternative user experience

.footnote[[Srinivasan & Mankoff 2023](https://dl.acm.org/doi/10.1145/3597638.3608405)]

---
## Background: Supporting Interaction

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]
Supporting this requires going past verbal descriptions and tactile graphics

---
## Guidelines (1/2)

1.  Use a consistent structure and create content hierarchies to aid navigation
  - Dashboards can be very complex
  - ALT text has many parts (overview, layout, what is interactive, updates during filtering, etc)
2. Descriptions should summarize the dashboard’s structure and interactivity, and highlight key data facts.
3.  Description’s structure should be optimized for screen readers.

---
## Example layout summary:

.left-column50[
.quote[There is a filter region with 1 form control at the top followed by a dashboard canvas structured as a grid with 3 rows. A summary of the grid's content is as follows: ...]
]
--
.right-column50[
![:img American community survey results dashboard with the three regions described in the quote., 80%,width](img/visualization/dashboardeg.png)

]

---
## Guidelines (2/2)
Interactive visualizations require special accessibility considerations

1. Present explicit filtering widgets for interactive charts and place all filters in a separate region.
2. Summarize key changes after data updates.
3. Change descriptions should support different modes of analytic inquiry.

---
## Example Change Description

.quote[8 blocks updated. Key changes for the current selection of College Type:
Public compared to the previous selection of College Type: Private
include:

- Average Tuition Cost reduced by 21105 from 29548 to 8443.
- Average Price for out-of-state students reduced by 10366 from 43155
to 32789.
- ...
]

---
class: center, middle, inverse
# Inclusion in Visualization

---
## Lots of other research

- Automatic alt text generation
- Question and answer systems that let you explore the data associated with a chart as well as chart contents
- Taxonomies of alt text and preferences for level of detail
- Better access to specific types of visualization
- Sonification tools
...

**Almost all of it focuses on nonvisual access**

**Almost all of it positions disabled people as consumers**

---
## What about BLV authors?

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

---
## What about non programmers?

.left-column40[
### Maptimizer
![:img A 3d printed tactile map of the UW campus showing the fountain and the grassy area around it, 100%,width](img/visualization/maptimizer.jpg)
]

.right-column60[
### Generative Design

It 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?

.left-column40[
### PSST 
![:img A hand holding a sensor at the edge of a steel bottle, 100%,width](img/visualization/bottletest.png)
]

.right-column60[
### Overview
Implemented in  rxjs: Treats all data as a stream

Programmatic and accessible GUI based interaction supported

Lets people explore all sorts of data
]

---
## Multimodal output

.left-column40[
![:img A music box with a hand turning the crank and paper being rolled through,100%,width](img/visualization/psst-musicbox.png)
]
.right-column60[
Speech output
 - e.g. for new maxima
 
Sonification
 - e.g. pitch -> height

Laser cut output
 - Totally different model...
]

---
## What about diagrams?

Working right now on node link diagrams ([access-flows.com](https://www.access-flows.com/))

DOJ rule requires lots of them to be remediated
- We are using GAI to extract the data
- Building an authoring interface for verification
- Providing multimodal options for output

---
## Inclusion throughout data science

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

Representation - Accessible visualization & data physicalization are the big opportunities

---
class: center, middle, inverse
# Accessibility Implementation Assignment

---
## This week's assignment
The goal of this homework is to make something more accessible (e.g. website, visualization, user interface, AR/VR, etc) that you’ve already made.

???
If you don't have an interface, come speak with us!

---
## Assignment steps
1. Select a specific interface or web app that you will make more accessible
2. Find accessibility problems with your website or app
3. Reflect on this website or app
4. Fix at least two problems