diff --git a/schedule-ugrad.md b/schedule-ugrad.md index 7d261387bb10996d385187971b01f0bd8ed4303d..e1defd50086fef6f4c0c7199207dc414c42415c4 100644 --- a/schedule-ugrad.md +++ b/schedule-ugrad.md @@ -136,10 +136,11 @@ Discussion of accessibility testing and born accessible systems. - Some overnight printing if ready - <i class="fa-solid fa-house-laptop" aria-hidden="true"/> [Project checkpoint](assignments/project-checkpoint.html) Assigned -## Thursday 11/7: Section in CSE 022 +## Thursday 11/7: Section: in CSE 022 - Finish making laser cuttable designs and print ## Friday 11/8: {% include slide.html title="Fabrication and Physical Computing" loc="3dprinting.html" %} +- Visit from Daniel Campos-Zamora - Final project groups must be finalized - <i class="fa-solid fa-house-laptop" aria-hidden="true"/> Readings and Preparation: - Read [How Android Accessibility Services Can Be Used to Hack Your Phone](https://www.makeuseof.com/tag/android-accessibility-services-can-used-hack-phone/); Lewis et al. @@ -149,15 +150,15 @@ Discussion of accessibility testing and born accessible systems. # Week 8 (11/10-11/16): Accessibility Across Technology {: .holiday} -## Monday 11/11: Veterans day (HOLIDAY) +## Monday 11/11: Veterans day (holiday) -## Wednesday 11/13: (Tentative) Security and Privacy +## Wednesday 11/13: Security and Privacy (Guests: Aaleyah Lewis & Tina Yeung) - <i class="fa-solid fa-house-laptop" aria-hidden="true"/> [Project Checkpoint 1](assignments/project-checkpoint.html) Slides Due -## Thursday 11/14: Section - Project Group Checkins (Full group attendance required, details TBD) +## Thursday 11/14: Section - Project Group Checkins (Full group attendance Required, details TBD) - You'll present your Checkpoint 1 slides to course staff *with your whole group* -## Friday 11/15: (Tentative) AR/VR Accessibility +## Friday 11/15: AR/VR Accessibility (Guest: Xia Su) - <i class="fa-solid fa-house-laptop" aria-hidden="true"/> Readings and Preparation: - Watch [Working at the Intersection of Race, Disability and Technology](https://www.youtube.com/embed/qRMYjdSTnZs?si=HGRM6XIEwSiWbtqI) - Listen to or watch **one of** the following first person accounts: @@ -175,9 +176,9 @@ Discussion of accessibility testing and born accessible systems. {: .week} # Week 9 (11/17-11/23): Intersectionality and Sustainability -## Monday 11/18: Intersectionality Roundtable (Guest TBD) +## Monday 11/18: Intersectionality Roundtable (Guests: Rahaf Alharbi; Aashaka Desai and Stacy Hsueh) -## Wednesday 11/20: Language Justice +## Wednesday 11/20: Deaf Technology (Guest: Richard Ladner) ## Thursday 11/21: Group Project Work Time diff --git a/slides/best-of-assets2024.html b/slides/best-of-assets2024.html index 1ea5356a5735d7a70d11dc7381450bc2fa61667b..215c4b6ef8a5317a6af621cb7cfb0879426d4ade 100644 --- a/slides/best-of-assets2024.html +++ b/slides/best-of-assets2024.html @@ -210,6 +210,7 @@ Good time to stand and stretch [Co-designing Robot Dogs with and for Neurodivergent Individuals: Opportunities and Challenges](https://dl.acm.org/doi/10.1145/3663548.3675603) ![:youtube Co-designing Robot Dogs with and for Neurodivergent Individuals: Opportunities and Challenges, X9h9KlZcg7w] + --- # Misfitting With AI diff --git a/slides/data-visualization.html b/slides/data-visualization.html index 1bc9df64eb7a71c61c9ab219e0a5efbabe8021a7..2b3e5cb3cbe98565971e72fbee133bc3aeacbfd7 100644 --- a/slides/data-visualization.html +++ b/slides/data-visualization.html @@ -1,15 +1,13 @@ --- layout: presentation -title: FOOBAR --Week N-- -description: Accessibility +title: Data Science and Visualization +description: Discussion of accessibility of data science and visualization class: middle, center, inverse --- background-image: url(img/people.png) .left-column50[ -# Welcome to the Future of Access Technologies - -Week N, FOOBAR +# Data Science and Visualization {{site.classnum}}, {{site.quarter}} ] @@ -35,5 +33,310 @@ class: - What are the commonly-used techniques to make data visualizations accessible? - What are some of the nuances in making data visualizations accessible? -crib more material from: -https://docs.google.com/presentation/d/1-3e-OUBWyrbC4nZYcvyOIecoKilULVPI +--- +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 + + + + +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[ +] + +-- +.right-column50[] + + +.footnote[source: Elavsky] +--- +# Perceivable (2/3) + +Perceivable visualizations make look slightly different from the original as in this visualization with improved contrast + + + + +.footnote[Source: Elavsky] + +--- +# Perceivable (3/3) +Or they may require a total redesign + + + +.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 mak visualizations perceivable + +- Tactile graphics (3D printing, swell paper, etc) [pass around] +- 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) + + + +--- +# 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 Areas for Access (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 Areas for Access (Assistive) + +**Assistive** (P+U), reduces labor required for access. + + + +--- +# Pause and discuss: + +Could compromising, flexible and assistive improve WCAG? + +Are they already in WCAG? + +Post on [Ed]({{site.discussion}}/5622410) + +--- +# This all gets much more complex with 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)] + +--- +# 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[ + + +] + +--- +# 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. +- ... +] + +--- +# Lots of other research + +- Automatic alt text generation +- Question and answer systems that let you explore the data associated with a chrat 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** + +--- +# QUICK BREAK + +Good time to stand and stretch + +--- +# 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 + +--- +# Can non programmers create visualizations? + +.left-column[ +## Maptimizer + +] + +.right-column[ +## 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-column[ +## PSST + +] + +.right-column[ +## 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-column[ + +] +.right-column[ +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 + +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 + + diff --git a/slides/img/visualization/bar-with-aria.png b/slides/img/visualization/bar-with-aria.png new file mode 100644 index 0000000000000000000000000000000000000000..b2c4a2d5d470c746e5bd86640bca774e11f031c6 Binary files /dev/null and b/slides/img/visualization/bar-with-aria.png differ diff --git a/slides/img/visualization/bottletest.png b/slides/img/visualization/bottletest.png new file mode 100644 index 0000000000000000000000000000000000000000..fd6b886815018d7ca3c142dc9aeaf89002d512f6 Binary files /dev/null and b/slides/img/visualization/bottletest.png differ diff --git a/slides/img/visualization/dashboardeg.png b/slides/img/visualization/dashboardeg.png new file mode 100644 index 0000000000000000000000000000000000000000..52147d2b9503d68cd40ceb96ed91994857c3dc73 Binary files /dev/null and b/slides/img/visualization/dashboardeg.png differ diff --git a/slides/img/visualization/dashboards.png b/slides/img/visualization/dashboards.png new file mode 100644 index 0000000000000000000000000000000000000000..f6d43fe55b11d5ae90a7ea618be259e7525901e5 Binary files /dev/null and b/slides/img/visualization/dashboards.png differ diff --git a/slides/img/visualization/improved-contrast.png b/slides/img/visualization/improved-contrast.png new file mode 100644 index 0000000000000000000000000000000000000000..824efcaffa88325879328e84325d6b362fa8ebae Binary files /dev/null and b/slides/img/visualization/improved-contrast.png differ diff --git a/slides/img/visualization/maptimizer.jpg b/slides/img/visualization/maptimizer.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6e6175721eca294c89dfe33509cf5133263660a6 Binary files /dev/null and b/slides/img/visualization/maptimizer.jpg differ diff --git a/slides/img/visualization/multiples.png b/slides/img/visualization/multiples.png new file mode 100644 index 0000000000000000000000000000000000000000..3bb06c169ed4f07e654e5d7db07ed0eb9bd6e7d5 Binary files /dev/null and b/slides/img/visualization/multiples.png differ diff --git a/slides/img/visualization/perceivable-bad.png b/slides/img/visualization/perceivable-bad.png new file mode 100644 index 0000000000000000000000000000000000000000..e00f29826e1790e663eab7efd78af746f93dcac1 Binary files /dev/null and b/slides/img/visualization/perceivable-bad.png differ diff --git a/slides/img/visualization/perceivable-good.png b/slides/img/visualization/perceivable-good.png new file mode 100644 index 0000000000000000000000000000000000000000..0a409842b2a472a62f2422c8c8b0caa8419e9ab6 Binary files /dev/null and b/slides/img/visualization/perceivable-good.png differ diff --git a/slides/img/visualization/perceivable.png b/slides/img/visualization/perceivable.png new file mode 100644 index 0000000000000000000000000000000000000000..c404d5b90d42981b0d7eae763c1d9fc3b40c6cf2 Binary files /dev/null and b/slides/img/visualization/perceivable.png differ diff --git a/slides/img/visualization/psst-musicbox.png b/slides/img/visualization/psst-musicbox.png new file mode 100644 index 0000000000000000000000000000000000000000..559ba8d833004df7a1c3fc6ce863c2dadc2ad7d7 Binary files /dev/null and b/slides/img/visualization/psst-musicbox.png differ diff --git a/slides/img/visualization/three-examples.png b/slides/img/visualization/three-examples.png new file mode 100644 index 0000000000000000000000000000000000000000..523ff8f72994583fdf81aa2cabaad6108f1ddcd7 Binary files /dev/null and b/slides/img/visualization/three-examples.png differ