How do we properly author alt text for notebook screen shots?

[tonyfast]

moving a twitter thread to an issue https://twitter.com/ChelseaParlett/status/1489695566582136833

---

@cmparlettpelleriti

for example this screenshot is something i posted to my course slack (to answer a question). Normally with code, I just copy the code into the alt-text.

But with a notebook that also shows output, I wasn't sure what the best way to put that into the alt text.

---

@choldgraf

do you (jupyter/accessibility) have any ideas how we can describe the structure of a notebook + it's outputs with an alt text?

---

context probably matters a lot

i don't know the specifics of alt text well, that is @isabela-pf domain. my best guess is the context the screenshot is being applied to probably matters a lot. is it about the dataframe or the notebook? the is probably going to require two different alt text approaches to describe.

it would be nice to have a recommendation for default alt text, and maybe the myst format could be a representation in a similar way that @cmparlettpelleriti is putting code in the alt-text.

prior examples

while we don't have explicit best practices, @isabela-pf has a draft of alt text suggestions in jupyter land, and there are some recommendations for content showing screenshots. https://github.com/Quansight-Labs/jupyter-accessibility-workshops/blob/main/docs/alt-text-guide.md#content.

we also have some aggregated examples for our alt-text sprints. some examples are listed below for retrolab and jupyterlab where we have written alt text for notebooks. more eyeballs and input on some of these applications would be helpful in us normalizing our alt text practices.

• https://github.com/jupyter/jupyter/pull/607/files
• https://github.com/jupyterlab/retrolab/pull/310/files

cc @ajuavinett @isabela-pf @trallard

[choldgraf]

Maybe @bollwyvl has thoughts as well? I feel like semantic descriptions for accessibility purposes is kinda like semantic tags more generally, which i know Nick is interested in 🙂

[isabela-pf]

Hey, I'm super later but I have seen this issue and need to get you some good suggestions. Thanks for your patience! Also big thanks to @tonyfast for moving this to an issue and getting links to all those references.

This issue made me realize Slack does have alt text support (even if it's more hidden than I prefer); I've pretty much been relying on describing it in the message. Thanks for teaching me!

My very short answer from skimming the image is

1. (what @tonyfast said is correct.) Context will be the key to deciding what information is needed for this image to support the reason it was being posted. You can ask yourself something like "how would I ask this question if sending the image was not an option?" and that usually tells you the key information needed for baseline image describing.
2. Find a way to provide the content in full in a more accessible way. This could be linking to the document itself, linking or commenting in thread with a longer image description describing all the data, providing the data as its own linked file. Most of the time this solution involves linking to something in addition to the summary in the alt text field itself.

It also looks like @cmparlettpelleriti commented something about being unsure how to describe because notebooks may not only be the input code, but also have output. So far, my best recommendation there would be to just describe input versus output. Something like Notebook cells about *summarize the topic or main context needed*. Input: *your code here*. Output *copy or describe the output*. seems like it could fit. Depending how much content needs to go here, this may not fit as alt text but as a longer image description in a thread or linked somehow.

In the future I'd like to have a guide/frequently asked questions about this kind of thing, so that could also be linked here. I think this could be what closes this issue.

Let me know if you have any other questions!

[trallard]

I feel this issue can be better tackled as a discussion so moving there 💬