# Alt-Text Workshop: SPEC Blog - Agenda
Event time: May 13 2022, 13:00-14:00 UTC
* [Link to Zoom meeting](https://berkeley.zoom.us/j/99963104678?pwd=Y29WWmh3SVBMcS9VRzREQkpKcFY1QT09)
* [Click here to see this event time in your local timezone](https://arewemeetingyet.com/UTC/2022-05-13/13:00/Alt-Text%20Workshop:%20SPEC%20diagrams#eyJ1cmwiOiJtZWV0Lmdvb2dsZS5jb20vdmp0LXRkYWctd2ltIn0=)
* [Add to your Google Calendar](https://calendar.google.com/event?action=TEMPLATE&tmeid=MHVla29qZm5scXEzaXBtNzEwOXI4czlyMTEgbWxlZUBxdWFuc2lnaHQuY29t&tmsrc=mlee%40quansight.com)

## Intro
Welcome! Thank you for taking the time to learn how to make open source more accessible via image descriptions.

We are all learning, so please don't hesitate to ask questions.

Today we'll add alt-text to the diagrams to the [SPEC blog](https://blog.scientific-python.org/)!

The SPEC (Scientific Python Ecosystem Collaboration) brings together different Python communities to share solutions for areas of shared concern. That way we don't need to re-invent the wheel!

## Agenda
- 0-5: Welcome, chit-chat, wait for people to arrive
- 5-20: Learn how to write alt text and contribute
- 20–50: Work time and discussion
- 50–60: Review alt text and closing
- 60+: Optional. For further questions

## How to participate

1. Go to [our working PR](https://github.com/MarsBarLee/blog.scientific-python.org/pull/1)
2. Review the list of images.
3. Comment on image you will write alt text for. Commenting lets people see what you're working on and prevent overlap.
4. Write alt text as a Github Suggestion.
5. Submit that alt text!

* If you are unfamiliar with Github, [here's a step-by-step version with images](https://hackmd.io/@marslee/BksnYfWVK).
* If you have time, you can give feedback on each others' alt text.
* If there is an image you want to add alt text to that is not yet in the PR, tell Mars and she can add it.

## Alt text checklist

These are a few of the main things we need to make sure are met for formatting consistent alt text.

The alt text has
- [ ] Correct spelling and no typos
- [ ] Periods and commas where relevant
- [ ] No more than three short, complete sentences, if possible
- [ ] A logical way of fitting in the rest of the documentation
- [ ] Consistent text and/or descriptions for the same elements in different images
- [ ] A description of any text in the image

## Resources
- [Mars' Slides](https://docs.google.com/presentation/d/10Chgqsz9QB3hg6wv6iAiHiXmZhu1icNwg0PqMDOCihk/edit?usp=sharing)
- [Isbela's Slides](https://docs.google.com/presentation/d/10Chgqsz9QB3hg6wv6iAiHiXmZhu1icNwg0PqMDOCihk/edit?usp=sharing)
- [W3's Alt decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) (What kind of alt text does this image need?)
- [WebAim's overview of alt text](https://webaim.org/techniques/alttext/) (What is alt text and what does it need to do?)
- [Diagram Center's standards for alt text for graphs and charts](http://diagramcenter.org/table-of-contents-2.html#toc) (How do I describe images with a lot of data?)

## Questions

We'll try and answer questions during the event, but often people have questions that will require a little research or we just plain run out of time. Feel free to leave questions so we can get back to them post-event.

Questions from Zoom and Zoom chat
- To be added to SPEC guidelines

- More complexity
- tooling alt-text -> HTML
matplotlib stored in Jupyternotebook, converted to Sphinx sourcecode, to HTML
Coordination across several different projects, are there any existing efforts
QD, take screenshots of aplpication, include alt-text argument in screenshot, rendered in notebook already with screenshot
if add static image eof jupyter, use Markdown
MystNB or JuptyText
Generated images: harder, workaround is to do captions

K, this was the PR that made the fix in napari: https://github.com/napari/napari/pull/3825

It would be great if Matplotlib could output some alt text (auto generated)

Writing for Flowcharts
http://diagramcenter.org/specific-guidelines-d.html#44

Example of other flowcharts
https://github.com/Quansight-Labs/jupyter-accessibility-workshops/issues/9#issuecomment-1019327457

https://github.com/Quansight-Labs/jupyter-accessibility-workshops/issues/9#issuecomment-1019327457
Languages

Do you have any suggestions for this one? https://github.com/MarsBarLee/blog.scientific-python.org/blob/5308fbe002aa97306ffb72c29fdc1955df6ec886/content/posts/matplotlib/matplotlib-in-data-driven-seo/fig4.jpg
“”A collection of visualizations displaying search engine optimization statistics”
1) a pie chart showing last minute is most popular 2) a bar chart...
Header image
Full blog post for context: https://github.com/MarsBarLee/blog.scientific-python.org/blob/5308fbe002aa97306ffb72c29fdc1955df6ec886/content/posts/matplotlib/matplotlib-in-data-driven-seo/index.md

- add missing alt, image to N's example

- postdoc, very similar to previous image
- what's the difference then? how to emphasize difference? https://github.com/MarsBarLee/blog.scientific-python.org/pull/1/files/5308fbe002aa97306ffb72c29fdc1955df6ec886#r872425311
- doing takeaway earlier in graph: https://github.com/Quansight-Labs/quansight-labs-site/pull/217#discussion_r684305158
- like a teacher explain 6 graphs to class, explain first most in depth, less for later graphs, can assume class heard earlier
- linear media
- Another blog post where there's subtle differences, comparison, building up to a final graph: https://github.com/MarsBarLee/blog.scientific-python.org/blob/5308fbe002aa97306ffb72c29fdc1955df6ec886/content/posts/matplotlib/create-ridgeplots-in-matplotlib/index.md
- repeating working group?
- what i could add to the documentation (slack, this conversation)