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

Add alt text/image description event templates #5

Merged
merged 6 commits into from
Apr 14, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions workshop-resources/alt-text/agenda-template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
# Template for alt text/image description event agendas

> *Event agendas are the core resource for an event. This document consolidates all links and knowledge needed in order to participate in the event and helps participants know what to expect. While this document does not usually get contributed to a project, saving it as record of the event is recommended. Agendas may benefit from the addition of resources specific to the project the event is supporting, like a documentation style guide, a project glossary, or the like.*

> *Please delete any comments using the `>*text here*` syntax before using this template in the wild.*

An event for [project name and link]()!

## Intro

Event time: Weekday, month day ([check the time in your timezone](https://arewemeetingyet.com/))

Welcome! Thank you for taking the time to learn a few ways to make open source-—or any digital space—-more accessible via image descriptions.

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

## Agenda

> *Choose which agenda works best for you based on time available, or adapt to fit your time needs.*

> *For a one-hour event*

- 0 minutes-30: Welcome, alt text information, and goals for the event
- 30–50: Work time!
- 50–60: Review alt text and answer final questions
- Optional: Submit your favorite image descriptions to an event hall of fame!

> *For a two-hour event*

- 0 minutes-35: Welcome, alt text information, and goals for the event
- 35–90: Work time!
- 90–120: Review alt text and answer final questions
- Optional: Submit your favorite image descriptions to an event hall of fame!

## Resources

Needed for the event:
- [The collaborative event PR]()
- [Slides]()
- [Step by Step Images: How to Add Alt-text with Github Suggestions](https://hackmd.io/@marslee/BksnYfWVK)
- [Project we are contributing to (ie. the documentation, website, or something similar; this should be the final rendered place.)]()

Extra information:
- [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?)
- [Alt text style guide for Jupyter accessibility workshops](https://github.com/Quansight-Labs/jupyter-accessibility-workshops/blob/fd1d7f96ca40943eda050a339ba64bcf16dd638a/docs/alt-text-guide.md) (This may be useful for non-Jupyter projects since it makes some choices regarding styling for you.)

## How to participate

1. Go to [our working PR]() and review the list of files needing alt text.
2. Comment on the PR which file you plan to work on. You can work as a team if desired!
3. Write alt text for an image.
4. Submit that alt text on the PR via a single-comment suggestion. [Step by Step Images: How to Add Alt-text with Github Suggestions](https://hackmd.io/@marslee/BksnYfWVK).

**Note:** If there is an image you want to add alt text to that is not yet in the PR, tell [event host] and they can add it.


6. Repeat steps 2 through 4 as much as you'd like. Be sure to coordinate with others to cover as much of the blog as we can.
7. **Optional:** If you have time, you can team up with other participants and give feedback on each others' alt text.
8. You did it! Great work!

## Alt text review 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
- [ ] 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

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

- [Your questions here! Adding your name is optional.]
23 changes: 23 additions & 0 deletions workshop-resources/alt-text/contributing-pr-template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
> *Contributing PRs are the pull requests from an event host's fork of the main project to the main project (the upstream repo). This PR template provides a framework for summarizing the changes contibuted, offers support to the reviewer in case they have questions about this type of contribution, and mentions that this was a collaborative effort.*

> *This PR template should be used as an addition to the main project's own PR template (if they have one). Be sure to answer what they ask of you in their template to the best of your ability and respect their contributing guidelines.*

> *Please delete any comments using the `>*text here*` syntax before using this template in the wild.*

This PR adds or updates existing [alt text](https://www.w3.org/WAI/fundamentals/accessibility-intro/#examples) to [project name]. It includes alt text for
- List files or links where contributions happen.
- There may be only one location or multiple.
- This helps reviewers orient themselves.
- And helps event participants quantify their contributions.

If there are images in this repo you think were missed, I'd love to know so we can address them in the future.

If you have any questions about reviewing alt text, let me know and I'd be happy to tell you what I review for.

Thanks in advance for reviewing this PR! 🌻

---

This alt text was contributed by wonderful volunteers at the [project name alt text workshops]()! They teamed up to make progress on so many images.

If you are curious how we have a commit authored by multiple people), feel free to check out [our working PR]() or the [How to Participate section of the event agenda]().
50 changes: 50 additions & 0 deletions workshop-resources/alt-text/working-pr-template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Welcome to the working PR!

> *Working PRs are the pull requests on an event host's fork of the main project. This PR allows participants to contribute image desctiptions/alt text via GitHub suggestions for in order to commit to the branch. This PR template has information about how to participate and needs to link back to other support resources like the agenda.*

> *Please delete any comments using the `>*text here*` syntax before using this template in the wild.*

This is the working PR for the [project name] alt text workshops! This is where we collaborate during the event before we send a clean contribution over to the [main repo]().

For the full info about this event, please visit the [event agenda]().

## How to contribute

⭐ For full info about how to interact with this PR, please visit the [How to Participate section of the agenda](). Please contribute via [suggestions](https://hackmd.io/@marslee/BksnYfWVK) so we can easily review each other's work and give you credit in the commit history!

✏️ If you plan to work on a file, let people know by commenting below. You can do this as a group, and you can write alt text for as many images as you'd like. We can have multiple suggestions for the same alt text, but it would be nice if we spread out to cover more images.

📚 If you need a reference for how to format your suggestions, [alt text in Markdown files (ends with `.md`) follow this format](https://www.markdownguide.org/basic-syntax/#images-1) while [alt text in RST files (ends with `.rst`) follow this format](https://sublime-and-sphinx-guide.readthedocs.io/en/latest/images.html).

> *The below section is optional, review if your contribution is all new alt text, or you will be editing existing ones.*

🖼️ There are two types of images in this PR: ones that already have alt text and ones that have none.
- Images that appear in this PR with existing alt text are still worth reviewing and editing! If you think they could benefit from a different description, please suggest one.
- Images with no alt text need a description added in place of the blank.

❗ If you think an image is missing from these files, let @[event host] know and they will add it to the PR.

## Images in this PR

> *This section is optional, but highly recommended. It helps participants navigate the project and helps them focus on writing alt text rather than navigating.*

> *Repeat file and line numbers as needed until the entire PR is covered.*

File: `file-name` ([Link to rendered version of this file]())

- [ ] 1. Line number (or other identifying feature)
- [ ] 2. Line number (or other identifying feature)
- [ ] 3. Line number (or other identifying feature)


> *If listing every file and line number is too long or time-consuming, the below link-only list format has also been used.*

By file, here is where the images appear.

- [`file-name` rendered]()
- [`file-name` rendered]()
- [`file-name` rendered]()

---

If you need anything, please ask @[event host] 🌻