Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add 'olli' renderer to generate accessible text structures for screen reader users #3580

Merged
merged 5 commits into from
Sep 9, 2024

Conversation

binste
Copy link
Contributor

@binste binste commented Sep 6, 2024

Olli is an open-source library for converting data visualizations into accessible text structures for screen reader users. Starting with an existing visualization specification created with a supported toolkit, Olli produces a keyboard-navigable tree view with descriptions at varying levels of detail. Users can explore these structures both to get an initial overview, and to dive into the data in more detail.

Closes #3575. A possible use case of this is that in a university course where Altair is used in a Jupyter notebook, with a single line of code, alt.renderer.enable("olli"), all charts in a notebook can be made accessible for screen reader users.

I've tested this in JupyterLab and VS Code. In JupyterLab, all Olli controls worked, in VS Code, the following do not:

  • T: Open table
  • O: Jump to Olli tree
  • F: Data filters

This might be an issue with how VS Code intercepts those key strokes. Might be configurable in VS Code but for now, I'm happy if it works in JupyterLab.

@binste binste changed the title feature: Add 'olli' renderer to generate accessible text structures for screen reader users feat: Add 'olli' renderer to generate accessible text structures for screen reader users Sep 6, 2024
@binste binste marked this pull request as ready for review September 6, 2024 20:16
@binste
Copy link
Contributor Author

binste commented Sep 6, 2024

@jonathanzong Would you mind reviewing the JavaScript code? It's in an ugly Jinja template without syntax highlighting but maybe you notice something when skimming through it. It works in JupyterLab and VS Code so it can't be super wrong.

image

I tested it with Mac VoiceOver and that worked fine but I have no experience with this. Example code you can use:

import altair as alt
import pandas as pd

alt.renderers.enable("olli")

source = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})

alt.Chart(source).mark_bar().encode(
    x='a',
    y='b'
)

@jonathanzong
Copy link
Member

looks good to me!

Copy link
Member

@dangotbanned dangotbanned left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like a really interesting feature

Just had one question, since your js got the okay in #3580 (comment)

altair/utils/html.py Outdated Show resolved Hide resolved
altair/utils/html.py Outdated Show resolved Hide resolved
Copy link
Member

@dangotbanned dangotbanned left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Co-authored-by: Dan Redding <125183946+dangotbanned@users.noreply.github.com>
@binste
Copy link
Contributor Author

binste commented Sep 9, 2024

Thank you both for the reviews!

@binste binste enabled auto-merge (squash) September 9, 2024 21:04
@binste binste merged commit 872c83c into vega:main Sep 9, 2024
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

improve accessibility for screen reader users
3 participants